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

:root {
    /* light default — used by nav, footer, modal, and any element outside a <section> */
    --black: #ffffff;
    --obsidian: #ffffff;
    --charcoal: #f5f5f7;
    --graphite: #ffffff;
    --steel: #f5f5f7;
    --smoke: #6e6e73;
    --silver: #86868b;
    --mist: #424245;
    --pearl: #1d1d1f;
    --white: #1d1d1f;
    --pure: #000000;
    --gold: #b8862f;
    --gold-light: #96702c;
    --gold-dim: #8a6a2f;
    --glass: rgba(0,0,0,.03);
    --glass-border: rgba(0,0,0,.08);
    --glass-hover: rgba(0,0,0,.04);
    --radius: 20px;
    --radius-sm: 12px;
    --content-max: 1280px;
    --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #ffffff;
    color: var(--pearl);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.serif {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

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

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(140,140,150,.4);
    border-radius: 3px;
}

/* ── REAL GEM ICON (used everywhere instead of drawn/text shapes) ── */
.icon-gem {
    width: 42px;
    height: 42px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.icon-gem-xs {
    width: 20px;
    height: 20px;
}

.icon-gem-real {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    color: var(--gold-light);
}

.btn-primary .icon-gem-real {
    width: 16px;
    height: 16px;
    color: inherit;
}

.icon-send {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    color: inherit;
    margin-left: 0.1rem;
}

.icon-gem-sm {
    width: 58px;
    height: 58px;
}

.icon-gem-hero {
    width: 100%;
    height: 100%;
    max-width: 340px;
    max-height: 300px;
    filter: drop-shadow(0 30px 60px rgba(184,134,60,.35));
}

.gem-face {
    fill: var(--gold-light);
}

.gem-face-a {
    fill: url(#gemGradA);
}

.gem-face-b {
    fill: url(#gemGradB);
    opacity: .95;
}

.gem-face-c {
    fill: url(#gemGradC);
    opacity: .85;
}

.gem-face-d {
    fill: url(#gemGradD);
    opacity: .7;
}

.gem-line {
    fill: none;
    stroke: rgba(255,255,255,.5);
    stroke-width: 1.2;
}

/* ── NAV ── */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: all .3s var(--ease);
    height: 80px;
    overflow: visible;
}

.nav-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    overflow: visible;
}

    .logo-img,
    .nav-logo img {
        /* deliberately taller than the 80px bar itself — nav has overflow:visible
           and align-items:center, so a bigger logo bleeds evenly above/below the
           bar's edges instead of being squeezed to fit inside it. This is how you
           get a genuinely bigger, more visible logo without also making the whole
           header bar taller (which was the actual complaint last round). */
        height: 118px;
        width: auto;
        object-fit: contain;
    }

footer .nav-logo {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.9rem;
    overflow: visible;
}

    footer .nav-logo img {
        height: 110px;
    }

.nav-logo-text span:first-child {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pearl);
}

.nav-logo-text span:last-child {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--smoke);
    text-transform: uppercase;
    margin-top: 3px;
    display: block;
}

.nav-links {
    display: flex;
    gap: 2.25rem;
    list-style: none;
    margin-bottom: 0 !important;
}

    .nav-links a {
        text-decoration: none;
        color: var(--mist);
        font-size: 0.82rem;
        letter-spacing: 0.01em;
        font-weight: 500;
        transition: color 0.25s;
        position: relative;
    }

        .nav-links a:hover {
            color: var(--pearl);
        }

.nav-cta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* ── BUTTONS ── */
.btn-ghost {
    padding: 0.55rem 1.3rem;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--mist);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    border-radius: 980px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

    .btn-ghost:hover {
        border-color: var(--glass-border);
        background: var(--glass-hover);
        color: var(--pearl);
    }

.btn-gold,
.btn-primary {
    padding: 0.7rem 1.6rem;
    background: linear-gradient(135deg, var(--gold-dim), var(--gold-light));
    color: #14100a;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    border-radius: 980px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: none;
}

    .btn-gold:hover,
    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(184,134,60,.35);
    }

    .btn-primary .icon-gem {
        width: 14px;
        height: 14px;
    }

.btn-outline-lg {
    padding: 0.7rem 1.6rem;
    border: 1px solid rgba(255,255,255,.28);
    background: transparent;
    color: #f5f5f7;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    border-radius: 980px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-outline-lg:hover {
        border-color: rgba(255,255,255,.5);
        background: rgba(255,255,255,.06);
    }

.btn-whatsapp {
    padding: 0.5rem 1.1rem;
    background: #25D366;
    color: #062210;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 980px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all .2s var(--ease);
}

    .btn-whatsapp:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(37,211,102,.35);
    }

@media (max-width: 900px) {
    .nav-links, .nav-cta {
        display: none;
    }

    /* scales down from the desktop 80px nav / 118px overflowing-logo pair above,
       keeping the SAME "logo deliberately bleeds past the bar" approach rather
       than exceeding desktop's proportions */
    nav {
        height: 64px;
    }

    .logo-img,
    .nav-logo img {
        height: 88px;
    }

    .nav-logo-text span:first-child {
        font-size: 1.15rem;
    }

    .nav-logo-text span:last-child {
        font-size: 0.58rem;
    }
}

/* ══════════════ SECTION THEME SYSTEM ══════════════
   Sections default to a DARK theme; add .theme-light for a LIGHT theme.
   Both reuse the same variable names as :root so nothing outside a
   <section> (nav, footer, modal, admin pages) is affected. */
section {
    --obsidian: #0a0a0c;
    --charcoal: #161618;
    --graphite: #161618;
    --steel: #1f1f22;
    --smoke: #98989d;
    --silver: #8e8e93;
    --mist: #c7c7cc;
    --pearl: #f5f5f7;
    --white: #f5f5f7;
    --gold-light: #e8d4a5;
    --glass: rgba(255,255,255,.04);
    --glass-border: rgba(255,255,255,.12);
    --glass-hover: rgba(255,255,255,.07);
    background: var(--obsidian);
    color: var(--mist);
    padding: 6.5rem 3rem;
    position: relative;
    overflow: hidden;
    transition: background .3s var(--ease);
}

    section.theme-light {
        --obsidian: #ffffff;
        --charcoal: #f5f5f7;
        --graphite: #ffffff;
        --steel: #f5f5f7;
        --smoke: #6e6e73;
        --silver: #86868b;
        --mist: #424245;
        --pearl: #1d1d1f;
        --white: #1d1d1f;
        --gold-light: #96702c;
        --glass: rgba(0,0,0,.03);
        --glass-border: rgba(0,0,0,.08);
        --glass-hover: rgba(0,0,0,.04);
    }

/* content max-width — full-bleed section bg, centered inner content, like Apple */
.section-label, .section-title, .section-desc, .divider,
.craft-layout, .catalog-layout, .why-grid, .export-layout,
.contact-layout, .cert-grid, .process-steps, .seed-timeline,
.seed-header, .testimonial-grid, .trust-strip, .featured-header {
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
}

/* label/title/desc/divider default to left-aligned under the title, not centered —
   only sections that explicitly center their header (e.g. .seed-header, .process
   intro) override this locally via inline style or a nested selector. */
.section-label, .section-title, .section-desc, .divider {
    margin-left: 0;
    margin-right: auto;
}

.section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gold-light);
    margin-bottom: 0.9rem;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: var(--pearl);
}

    .section-title em {
        font-style: normal;
        background: linear-gradient(90deg, var(--gold-dim), var(--gold-light));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.divider {
    width: 44px;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold-light));
    border-radius: 2px;
    margin: 1.25rem 0 1.5rem;
}

.section-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--smoke);
    max-width: 620px;
    font-weight: 400;
}

/* fade-in-section is toggled to .visible by JS on scroll — keep this contract */
.fade-in-section {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

    .fade-in-section.visible {
        opacity: 1;
        transform: translateY(0);
    }

@media (max-width: 1024px) {
    section {
        padding: 5rem 2rem;
    }
}

@media (max-width: 640px) {
    section {
        padding: 3.5rem 1.25rem;
    }
}

/* ── HERO ── */
#hero {
    --obsidian: #050506;
    padding: 0;
    min-height: min(100vh, 860px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse 85% 55% at 50% 15%, #17130c 0%, #050506 60%);
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 480px at 78% 28%, rgba(184,134,60,.16), transparent 70%), radial-gradient(circle 380px at 15% 75%, rgba(184,134,60,.08), transparent 70%);
    pointer-events: none;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
    pointer-events: none;
}

/* real diamond photograph as an animated, softly-blended hero backdrop */
.hero-diamond {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

    .hero-diamond::before {
        content: '';
        position: absolute;
        inset: -5%;
        background-image: url('https://images.unsplash.com/photo-1664044020180-b75bfddf9776?auto=format&fit=crop&w=1600&q=80');
        background-size: cover;
        background-position: center 35%;
        opacity: 0.32;
        filter: saturate(0.9);
        animation: heroPhotoDrift 22s ease-in-out infinite alternate;
        mask-image: radial-gradient(ellipse 68% 62% at 50% 42%, black 45%, transparent 78%);
        -webkit-mask-image: radial-gradient(ellipse 68% 62% at 50% 42%, black 45%, transparent 78%);
    }

    .hero-diamond::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(5,5,6,.55) 0%, rgba(5,5,6,.25) 40%, rgba(5,5,6,.75) 100%);
    }

@keyframes heroPhotoDrift {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.08) translate(-1.5%, -1%);
    }
}

/* large, very-faint brand mark bleeding off the corner — pure background
   branding, never competing with the hero copy for attention */
.hero-watermark {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -6%;
    width: 620px;
    height: 620px;
    transform: translateY(-50%) rotate(-8deg);
    background-image: url('/images/brand-icon.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.05;
    pointer-events: none;
}

@media (max-width: 900px) {
    .hero-watermark {
        width: 380px;
        height: 380px;
        right: -12%;
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    padding: 7.5rem 2rem 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid rgba(232,212,165,.3);
    background: rgba(232,212,165,.06);
    border-radius: 980px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #e8d4a5;
    margin-bottom: 1.5rem;
}

.hero-sub {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #98989d;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.hero-title {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.04;
    color: #f5f5f7;
}

    .hero-title em {
        font-style: normal;
        background: linear-gradient(90deg, #d9c08a, #f5e6c8 45%, #c9a35f);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.hero-desc {
    font-size: 1.1rem;
    line-height: 1.65;
    color: #a1a1a6;
    max-width: 540px;
    margin: 0 auto;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-stats {
    display: flex;
    gap: 2.75rem;
    justify-content: center;
    margin-top: 2.5rem;
    flex-wrap: wrap;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255,255,255,.1);
    width: 100%;
}

.hero-stat {
    text-align: center;
}

.hero-stat-num {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f5f5f7;
}

.hero-stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: #8e8e93;
    text-transform: uppercase;
    margin-top: 0.2rem;
}

.hero-divider {
    width: 1px;
    background: rgba(255,255,255,.12);
}

.scroll-indicator {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
    pointer-events: none;
}

    .scroll-indicator span {
        font-size: 0.68rem;
        letter-spacing: 0.15em;
        color: #6e6e73;
        text-transform: uppercase;
    }

.scroll-line {
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% {
        opacity: .3;
    }

    50% {
        opacity: 1;
    }
}

@media (max-height: 900px) {
    .scroll-indicator {
        display: none;
    }
}

@media (max-width: 640px) {
    .hero-content {
        padding: 6.75rem 1.25rem 2.5rem;
    }

    .hero-stats {
        gap: 1.5rem;
    }

    .scroll-indicator {
        display: none;
    }
}

/* ── CRAFTSMANSHIP ── */
.craft-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.craft-stats {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.75rem;
    flex-wrap: wrap;
}

.craft-stat {
    background: linear-gradient(160deg, rgba(184,134,60,.10), rgba(184,134,60,.03));
    border: 1px solid rgba(184,134,60,.35);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1.15rem;
    min-width: 118px;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

    .craft-stat:hover {
        transform: translateY(-4px);
        border-color: var(--gold-light);
        box-shadow: 0 10px 24px rgba(184,134,60,.18);
    }

    .craft-stat strong {
        display: block;
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        background: linear-gradient(135deg, var(--gold-dim), var(--gold-light));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        line-height: 1.15;
    }

    .craft-stat span {
        display: block;
        font-size: 0.72rem;
        color: var(--smoke);
        margin-top: 0.15rem;
        letter-spacing: 0.01em;
    }

.craft-quote {
    margin-top: 2rem;
    padding: 1.5rem 1.75rem;
    border-left: 3px solid var(--gold-light);
    background: var(--charcoal);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

    .craft-quote p {
        font-size: 1.15rem;
        font-style: italic;
        font-weight: 500;
        color: var(--pearl);
        line-height: 1.5;
    }

.craft-visual {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.craft-carousel {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(155deg, var(--charcoal), var(--steel));
}

.craft-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.1s ease, transform 6s ease;
    z-index: 1;
}

    .craft-slide.active {
        opacity: 1;
        transform: scale(1);
        z-index: 2;
    }

.craft-carousel-shade {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
}

.craft-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}

    .craft-carousel-dots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--glass-border);
        cursor: pointer;
        transition: all .25s var(--ease);
    }

        .craft-carousel-dots span.active {
            background: var(--gold-light);
            width: 20px;
            border-radius: 4px;
        }

@media (max-width: 900px) {
    .craft-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .craft-visual {
        order: -1;
        max-height: 320px;
    }
}

/* ── SEARCH BAR ── */
.search-bar {
    max-width: var(--content-max);
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.4rem;
    background: var(--graphite);
    border: 1px solid var(--glass-border);
    border-radius: 980px;
    color: var(--smoke);
}

    .search-bar svg {
        width: 16px;
        height: 16px;
        color: var(--silver);
        flex-shrink: 0;
    }

    .search-bar input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: 0.95rem;
        color: var(--pearl);
    }

        .search-bar input::placeholder {
            color: var(--silver);
        }

/* ── CATALOG LAYOUT ── */
.catalog-layout {
    display: block;
}

.filters-panel {
    background: var(--charcoal);
    border-radius: var(--radius);
    padding: 0.5rem 1.75rem;
    margin-bottom: 2rem;
}

.filter-title {
    display: none;
}

.filter-row {
    border-bottom: 1px solid var(--glass-border);
}

    .filter-row:last-of-type {
        border-bottom: none;
    }

.filter-row-head {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 0;
    font-family: inherit;
    text-align: left;
}

.filter-row-title {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pearl);
}

.filter-row-summary {
    color: var(--gold-light);
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: auto;
}

.filter-row-chevron {
    width: 14px;
    height: 14px;
    color: var(--smoke);
    flex-shrink: 0;
    transition: transform .25s var(--ease);
}

.filter-row.open .filter-row-chevron {
    transform: rotate(180deg);
}

.filter-row-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease), padding .3s var(--ease);
}

.filter-row.open .filter-row-body {
    max-height: 400px;
    padding-bottom: 1.25rem;
}

.filter-group {
    margin-bottom: 0;
    flex: 0 0 auto;
}

    .filter-group:last-of-type {
        margin-bottom: 0;
    }

.filter-group-title {
    display: none;
}

/* Card-style shape picker (icon on top, label below) instead of the old
   horizontal pill/chip — same idea as a typical diamond-shape gallery, just
   sized down so a full row of ~10-12 shapes still fits without feeling like
   giant tiles. Uses CSS grid (not flex-wrap) so every row lines up into
   clean, equal-width columns instead of ragged flex rows — that raggedness
   is what made the mobile layout look uneven. */
.shape-visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.55rem;
}

.shape-card {
    background: var(--graphite);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 0.55rem 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    cursor: pointer;
    transition: border-color .15s var(--ease), background-color .15s var(--ease);
    text-align: center;
}

    .shape-card img {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

    .shape-card div {
        font-size: 0.6rem;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--smoke);
        font-weight: 600;
        white-space: nowrap;
        line-height: 1.2;
    }

    /* A single border-color change is the whole hover/active effect — no
       transform, no extra box-shadow ring stacked on top of the border.
       Stacking a real border AND an inset box-shadow (the previous version)
       renders as two overlapping 1px rings; at the fractional device-pixel
       scaling Windows commonly uses (125%/150%), that overlap doesn't line
       up on whole pixels and shows up as a broken/cut-looking border on some
       sides. One border, no shadow, no movement — always renders clean. */
    .shape-card:hover {
        border-color: var(--gold-light);
    }

    .shape-card.active {
        border-color: var(--gold-light);
        border-width: 1.5px;
        background: rgba(184,134,60,.08);
    }

        .shape-card.active div {
            color: var(--gold-light);
        }

@media (max-width: 480px) {
    .shape-visual-grid {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
        gap: 0.4rem;
    }

    .shape-card {
        padding: 0.45rem 0.3rem 0.4rem;
    }

        .shape-card img {
            width: 26px;
            height: 26px;
        }

        .shape-card div {
            font-size: 0.56rem;
        }
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.filter-chip {
    padding: 0.4rem 0.85rem;
    background: var(--graphite);
    border: 1px solid var(--glass-border);
    border-radius: 980px;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--mist);
    cursor: pointer;
    transition: all .2s var(--ease);
    white-space: nowrap;
}

    .filter-chip:hover {
        border-color: var(--gold-light);
    }

    .filter-chip.active {
        background: var(--pearl);
        color: var(--obsidian);
        border-color: var(--pearl);
    }

.filter-range {
    width: 100%;
    max-width: 460px;
}

    /* Custom-styled range input — the browser default (a plain accent-colored
       thumb on a flat track) gave no visual sense of "how much of the range is
       selected". This fills the track up to the current value with the gold
       gradient (updated live via JS) and gives the thumb a properly tactile,
       branded look instead of the generic OS control. */
    .filter-range input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
        border-radius: 980px;
        background: linear-gradient(to right, var(--gold-light) 0%, var(--gold-light) 100%, var(--glass-border) 100%);
        outline: none;
        cursor: pointer;
    }

        .filter-range input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid var(--gold-light);
            box-shadow: 0 2px 8px rgba(0,0,0,.35);
            cursor: pointer;
            transition: transform .12s;
        }

            .filter-range input[type="range"]::-webkit-slider-thumb:hover {
                transform: scale(1.15);
            }

        .filter-range input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid var(--gold-light);
            box-shadow: 0 2px 8px rgba(0,0,0,.35);
            cursor: pointer;
        }

        .filter-range input[type="range"]::-moz-range-track {
            height: 6px;
            border-radius: 980px;
            background: transparent;
        }

.range-vals {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--smoke);
    margin-top: 0.6rem;
}

.filters-panel > .btn-ghost {
    margin-top: 1rem !important;
}

/* ── SORT BAR ── */
.sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.sort-count {
    font-size: 0.9rem;
    color: var(--smoke);
}

    .sort-count strong {
        color: var(--pearl);
        font-weight: 700;
    }

.sort-select {
    padding: 0.5rem 1rem;
    background: var(--graphite);
    border: 1px solid var(--glass-border);
    border-radius: 980px;
    font-size: 0.82rem;
    color: var(--pearl);
    cursor: pointer;
}

.sort-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.view-toggle {
    display: inline-flex;
    background: var(--graphite);
    border: 1px solid var(--glass-border);
    border-radius: 980px;
    padding: 3px;
    gap: 2px;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 980px;
    background: transparent;
    color: var(--smoke);
    cursor: pointer;
    transition: background .25s var(--ease), color .25s var(--ease);
}

    .view-toggle-btn svg {
        width: 16px;
        height: 16px;
    }

    .view-toggle-btn:hover {
        color: var(--pearl);
    }

    .view-toggle-btn.active {
        background: linear-gradient(135deg, var(--gold-dim), var(--gold-light));
        color: #14100a;
    }

@media (max-width: 900px) {
    .filters-panel {
        padding: 0.5rem 1.25rem;
    }
}

/* ══════════════ DIAMOND CARD (rendered by site.js) ══════════════ */
.diamonds-grid,
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.diamond-card {
    background: var(--graphite);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

    .diamond-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 32px rgba(0,0,0,.1);
        border-color: var(--gold-light);
    }

.diamond-img {
    width: 100%;
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--charcoal), var(--steel));
}

.diamond-media, .diamond-media.no-image {
    width: 100%;
    height: 100%;
    position: relative;
}

.media-slide {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    inset: 0;
    transition: opacity .3s;
}

    .media-slide.active {
        opacity: 1;
        position: relative;
    }

    .media-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .media-slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.diamond-video-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    backdrop-filter: blur(2px);
}

.diamond-360-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: linear-gradient(155deg, #eef2ff, #e0e7ff);
    color: #4338ca;
}

    .diamond-360-thumb svg {
        width: 1.8rem;
        height: 1.8rem;
    }

    .diamond-360-thumb span {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

.no-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--silver);
}

    .no-image-placeholder svg {
        width: 1.6rem;
        height: 1.6rem;
    }

    .no-image-placeholder span {
        font-size: 0.7rem;
    }

.diamond-shape-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.diamond-body {
    padding: 1.1rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.diamond-top-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.diamond-badge-inline {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.22rem 0.55rem;
    border-radius: 980px;
    background: linear-gradient(135deg, var(--gold-dim), var(--gold-light));
    color: #14100a;
}

.diamond-status-inline {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.22rem 0.55rem;
    border-radius: 980px;
}

.status-available {
    background: rgba(48,209,88,.14);
    color: #1b7f3d;
}

.status-hold {
    background: rgba(255,159,10,.14);
    color: #a15c00;
}

.status-sold {
    background: rgba(255,69,58,.14);
    color: #b0281f;
}

section .status-available {
    color: #4ade80;
    background: rgba(74,222,128,.14);
}

section .status-hold {
    color: #fbbf24;
    background: rgba(251,191,36,.14);
}

section .status-sold {
    color: #f87171;
    background: rgba(248,113,113,.14);
}

.diamond-stock-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.22rem 0.55rem;
    border-radius: 980px;
    background: var(--charcoal);
    color: var(--smoke);
}

.diamond-stock {
    font-size: 0.68rem;
    color: var(--silver);
    margin-bottom: 0.25rem;
}

.diamond-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--pearl);
    line-height: 1.25;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}

.diamond-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.spec-tag {
    padding: 0.22rem 0.6rem;
    background: var(--charcoal);
    border-radius: 980px;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--smoke);
}

.spec-tag-cert {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.spec-tag-cert-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1d1d1f;
    color: #fff;
    flex-shrink: 0;
}

.diamond-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.85rem;
    margin-top: auto;
    border-top: 1px solid var(--glass-border);
}

.diamond-price-label {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--silver);
}

.diamond-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pearl);
    letter-spacing: -0.01em;
}

/* ── selection checkbox — sits on the card image, toggles inclusion in a
   combined multi-diamond inquiry without opening the detail modal ── */
.diamond-select {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(10,10,12,.55);
    border: 1.5px solid rgba(255,255,255,.65);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

    .diamond-select svg {
        width: 14px;
        height: 14px;
        color: #fff;
        opacity: 0;
        transition: opacity .15s var(--ease);
    }

    .diamond-select:hover {
        transform: scale(1.08);
        border-color: var(--gold-light);
    }

    .diamond-select.checked {
        background: linear-gradient(135deg, var(--gold-dim), var(--gold-light));
        border-color: var(--gold-light);
    }

        .diamond-select.checked svg {
            opacity: 1;
            color: #14100a;
        }

.diamond-card.is-selected {
    border-color: var(--gold-light);
    box-shadow: 0 0 0 2px rgba(232,212,165,.35);
}

/* ── featured badge — a small gold star on the opposite corner from the
   selection checkbox, instead of a text pill competing with the status pill ── */
.diamond-featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-dim), var(--gold-light));
    box-shadow: 0 4px 10px rgba(184,134,60,.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .diamond-featured-badge svg {
        width: 14px;
        height: 14px;
        color: #14100a;
    }

/* ── list view — same card markup, laid out as a row instead of a column ── */
.diamonds-grid.list-view {
    grid-template-columns: 1fr;
    gap: 12px;
}

    .diamonds-grid.list-view .diamond-card {
        flex-direction: row;
        align-items: center;
        padding: 10px;
        gap: 0;
    }

    /* small, fixed-size thumbnail — a real photo used to stretch the whole row
       to match wrapped body content, while "No Image" placeholders stayed tiny;
       now every row's thumbnail is the same compact size regardless of content */
    .diamonds-grid.list-view .diamond-img {
        width: 84px;
        height: 84px;
        flex: 0 0 84px;
        aspect-ratio: 1;
        border-radius: calc(var(--radius) - 10px);
        align-self: center;
    }

    .diamonds-grid.list-view .diamond-body {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1.5rem;
        padding: 0 1.1rem;
    }

        .diamonds-grid.list-view .diamond-top-tags {
            flex-direction: column;
            margin-bottom: 0;
            gap: 0.3rem;
        }

        .diamonds-grid.list-view .diamond-stock,
        .diamonds-grid.list-view .diamond-name {
            margin-bottom: 0;
        }

        .diamonds-grid.list-view .diamond-name {
            min-width: 180px;
        }

        .diamonds-grid.list-view .diamond-specs {
            margin-bottom: 0;
        }

        .diamonds-grid.list-view .diamond-footer {
            border-top: none;
            padding-top: 0;
            margin-top: 0;
            margin-left: auto;
            flex-direction: row;
            align-items: center;
            gap: 1rem;
        }

            .diamonds-grid.list-view .diamond-price-label {
                display: none;
            }

        .diamonds-grid.list-view .diamond-select {
            width: 18px;
            height: 18px;
            top: 4px;
            left: 4px;
            border-width: 1px;
        }

            .diamonds-grid.list-view .diamond-select svg {
                width: 10px;
                height: 10px;
            }

        .diamonds-grid.list-view .diamond-featured-badge {
            width: 18px;
            height: 18px;
            top: 4px;
            right: 4px;
        }

            .diamonds-grid.list-view .diamond-featured-badge svg {
                width: 10px;
                height: 10px;
            }

@media (max-width: 720px) {
    /* keep an actual compact ROW on mobile instead of reverting to the
       full-width stacked card — that reversion was the bug: list view
       looked identical to grid view on phones */
    .diamonds-grid.list-view .diamond-card {
        flex-direction: row;
        align-items: center;
        padding: 8px;
        gap: 0;
    }

    .diamonds-grid.list-view .diamond-img {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
        aspect-ratio: 1;
        border-radius: calc(var(--radius) - 12px);
    }

    .diamonds-grid.list-view .diamond-body {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 0.7rem;
        gap: 0.25rem;
        min-width: 0; /* lets the name/stock truncate instead of overflowing the row */
    }

    .diamonds-grid.list-view .diamond-top-tags {
        flex-direction: row;
        gap: 0.3rem;
    }

    .diamonds-grid.list-view .diamond-stock {
        font-size: 0.62rem;
    }

    .diamonds-grid.list-view .diamond-name {
        font-size: 0.82rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .diamonds-grid.list-view .diamond-specs {
        display: none; /* full spec detail is one tap away in the modal; no room for it in a compact mobile row */
    }

    .diamonds-grid.list-view .diamond-footer {
        margin-left: 0;
        width: 100%;
        border-top: none;
        padding-top: 0.1rem;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .diamonds-grid.list-view .diamond-price-label {
        display: none;
    }

    .diamonds-grid.list-view .diamond-price {
        font-size: 0.92rem;
    }

    .diamonds-grid.list-view .btn-whatsapp {
        padding: 0.4rem 0.8rem;
        font-size: 0.72rem;
    }
}

/* ── floating selection bar for multi-diamond inquiry ──
   NOTE: this element lives outside any <section>, so it must NOT rely on the
   themed CSS custom properties (--obsidian, --mist, etc.) — those are scoped
   to <section> and fall back to :root's LIGHT theme values here, which is
   exactly why this bar previously rendered as near-invisible pale-on-white
   text. Every color below is a hardcoded value for that reason. */
.selection-bar {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 500;
    width: min(94vw, 620px);
}

.selection-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.4rem;
    background: #111114;
    border: 1px solid rgba(232,212,165,.3);
    border-radius: 980px;
    box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.selection-bar-count {
    color: #f5f5f7;
    font-size: 0.92rem;
    white-space: nowrap;
}

    .selection-bar-count strong {
        color: #e8d4a5;
    }

.selection-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.selection-bar-btn-ghost {
    padding: 0.5rem 0.9rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 980px;
    color: #f5f5f7;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, border-color .2s;
}

    .selection-bar-btn-ghost:hover {
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.5);
    }

.selection-bar-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: linear-gradient(135deg, #8a6a2f, #e8d4a5);
    border: none;
    border-radius: 980px;
    color: #14100a;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s;
}

    .selection-bar-btn-primary:hover {
        transform: translateY(-1px);
    }

    .selection-bar-btn-primary svg {
        width: 15px;
        height: 15px;
    }

@media (max-width: 560px) {
    .selection-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.7rem;
        border-radius: 18px;
    }

    .selection-bar-actions {
        justify-content: space-between;
    }
}

/* ── "select all" control in the sort bar ── */
.select-all-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: var(--graphite);
    border: 1px solid var(--glass-border);
    border-radius: 980px;
    color: var(--pearl);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .2s var(--ease), color .2s var(--ease);
}

    .select-all-toggle:hover {
        border-color: var(--gold-light);
    }

    .select-all-toggle svg {
        width: 14px;
        height: 14px;
    }

@media (max-width: 1440px) {
    .diamonds-grid, .inventory-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1100px) {
    .diamonds-grid, .inventory-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .diamonds-grid, .inventory-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 480px) {
    /* Keep 2 cards per row all the way down to small phones rather than
       collapsing to a single column — a single column meant a lot more
       vertical scrolling to see the same number of diamonds on mobile. */
    .diamonds-grid, .inventory-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 640px) {
    /* Below this width cards are 2-per-row (see the breakpoint above), which
       leaves too little horizontal room for "Total Price + amount" and the
       Inquire pill to sit side by side — the button was getting squashed or
       visually broken. Stacking price above a full-width button is the
       reliable pattern once the card itself is this narrow. */
    .diamond-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .btn-whatsapp {
        width: 100%;
        justify-content: center;
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .diamond-footer {
        gap: 0.5rem;
    }
}

/* ══════════════ CATALOG PAGINATION ══════════════ */
.catalog-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 0.6rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--graphite);
    color: var(--pearl, #f5f5f7);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

    .page-btn:hover:not(:disabled) {
        border-color: var(--gold-light);
    }

    .page-btn.active {
        background: var(--gold-light, #c9a35f);
        border-color: var(--gold-light, #c9a35f);
        color: #1d1d1f;
    }

    .page-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

@media (max-width: 480px) {
    .catalog-pagination {
        gap: 0.35rem;
    }

    .page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* ── WHY US (bento grid) ── */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 3rem;
}

.why-card {
    background: var(--charcoal);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    transition: transform .3s var(--ease), background .3s var(--ease);
}

    .why-card > h3, .why-card > p {
        margin-left: 1.75rem;
        margin-right: 1.75rem;
    }

    .why-card > p {
        margin-bottom: 1.75rem;
    }

    .why-card:hover {
        transform: translateY(-3px);
        background: var(--steel);
    }

/* staggered entrance to match the rest of the page's motion */
.why-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .6s var(--ease), background .3s var(--ease);
}

.fade-in-section.visible .why-card {
    opacity: 1;
    transform: translateY(0);
}

    .fade-in-section.visible .why-card:nth-child(1) { transition-delay: .04s; }
    .fade-in-section.visible .why-card:nth-child(2) { transition-delay: .11s; }
    .fade-in-section.visible .why-card:nth-child(3) { transition-delay: .18s; }
    .fade-in-section.visible .why-card:nth-child(4) { transition-delay: .25s; }
    .fade-in-section.visible .why-card:nth-child(5) { transition-delay: .32s; }
    .fade-in-section.visible .why-card:nth-child(6) { transition-delay: .39s; }

    .fade-in-section.visible .why-card:hover {
        transform: translateY(-3px);
    }

.why-icon {
    width: 100%;
    height: 170px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    position: relative;
}

    .why-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s var(--ease);
    }

.why-card:hover .why-icon img {
    transform: scale(1.08);
}

.why-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35));
}

.why-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pearl);
    margin-bottom: 0.6rem;
}

.why-card p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--smoke);
}

@media (max-width: 900px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .why-grid {
        grid-template-columns: 1fr;
    }
}

/* ── SEED TO STONE ── */
.seed-header {
    text-align: center;
    margin-bottom: 1rem;
}

    .seed-header .section-label {
        justify-content: center;
    }

    .seed-header .divider {
        margin-left: auto;
        margin-right: auto;
    }

    .seed-header .section-desc {
        max-width: 620px;
    }

.seed-timeline {
    display: grid;
    gap: 1.75rem;
    margin-top: 3.5rem;
    position: relative;
}

    /* the connecting spine running down the center of the timeline —
       desktop only, where the alternating layout actually reads as a line */
    .seed-timeline::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 3px;
        transform: translateX(-50%);
        background: linear-gradient(180deg, transparent, var(--gold-light) 8%, var(--gold-light) 92%, transparent);
        opacity: .4;
        border-radius: 3px;
    }

.seed-step {
    display: grid;
    grid-template-columns: 1fr 76px 1fr;
    align-items: center;
    background: var(--charcoal);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 2.25rem 2.75rem;
    position: relative;
    z-index: 1;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

    .seed-step:hover {
        transform: translateY(-5px);
        border-color: var(--gold-light);
        box-shadow: 0 20px 44px rgba(184,134,60,.16);
    }

    /* uniform copy → line → visual markup; flip sides per row so the
       timeline alternates, while the connector dot always stays centered */
    .seed-step .seed-copy { order: 1; }
    .seed-step .seed-line { order: 2; }
    .seed-step .seed-visual { order: 3; }

    .seed-step:nth-child(even) .seed-copy {
        order: 3;
        text-align: right;
    }

    .seed-step:nth-child(even) .seed-visual {
        order: 1;
    }

.seed-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 0.5rem;
}

.seed-title {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--pearl);
    margin-bottom: 0.6rem;
}

.seed-desc {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--smoke);
}

.seed-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

    .seed-step:nth-child(even) .seed-meta {
        justify-content: flex-end;
    }

.seed-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--mist);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 980px;
    padding: 0.35rem 0.75rem 0.35rem 0.6rem;
}

    .seed-meta-item svg {
        width: 13px;
        height: 13px;
        color: var(--gold-light);
        flex-shrink: 0;
    }

.seed-line {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.seed-dot {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: linear-gradient(135deg, var(--gold-dim), var(--gold-light));
    color: #14100a;
    box-shadow: 0 0 0 6px var(--charcoal), 0 8px 20px rgba(184,134,60,.35);
    position: relative;
    z-index: 2;
    animation: seedDotPulse 3.2s ease-in-out infinite;
}

    .seed-dot svg {
        width: 17px;
        height: 17px;
    }

    .seed-dot em {
        font-style: normal;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.03em;
    }

@keyframes seedDotPulse {
    0%, 100% {
        box-shadow: 0 0 0 6px var(--charcoal), 0 8px 20px rgba(184,134,60,.35);
    }

    50% {
        box-shadow: 0 0 0 6px var(--charcoal), 0 8px 20px rgba(184,134,60,.35), 0 0 0 13px rgba(184,134,60,.14);
    }
}

.seed-visual {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: calc(var(--radius) - 4px);
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
}

    .seed-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s var(--ease);
    }

    .seed-step:hover .seed-visual img {
        transform: scale(1.08);
    }

    .seed-visual::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55));
    }

.seed-visual-tag {
    position: absolute;
    left: 1rem;
    bottom: 0.9rem;
    z-index: 1;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.25);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 0.35rem 0.7rem;
    border-radius: 980px;
}

    .seed-step:nth-child(even) .seed-visual-tag {
        left: auto;
        right: 1rem;
    }

/* closing stat strip beneath the timeline */
.seed-stats {
    max-width: var(--content-max);
    margin: 3.5rem auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.seed-stat {
    text-align: center;
    padding: 1.75rem 1rem;
    border-radius: var(--radius);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    transition: transform .3s var(--ease), border-color .3s var(--ease);
}

    .seed-stat:hover {
        transform: translateY(-3px);
        border-color: var(--gold-light);
    }

.seed-stat-num {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

    .seed-stat-num span {
        font-size: 1.1rem;
    }

.seed-stat-label {
    font-size: 0.82rem;
    color: var(--smoke);
    margin-top: 0.35rem;
}

/* staggered slide-in — each step eases in a beat after the last once the
   section itself becomes visible (see .fade-in-section in the JS observer) */
.seed-step {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.fade-in-section.visible .seed-step {
    opacity: 1;
    transform: translateY(0);
}

    .fade-in-section.visible .seed-step:nth-child(1) { transition-delay: .05s; }
    .fade-in-section.visible .seed-step:nth-child(2) { transition-delay: .16s; }
    .fade-in-section.visible .seed-step:nth-child(3) { transition-delay: .27s; }
    .fade-in-section.visible .seed-step:nth-child(4) { transition-delay: .38s; }

    .fade-in-section.visible .seed-step:hover {
        transform: translateY(-5px);
    }

.seed-stat {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .3s var(--ease);
}

.fade-in-section.visible .seed-stat {
    opacity: 1;
    transform: translateY(0);
}

    .fade-in-section.visible .seed-stat:nth-child(1) { transition-delay: .45s; }
    .fade-in-section.visible .seed-stat:nth-child(2) { transition-delay: .52s; }
    .fade-in-section.visible .seed-stat:nth-child(3) { transition-delay: .59s; }

    .fade-in-section.visible .seed-stat:hover {
        transform: translateY(-3px);
    }

@media (max-width: 900px) {
    .seed-timeline::before {
        display: none;
    }

    .seed-step {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2rem 1.5rem;
        gap: 1.1rem;
    }

        .seed-step .seed-copy,
        .seed-step .seed-visual,
        .seed-step:nth-child(even) .seed-copy,
        .seed-step:nth-child(even) .seed-visual {
            order: 0;
            text-align: center;
        }

        .seed-step .seed-line {
            order: 0;
        }

        .seed-step .seed-meta,
        .seed-step:nth-child(even) .seed-meta {
            justify-content: center;
        }

        .seed-step:nth-child(even) .seed-visual-tag {
            left: 1rem;
            right: auto;
        }

    .seed-visual {
        height: 200px;
    }

    .seed-stats {
        grid-template-columns: 1fr;
    }
}


/* ── EXPORT ── */
.export-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.export-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.75rem;
}

.country-tag {
    padding: 0.5rem 1rem;
    background: var(--charcoal);
    border: 1px solid var(--glass-border);
    border-radius: 980px;
    font-size: 0.82rem;
    color: var(--mist);
    transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}

    .country-tag:hover {
        transform: translateY(-3px);
        border-color: var(--gold-light);
        background: var(--glass-hover);
    }

.export-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.globe-3d-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-height: 440px;
    max-width: 440px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: visible;
}

    .globe-3d-wrap canvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

.globe-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: var(--smoke);
    letter-spacing: 0.05em;
    pointer-events: none;
}

.globe-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -130%);
    background: #fff;
    color: #1d1d1f;
    padding: 0.35rem 0.75rem;
    border-radius: 980px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    z-index: 5;
}

.globe-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: var(--smoke);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

    .globe-hint i {
        font-size: 0.7rem;
    }

@media (max-width: 900px) {
    .export-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* ── PROCESS ── */
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
    position: relative;
}

    .process-steps::before {
        content: '';
        position: absolute;
        top: 51px;
        left: 12.5%;
        right: 12.5%;
        height: 2px;
        background: repeating-linear-gradient(90deg, var(--glass-border) 0 8px, transparent 8px 14px);
        z-index: 0;
    }

.process-step {
    background: var(--charcoal);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.75rem;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

    .process-step:hover {
        transform: translateY(-6px);
        border-color: var(--gold-light);
        box-shadow: 0 16px 32px rgba(184,134,60,.12);
    }

/* staggered entrance to match the rest of the page's motion */
.process-step {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.fade-in-section.visible .process-step {
    opacity: 1;
    transform: translateY(0);
}

    .fade-in-section.visible .process-step:nth-child(1) { transition-delay: .05s; }
    .fade-in-section.visible .process-step:nth-child(2) { transition-delay: .16s; }
    .fade-in-section.visible .process-step:nth-child(3) { transition-delay: .27s; }
    .fade-in-section.visible .process-step:nth-child(4) { transition-delay: .38s; }

    .fade-in-section.visible .process-step:hover {
        transform: translateY(-6px);
    }

.step-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-dim), var(--gold-light));
    color: #14100a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
    transition: transform .3s var(--ease);
}

    .step-num svg {
        width: 22px;
        height: 22px;
    }

.process-step:hover .step-num {
    transform: scale(1.12) rotate(-6deg);
}

.step-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pearl);
    margin-bottom: 0.4rem;
}

.step-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--smoke);
}

@media (max-width: 900px) {
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }

        .process-steps::before {
            display: none;
        }
}

@media (max-width: 560px) {
    .process-steps {
        grid-template-columns: 1fr;
    }
}

/* ── TESTIMONIALS (replaces the old Global Authority stats block) ── */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
}

.testimonial-card {
    background: var(--charcoal);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

    .testimonial-card:hover {
        transform: translateY(-6px);
        border-color: var(--gold-light);
        box-shadow: 0 18px 36px rgba(184,134,60,.14);
    }

.testimonial-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1.25rem;
    border: 2px solid var(--gold-light);
}

    .testimonial-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.testimonial-quote {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--mist);
    font-style: italic;
    margin-bottom: 1.5rem;
    flex: 1;
}

.testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
}

.testimonial-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--pearl);
}

.testimonial-role {
    font-size: 0.76rem;
    color: var(--smoke);
}

.trust-strip {
    display: flex;
    justify-content: center;
    gap: 3.5rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--glass-border);
}

.trust-strip-item {
    text-align: center;
}

    .trust-strip-item strong {
        display: block;
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        background: linear-gradient(135deg, var(--gold-dim), var(--gold-light));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .trust-strip-item span {
        font-size: 0.78rem;
        color: var(--smoke);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

@media (max-width: 900px) {
    .testimonial-grid {
        grid-template-columns: 1fr 1fr;
    }

    .trust-strip {
        gap: 2rem;
    }
}

@media (max-width: 640px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
    }
}

/* ── CERTIFICATIONS ── */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.85rem;
    margin-top: 1.75rem;
}

.cert-badge {
    background: var(--charcoal);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.15rem 0.85rem;
    text-align: center;
    transition: all .25s var(--ease);
}

    .cert-badge:hover {
        border-color: var(--gold-light);
        transform: translateY(-3px);
    }

    .cert-badge img {
        height: 32px;
        max-width: 80%;
        object-fit: contain;
        margin: 0 auto 0.5rem;
        display: block;
        filter: grayscale(1) opacity(0.85);
        transition: filter .25s var(--ease);
    }

    .cert-badge:hover img {
        filter: grayscale(0) opacity(1);
    }

.cert-name {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--pearl);
    margin-bottom: 0.2rem;
}

.cert-full {
    font-size: 0.68rem;
    color: var(--smoke);
    line-height: 1.35;
}

@media (max-width: 900px) {
    .cert-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── CONTACT ── */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
}

.contact-detail {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.contact-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: rgba(232,212,165,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gold-light);
    font-size: 1rem;
}

    .contact-icon .icon-gem {
        width: 26px;
        height: 26px;
    }

    .contact-icon svg {
        width: 20px;
        height: 20px;
    }

.contact-detail h4 {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--silver);
    margin-bottom: 0.2rem;
    font-weight: 600;
}

.contact-detail p {
    font-size: 0.98rem;
    color: var(--pearl);
    font-weight: 500;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.form-input {
    width: 100%;
    padding: 0.85rem 1.1rem;
    background: var(--charcoal);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    color: var(--pearl);
    outline: none;
    transition: border-color .2s;
}

    .form-input:focus {
        border-color: var(--gold-light);
    }

    .form-input::placeholder {
        color: var(--silver);
    }

textarea.form-input {
    min-height: 100px;
    resize: vertical;
}

.upload-status {
    display: none;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    border: 1px solid;
}

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* ── FOOTER ── */
footer {
    background: #050506;
    color: #98989d;
    padding: 4.5rem 3rem 2rem;
    position: relative;
    overflow: hidden;
}

.footer-watermark {
    position: absolute;
    z-index: 0;
    bottom: -12%;
    left: -4%;
    width: 420px;
    height: 420px;
    transform: rotate(6deg);
    background-image: url('/images/brand-icon.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.04;
    pointer-events: none;
}

.footer-grid {
    position: relative;
    z-index: 1;
    max-width: var(--content-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-brand p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #8e8e93;
    margin-top: 1rem;
    max-width: 320px;
}

.footer-social {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 1.25rem;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    transition: opacity .15s, transform .15s;
}

    .footer-social-link svg {
        width: 18px;
        height: 18px;
    }

    .footer-social-link:hover {
        opacity: .85;
        transform: translateY(-2px);
    }

/* Real brand colors, same ones used on the admin Settings page, so a visitor
   recognizes each platform at a glance instead of three identical gray dots. */
.footer-social-instagram {
    background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
}

.footer-social-whatsapp {
    background: #25d366;
}

.footer-social-telegram {
    background: #229ed9;
}

/* Shown even when that platform's link isn't configured yet (rather than
   hiding the icon entirely) — dimmed and inert, so it's clear at a glance
   there's nothing to click through to. */
.footer-social-unset {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

footer .nav-logo-text span:first-child {
    color: #f5f5f7;
}

.footer-col h4 {
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f5f5f7;
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

    .footer-links a {
        font-size: 0.86rem;
        color: #8e8e93;
        text-decoration: none;
        transition: color .2s;
    }

        .footer-links a:hover {
            color: #f5f5f7;
        }

.footer-bottom {
    position: relative;
    z-index: 1;
    max-width: var(--content-max);
    margin: 0 auto;
    padding-top: 1.75rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: #6e6e73;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ── FLOATING WHATSAPP ── */
.float-whatsapp {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(37,211,102,.4);
    z-index: 900;
    transition: transform .2s var(--ease);
}

    .float-whatsapp:hover {
        transform: scale(1.08);
    }

    .float-whatsapp svg {
        width: 26px;
        height: 26px;
        fill: #05170c;
    }

@media (max-width: 640px) {
    .float-whatsapp {
        width: 46px;
        height: 46px;
        bottom: 1.1rem;
        right: 1.1rem;
    }

        .float-whatsapp svg {
            width: 21px;
            height: 21px;
        }
}

/* ══════════════ MODAL ══════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5,5,6,.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease);
    padding: 2rem;
    overscroll-behavior: contain;
}

    .modal-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

.diamond-modal {
    background: #ffffff;
    color: #1d1d1f;
    border-radius: 24px;
    width: 100%;
    max-width: 980px;
    max-height: 88vh;
    overflow: hidden;
    position: relative;
    transform: scale(.96);
    transition: transform .25s var(--ease);
}

.modal-overlay.open .diamond-modal {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f5f5f7;
    color: #1d1d1f;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-close:hover {
        background: #e8e8ed;
    }

.modal-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: 88vh;
}

.modal-close-sticky {
    display: none; /* mobile-only redundant close button — see @media (max-width: 800px) */
}

.modal-gallery-column {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.modal-gallery {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
}

.modal-preview {
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.modal-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: #86868b;
}

    .modal-no-image i {
        font-size: 2rem;
    }

/* always scrolls left-right instead of wrapping once there are more
   thumbnails than fit — nowrap is the default for flex, set explicitly
   here so it can never be accidentally overridden */
.modal-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.modal-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    background: #f5f5f7;
}

    .modal-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .modal-thumb.active {
        border-color: var(--gold-dim, #b8862f);
    }

.modal-video-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1d1d1f;
    background-size: cover;
    background-position: center;
    color: #fff;
    font-size: 0; /* collapse the "▶" text node once a captured frame + overlay badge take over */
}

    /* the ▶ play glyph — shown centered as a fallback while a frame is still
       being captured, then demoted to a small corner badge once one loads */
    .modal-video-thumb::after {
        content: '▶';
        font-size: 0.9rem;
        line-height: 1;
    }

    .modal-video-thumb.has-frame::after {
        position: absolute;
        right: 3px;
        bottom: 3px;
        font-size: 0.5rem;
        background: rgba(0,0,0,.55);
        border-radius: 50%;
        width: 14px;
        height: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.modal-360-thumb {
    background: #1d1d1f;
}

    .modal-360-thumb::after {
        content: none; /* uses its own svg icon instead of the ▶ glyph */
    }

    .modal-360-thumb svg {
        width: 20px;
        height: 20px;
        opacity: .85;
    }

/* right column: header + specs scroll independently, price/CTA footer
   always stays visible at the bottom (not inside the scrolling area) */
.modal-body {
    padding: 2.5rem 2.5rem 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 88vh;
}

.modal-stock {
    font-size: 0.85rem;
    color: #86868b;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.modal-title {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.modal-details {
    overflow-y: auto;
    flex: 1;
    padding-right: 0.5rem;
    min-height: 0;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
}

    .spec-table tr {
        border-bottom: 1px solid #f0f0f2;
    }

    .spec-table td {
        padding: 0.65rem 0;
        font-size: 0.88rem;
    }

        .spec-table td:first-child {
            color: #86868b;
        }

        .spec-table td:last-child {
            text-align: right;
            font-weight: 600;
        }

/* pinned footer — price + WhatsApp CTA, always visible regardless of
   how far the details above have been scrolled */
.modal-footer {
    flex-shrink: 0;
    padding: 1.25rem 0 2.5rem 0;
    background: #fff;
}

.modal-media-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f0f0f2;
}

.modal-price-wrap {
    min-width: 0;
}

.modal-media-actions .btn-primary {
    flex-shrink: 0;
    white-space: nowrap;
}

.spec-value-with-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.igi-report-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /* hardcoded, not var(--obsidian) — this modal sits outside any <section>, where
       --obsidian resolves to white (the light-theme default), which made this render
       as an invisible white icon on a white background. Exactly the same class of
       bug documented elsewhere in this file for anything outside a <section>. */
    background: #1d1d1f;
    color: #fff;
    font-size: 11px;
    flex-shrink: 0;
    transition: opacity .15s;
}

    .igi-report-link:hover {
        opacity: .75;
    }

.modal-price-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #86868b;
}

.modal-price {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.viewer360 {
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
    position: relative;
}

    .viewer360 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        user-select: none;
        -webkit-user-drag: none;
    }

.viewer360-hint {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.35rem 0.75rem;
    border-radius: 980px;
    pointer-events: none;
    white-space: nowrap;
}

@media (max-width: 800px) {
    /* Mobile scroll fix: previously .modal-layout was told to scroll
       (overflow-y: auto) but also had its height cap removed (max-height:
       none) — with no height constraint of its own, it just grew to fit all
       its content, which then got silently clipped by .diamond-modal's
       overflow:hidden with no way to reach the cut-off part. Making
       .diamond-modal a flex column and .modal-layout the flexed, height-
       constrained scroll child (flex:1; min-height:0) is the reliable way to
       get an actual scrollable area here — this also keeps the × close
       button fixed in place (it's positioned against .diamond-modal, which
       no longer scrolls) and lets the price/Inquire footer stick to the
       bottom of the scrolling area as content scrolls past it. */
    .diamond-modal {
        display: flex;
        flex-direction: column;
    }

    .modal-layout {
        grid-template-columns: 1fr;
        max-height: none;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* iOS Safari promotes a `-webkit-overflow-scrolling: touch` container
       (.modal-layout, above) onto its own compositing layer — and that layer
       can render ON TOP of sibling elements like .modal-close once the user
       scrolls, regardless of DOM order or z-index, because .diamond-modal
       never explicitly created its own stacking context for its children to
       compete within. That's what made the × button work the first time
       (nothing had scrolled/promoted yet) and then vanish, unreachable, after
       scrolling — the only way out was reloading the page. Forcing
       .modal-close onto its own compositing layer too (translateZ(0)) puts
       it back in the same league as the scroll layer so it reliably stays on
       top, and a much higher z-index makes the intended stacking order
       explicit rather than incidental. */
    .modal-close {
        z-index: 50;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
    }

    .modal-close-sticky {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        position: sticky;
        top: 0;
        z-index: 10;
        margin: 0 0 0.5rem auto;
        padding: 0.4rem 0.9rem 0.4rem 0.7rem;
        border: none;
        border-radius: 980px;
        background: rgba(29,29,31,0.92);
        color: #fff;
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
    }

        .modal-close-sticky span {
            font-size: 1.1rem;
            line-height: 1;
        }

    .modal-gallery-column {
        overflow-y: visible;
        padding: 1.25rem;
    }

    .modal-body {
        padding: 0 1.25rem 0;
        overflow: visible;
        max-height: none;
    }

    .modal-details {
        overflow-y: visible;
    }

    .modal-footer {
        padding: 1rem 1.25rem 1.5rem;
        position: sticky;
        bottom: 0;
    }

    /* Price + Inquire button below this width: letting them wrap on their own
       (the desktop flex-wrap default) left the button as a small pill floating
       on its own line rather than a clear, deliberately-sized tap target —
       stacking and going full-width is the more usable, consistent pattern,
       matching the same treatment applied to the card's Inquire button. */
    .modal-media-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .modal-media-actions .btn-primary {
            width: 100%;
            text-align: center;
            justify-content: center;
        }
}

@media (max-width: 480px) {
    .modal-overlay {
        padding: 0.6rem;
    }

    .diamond-modal {
        border-radius: 18px;
        max-height: 94vh;
    }

    .modal-gallery-column {
        padding: 1rem;
    }

    .modal-body {
        padding: 0 1rem 0;
    }

    .modal-footer {
        padding: 0.85rem 1rem 1.25rem;
    }

    .modal-close {
        top: 0.85rem;
        right: 0.85rem;
        width: 32px;
        height: 32px;
        font-size: 1.15rem;
    }
}

/* ── MOBILE MENU (nav, other layout) ── */
.mobile-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--pearl);
    user-select: none;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--glass-border);
    padding: 1.5rem 2rem;
    flex-direction: column;
    gap: 1.25rem;
    z-index: 999;
}

    .mobile-menu.active {
        display: flex;
    }

    .mobile-menu a {
        text-decoration: none;
        color: var(--pearl);
        font-size: 0.95rem;
        font-weight: 500;
    }

    .mobile-menu .btn-gold, .mobile-menu .btn-ghost {
        width: 100%;
    }

@media (max-width: 900px) {
    .mobile-toggle {
        display: block;
    }
}

.glow-gold {
    text-shadow: 0 0 30px rgba(184,134,60,.3);
}

/* ── ADMIN (separate dashboard page, shares this stylesheet) ── */
#admin {
    display: none;
}

    #admin.authenticated {
        display: block;
        background: var(--obsidian);
        border-top: 1px solid var(--glass-border);
    }

.admin-topbar {
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-card {
    max-width: 800px;
    margin: 4rem auto;
    background: var(--graphite);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.admin-header {
    background: linear-gradient(135deg, var(--gold-dim), var(--gold-light));
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .admin-header h3 {
        color: #14100a;
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0.05em;
    }

.admin-body {
    padding: 2rem;
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-input {
    background: var(--charcoal);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--pearl);
    font-size: 0.88rem;
    padding: 0.75rem 1rem;
    outline: none;
    width: 100%;
    transition: border-color .2s;
}

    .admin-input:focus {
        border-color: var(--gold-light);
    }

    .admin-input::placeholder {
        color: var(--silver);
    }

.upload-zone {
    border: 2px dashed var(--glass-border);
    border-radius: var(--radius);
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    transition: all .25s var(--ease);
    margin-bottom: 1.5rem;
    position: relative;
}

    .upload-zone:hover {
        border-color: var(--gold-light);
        background: rgba(184,134,60,.04);
    }

    .upload-zone input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

.upload-icon {
    font-size: 2.25rem;
    color: var(--silver);
    margin-bottom: 0.75rem;
}

.upload-text {
    font-size: 0.85rem;
    color: var(--smoke);
}

    .upload-text strong {
        color: var(--gold-light);
    }

.admin-actions {
    display: flex;
    gap: 1rem;
}

.contact-info {
}

.upload-status {
    display: none;
    padding: 0.85rem 1.1rem;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: var(--radius-sm);
    color: #0f172a;
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

.search-filter-bar {
    display: flex;
    gap: 1rem;
    margin: 1.75rem 0;
    flex-wrap: wrap;
}

    .search-filter-bar input {
        padding: 0.85rem 1.1rem;
        border-radius: var(--radius-sm);
        border: 1px solid var(--glass-border);
        background: var(--graphite);
        color: var(--pearl);
        min-width: 240px;
        font-size: 0.9rem;
    }

.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 1rem;
    color: var(--smoke);
    font-size: 0.95rem;
}

/* legacy fallbacks (not used by current render path, kept for safety) */
.diamond-badge, .diamond-status {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.22rem 0.55rem;
    border-radius: 980px;
    background: var(--charcoal);
    color: var(--pearl);
}

/* ── RESPONSIVE: NAV / HERO / TYPE SCALE ── */
@media (max-width: 900px) {
    nav {
        padding: 0 1.25rem;
    }

    .hero-stats {
        padding-top: 1.75rem;
    }
}

@media (max-width: 560px) {
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

        .hero-actions a {
            width: 100%;
        }

    .cert-grid {
        gap: 0.75rem;
    }
}