/* ==========================================================
   FOB Distribution — B2B Wholesale Platform v3.1
   Design: Premium Corporate Distributor
   Colors: Forest Green + Warm Gold
   Fonts: Plus Jakarta Sans + Inter
   Section Transitions: Gradient blends between sections
   ========================================================== */

@layer reset, tokens, base, layout, typography, components, forms, header, footer, pages, utilities, responsive;

/* --- RESET --- */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    body { min-height: 100svh; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; }
    input, button, textarea, select { font: inherit; color: inherit; }
    button { cursor: pointer; border: none; background: none; }
    ul, ol { list-style: none; }
    a { color: inherit; text-decoration: none; }
    table { border-collapse: collapse; }
    h1,h2,h3,h4,h5,h6 { overflow-wrap: break-word; }
    :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
}

/* --- TOKENS --- */
@layer tokens {
    :root {
        --c-primary: #0C3B2E;
        --c-primary-dark: #072419;
        --c-primary-light: #1A5C47;
        --c-accent: #C9A84C;
        --c-accent-dark: #A88B3D;
        --c-accent-light: #D4B86A;
        --c-dark: #0A1A14;
        --c-text: #1A2332;
        --c-text-muted: #5A6577;
        --c-border: #E0E4E8;
        --c-bg: #F8F9FA;
        --c-bg-alt: #F1F3F5;
        --c-white: #FFFFFF;

        --ff-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
        --ff-body: 'Inter', system-ui, sans-serif;

        --fs-xs: 0.75rem;
        --fs-sm: 0.875rem;
        --fs-base: 1rem;
        --fs-lg: 1.125rem;
        --fs-xl: 1.25rem;
        --fs-2xl: 1.5rem;
        --fs-3xl: 2rem;
        --fs-4xl: 2.5rem;
        --fs-5xl: 3.25rem;

        --radius: 8px;
        --radius-sm: 4px;
        --radius-lg: 12px;
        --radius-xl: 16px;

        --shadow-sm: 0 1px 3px rgba(10,26,20,0.06);
        --shadow-md: 0 4px 12px rgba(10,26,20,0.08);
        --shadow-lg: 0 8px 30px rgba(10,26,20,0.1);

        --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --container: 1200px;
    }
}

/* --- BASE --- */
@layer base {
    body {
        font-family: var(--ff-body);
        font-size: var(--fs-base);
        line-height: 1.65;
        color: var(--c-text);
        background: var(--c-white);
    }
    ::selection { background: var(--c-accent); color: var(--c-dark); }
}

/* --- LAYOUT --- */
@layer layout {
    .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
    .section { padding: 6rem 0; position: relative; }
    .section--compact { padding: 4rem 0; position: relative; }
}

/* --- SECTION TRANSITIONS --- Smooth gradient blends between sections */
@layer layout {
    /* Light-to-dark blend: white section flowing into dark section */
    .home-about::before {
        content: ''; position: absolute; top: -3rem; left: 0; right: 0; height: 6rem;
        background: linear-gradient(to bottom, var(--c-white) 0%, var(--c-white) 50%, transparent 100%);
        z-index: 1; pointer-events: none;
    }

    /* Dark-to-light: categories (alt bg) flowing into white process */
    .home-categories::after {
        content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4rem;
        background: linear-gradient(to bottom, transparent, var(--c-bg-alt));
        pointer-events: none;
    }
    .home-process::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4rem;
        background: linear-gradient(to bottom, var(--c-bg-alt), var(--c-white));
        z-index: 1; pointer-events: none;
    }

    /* Into dark metrics section — diagonal clip */
    .home-metrics-section { clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%); padding: 6rem 0; }

    /* Why section soft top */
    .home-why::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3rem;
        background: linear-gradient(to bottom, var(--c-bg), var(--c-white));
        pointer-events: none;
    }

    /* Compliance alt-bg blend into testimonials */
    .home-compliance::after {
        content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4rem;
        background: linear-gradient(to bottom, transparent, var(--c-bg-alt));
        pointer-events: none;
    }
    .home-testimonials::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4rem;
        background: linear-gradient(to bottom, var(--c-bg-alt), var(--c-bg));
        pointer-events: none;
    }

    /* Scroll reveal animation base */
    [data-animate] {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    [data-animate].is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- TYPOGRAPHY --- */
@layer typography {
    .t-heading-1 { font-family: var(--ff-heading); font-size: var(--fs-5xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
    .t-heading-2 { font-family: var(--ff-heading); font-size: var(--fs-4xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
    .t-body-lg { font-size: var(--fs-lg); line-height: 1.7; }
    .t-label { display: inline-block; font-family: var(--ff-heading); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent-dark); }
    .t-muted { color: var(--c-text-muted); }
    h1,h2,h3,h4,h5,h6 { font-family: var(--ff-heading); line-height: 1.2; }
}

/* --- COMPONENTS --- */
@layer components {

    /* Buttons */
    .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
        padding: 0.75rem 1.75rem;
        font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 600; line-height: 1;
        border-radius: var(--radius); border: 2px solid transparent;
        transition: all var(--transition); white-space: nowrap; text-align: center;
    }
    .btn--primary { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
    .btn--primary:hover { background: var(--c-primary-light); border-color: var(--c-primary-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .btn--accent { background: var(--c-accent); color: var(--c-dark); border-color: var(--c-accent); }
    .btn--accent:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,168,76,0.3); }
    .btn--outline { background: transparent; color: var(--c-primary); border-color: var(--c-border); }
    .btn--outline:hover { border-color: var(--c-primary); background: var(--c-bg); transform: translateY(-1px); }
    .btn--outline-light { background: transparent; color: var(--c-white); border-color: rgba(255,255,255,0.3); }
    .btn--outline-light:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); transform: translateY(-1px); }
    .btn--lg { padding: 1rem 2.25rem; font-size: var(--fs-base); }
    .btn--sm { padding: 0.5rem 1.25rem; font-size: var(--fs-xs); }
    .btn--full { width: 100%; }

    /* Section Header */
    .section-header { text-align: center; max-width: 640px; margin: 0 auto 4rem; }
    .section-header .t-label { margin-bottom: 0.75rem; }

    /* Trust Bar */
    .trust-bar { background: var(--c-primary); padding: 1.25rem 0; border-top: 1px solid rgba(201,168,76,0.2); border-bottom: 2px solid var(--c-accent); }
    .trust-bar__inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; }
    .trust-bar__item { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.9); font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
    .trust-bar__item svg { color: var(--c-accent); flex-shrink: 0; }

    /* Logo Marquee */
    .logos-section { border-bottom: 1px solid var(--c-border); overflow: hidden; }
    .logos-section__label { text-align: center; font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: 1.5rem; font-weight: 500; }
    .logos-track { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
    .logos-track__slide { display: flex; gap: 3rem; animation: marquee 40s linear infinite; width: max-content; }
    .logos-track__logo { font-family: var(--ff-heading); font-size: var(--fs-lg); font-weight: 700; color: var(--c-text-muted); opacity: 0.35; letter-spacing: 0.02em; white-space: nowrap; text-transform: uppercase; }
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

    /* About Split */
    .home-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
    .home-about__image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
    .home-about__image img { width: 100%; height: 100%; object-fit: cover; min-height: 400px; }
    .home-about__content .t-label { margin-bottom: 0.75rem; }
    .home-about__content .t-heading-2 { margin-bottom: 1.5rem; }
    .home-about__content p { color: var(--c-text-muted); margin-bottom: 1rem; }
    .home-about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; padding: 1.5rem; background: var(--c-bg); border-radius: var(--radius); border-left: 4px solid var(--c-accent); }
    .home-about__stat strong { display: block; font-family: var(--ff-heading); font-size: var(--fs-xl); font-weight: 800; color: var(--c-primary); }
    .home-about__stat span { font-size: var(--fs-xs); color: var(--c-text-muted); }
    .home-about__content .btn { margin-top: 1rem; }

    /* Category Grid */
    .home-categories { background: var(--c-bg-alt); }
    .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .cat-grid__item { background: var(--c-white); padding: 2rem; border-radius: var(--radius); border-left: 4px solid var(--c-accent); box-shadow: var(--shadow-sm); transition: all var(--transition); cursor: pointer; }
    .cat-grid__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-left-color: var(--c-primary); }
    .cat-grid__index { display: block; font-family: var(--ff-heading); font-size: var(--fs-4xl); font-weight: 800; color: var(--c-bg-alt); line-height: 1; margin-bottom: 0.5rem; }
    .cat-grid__name { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 0.5rem; }
    .cat-grid__desc { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.6; }

    /* Process */
    .home-process__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
    .home-process__left .t-label { margin-bottom: 0.75rem; }
    .home-process__left .t-heading-2 { margin-bottom: 1rem; }
    .home-process__left .t-body-lg { max-width: 440px; }
    .home-process__img { margin-top: 2rem; border-radius: var(--radius); box-shadow: var(--shadow-md); }
    .process-steps { display: flex; flex-direction: column; gap: 2rem; padding-top: 1.5rem; }
    .process-step { display: flex; gap: 1.5rem; align-items: flex-start; transition: transform var(--transition); }
    .process-step:hover { transform: translateX(6px); }
    .process-step__num { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--c-accent); color: var(--c-dark); font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 800; border-radius: 50%; }
    .process-step__title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 0.5rem; }
    .process-step__desc { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.65; }

    /* Metrics */
    .home-metrics-section { background: var(--c-primary-dark); }
    .home-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
    .home-metrics__item { padding: 1.5rem; }
    .home-metrics__value { display: block; font-family: var(--ff-heading); font-size: var(--fs-5xl); font-weight: 800; color: var(--c-white); line-height: 1; margin-bottom: 0.5rem; }
    .home-metrics__label { font-family: var(--ff-heading); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); }

    /* Why Grid */
    .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .why-grid__item { padding: 2rem; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg); transition: all var(--transition); cursor: pointer; }
    .why-grid__item:hover { border-color: var(--c-accent); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
    .why-grid__item:hover .why-grid__icon { background: var(--c-accent); }
    .why-grid__item:hover .why-grid__icon svg { color: var(--c-dark); }
    .why-grid__item h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 0.75rem; }
    .why-grid__item p { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.65; }
    .why-grid__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--c-primary); border-radius: var(--radius); margin-bottom: 1.25rem; }
    .why-grid__icon svg { color: var(--c-accent); }

    /* Compliance */
    .home-compliance { background: var(--c-bg-alt); }
    .compliance-grid { display: flex; flex-direction: column; gap: 1.5rem; max-width: 800px; margin: 0 auto; }
    .compliance-item { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem; background: var(--c-white); border-radius: var(--radius); border-left: 4px solid var(--c-primary); box-shadow: var(--shadow-sm); transition: all var(--transition); }
    .compliance-item:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }
    .compliance-item h3 { font-size: var(--fs-base); font-weight: 700; margin-bottom: 0.25rem; }
    .compliance-item p { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.6; }
    .compliance-item__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--c-primary); border-radius: 50%; }
    .compliance-item__icon svg { color: var(--c-accent); width: 18px; height: 18px; }

    /* Testimonials */
    .home-testimonials { background: var(--c-bg); }
    .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    .testimonial { background: var(--c-white); padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); transition: all var(--transition); position: relative; }
    .testimonial:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--c-accent); }
    .testimonial::before { content: '\201C'; position: absolute; top: 1rem; right: 1.5rem; font-size: 3rem; color: var(--c-bg-alt); font-family: Georgia, serif; line-height: 1; pointer-events: none; }
    .testimonial__stars { color: var(--c-accent); font-size: var(--fs-lg); letter-spacing: 2px; margin-bottom: 1rem; }
    .testimonial__text { font-size: var(--fs-sm); line-height: 1.7; margin-bottom: 1.5rem; font-style: italic; }
    .testimonial__author strong { display: block; font-family: var(--ff-heading); font-weight: 600; font-size: var(--fs-sm); }
    .testimonial__author span { font-size: var(--fs-xs); color: var(--c-text-muted); }

    /* CTA */
    .home-cta { background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 100%); padding: 5rem 0; position: relative; overflow: hidden; }
    .home-cta::before { content: ''; position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.08); pointer-events: none; }
    .home-cta::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 350px; height: 350px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.06); pointer-events: none; }
    .home-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
    .home-cta__inner .t-heading-1 { color: var(--c-white); max-width: 600px; }
    .home-cta__inner .t-body-lg { color: rgba(255,255,255,0.7); margin-top: 1rem; max-width: 540px; }
    .home-cta__actions { display: flex; flex-direction: column; gap: 1rem; flex-shrink: 0; }
}

/* --- FORMS --- */
@layer forms {
    .form__group { margin-bottom: 1.25rem; }
    .form__label { display: block; font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); margin-bottom: 0.5rem; }
    .form__required { color: #DC2626; }
    .form__input, .form__select, .form__textarea {
        display: block; width: 100%; padding: 0.875rem 1rem;
        font-size: var(--fs-base); color: var(--c-text);
        background: var(--c-bg); border: 1.5px solid var(--c-border); border-radius: var(--radius);
        transition: border-color var(--transition), box-shadow var(--transition);
    }
    .form__input::placeholder, .form__textarea::placeholder { color: var(--c-text-muted); opacity: 0.5; }
    .form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-color: var(--c-primary); background: var(--c-white); box-shadow: 0 0 0 3px rgba(12,59,46,0.08); }
    .form__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6577' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
    .form__textarea { resize: vertical; min-height: 120px; }
    .form__hint { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 0.25rem; }
    .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .form__divider { border: none; border-top: 1px solid var(--c-border); margin: 1.5rem 0; }

    .alert { padding: 1rem; border-radius: var(--radius); font-size: var(--fs-sm); margin-bottom: 1.5rem; line-height: 1.6; }
    .alert--success { background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; }
    .alert--error { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
    .alert--error a { color: #991B1B; text-decoration: underline; font-weight: 600; }

    .login-form { width: 100%; max-width: 420px; }
    .login-form__header { margin-bottom: 2rem; }
    .login-form__header h1 { font-size: var(--fs-3xl); font-weight: 800; margin-bottom: 0.5rem; }
    .login-form__header p { color: var(--c-text-muted); }
    .login-form__field { margin-bottom: 1.25rem; }
    .login-form__label { display: block; font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 600; margin-bottom: 0.5rem; }
    .login-form__input { display: block; width: 100%; padding: 1rem 1.125rem; font-size: var(--fs-base); background: var(--c-bg); border: 1.5px solid var(--c-border); border-radius: var(--radius); transition: all var(--transition); }
    .login-form__input::placeholder { color: var(--c-text-muted); opacity: 0.5; }
    .login-form__input:focus { outline: none; border-color: var(--c-primary); background: var(--c-white); box-shadow: 0 0 0 3px rgba(12,59,46,0.08); }
    .login-form__pw-wrap { position: relative; }
    .login-form__pw-wrap .login-form__input { padding-right: 4rem; }
    .login-form__pw-toggle { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: var(--fs-sm); font-weight: 500; color: var(--c-accent-dark); cursor: pointer; }
    .login-form__pw-toggle:hover { color: var(--c-primary); }
    .login-form__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
    .login-form__remember { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--c-text-muted); cursor: pointer; }
    .login-form__remember input { accent-color: var(--c-primary); }
    .login-form__forgot { font-size: var(--fs-sm); color: var(--c-accent-dark); font-weight: 500; }
    .login-form__forgot:hover { color: var(--c-primary); text-decoration: underline; }
    .login-form__submit { width: 100%; }
    .login-form__error { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; background: #FEF2F2; border: 1px solid #FECACA; border-radius: var(--radius); color: #991B1B; font-size: var(--fs-sm); margin-bottom: 1.5rem; }
    .login-form__error svg { flex-shrink: 0; color: #DC2626; }
    .login-form__divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
    .login-form__divider span { font-size: var(--fs-sm); color: var(--c-text-muted); }
    .login-form__divider::before, .login-form__divider::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }
    .login-form__footer .btn { width: 100%; }
}

/* --- HEADER --- */
@layer header {
    .utility-bar { background: var(--c-primary-dark); padding: 0.5rem 0; font-size: var(--fs-xs); }
    .utility-bar__inner { display: flex; justify-content: space-between; align-items: center; }
    .utility-bar__left { display: flex; gap: 1.5rem; }
    .utility-bar__link { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.7); transition: color var(--transition); }
    .utility-bar__link:hover { color: var(--c-accent); }
    .utility-bar__link svg { opacity: 0.7; }
    .utility-bar__right { display: flex; align-items: center; gap: 1rem; }
    .utility-bar__user { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.8); }
    .utility-bar__auth { display: flex; align-items: center; gap: 0.75rem; }
    .utility-bar__auth a { color: var(--c-accent); font-weight: 500; transition: color var(--transition); }
    .utility-bar__auth a:hover { color: var(--c-accent-light); }
    .utility-bar__sep { color: rgba(255,255,255,0.3); }

    .site-header { position: sticky; top: 0; z-index: 100; background: var(--c-white); transition: box-shadow var(--transition); }
    .site-header.is-scrolled { box-shadow: var(--shadow-md); }
    .header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
    .header__logo { display: flex; align-items: center; flex-shrink: 0; }
    .header__logo-img { height: 48px; width: auto; }
    .header__logo-text { font-family: var(--ff-heading); font-size: var(--fs-2xl); font-weight: 800; color: var(--c-primary); letter-spacing: -0.02em; }
    .header__logo-sub { font-weight: 500; color: var(--c-text-muted); margin-left: 0.35em; font-size: 0.65em; }
    .header__nav { display: flex; align-items: center; gap: 2rem; }
    .header__nav-list { display: flex; gap: 2rem; }
    .header__nav-list li a { font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); position: relative; padding: 0.5rem 0; transition: color var(--transition); }
    .header__nav-list li a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--c-accent); transition: all var(--transition); transform: translateX(-50%); }
    .header__nav-list li a:hover { color: var(--c-primary); }
    .header__nav-list li a:hover::after { width: 100%; }
    .header__cta-group { display: flex; align-items: center; gap: 1rem; }
    .header__cart-link { position: relative; display: flex; align-items: center; color: var(--c-text); transition: color var(--transition); }
    .header__cart-link:hover { color: var(--c-primary); }
    .header__cart-count { position: absolute; top: -6px; right: -8px; background: var(--c-accent); color: var(--c-dark); font-size: 0.65rem; font-weight: 700; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
    .header__toggle { display: none; flex-direction: column; gap: 5px; width: 28px; padding: 4px 0; z-index: 1000; }
    .header__toggle span { display: block; width: 100%; height: 2px; background: var(--c-text); border-radius: 2px; transition: all var(--transition); }
    .header__toggle.is-active span { background: var(--c-white); }
    .header__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .header__toggle.is-active span:nth-child(2) { opacity: 0; }
    .header__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* --- FOOTER --- */
@layer footer {
    .site-footer { background: var(--c-primary-dark); color: rgba(255,255,255,0.7); padding: 4rem 0 0; }
    .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; padding-bottom: 3rem; }
    .footer__logo { font-family: var(--ff-heading); font-size: var(--fs-xl); font-weight: 800; color: var(--c-white); display: inline-block; margin-bottom: 1rem; }
    .footer__logo span { font-weight: 500; color: var(--c-accent); margin-left: 0.2em; font-size: 0.75em; }
    .footer__brand p { font-size: var(--fs-sm); line-height: 1.7; max-width: 320px; }
    .footer__certifications { display: flex; gap: 1rem; margin-top: 1rem; font-size: var(--fs-xs); color: rgba(255,255,255,0.4); }
    .footer__certifications span { padding: 0.25rem 0.75rem; border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-sm); }
    .footer__heading { font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 700; color: var(--c-accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.25rem; }
    .footer__list li { margin-bottom: 0.75rem; }
    .footer__list a { font-size: var(--fs-sm); transition: all var(--transition); }
    .footer__list a:hover { color: var(--c-white); padding-left: 4px; }
    .footer__contact li { display: flex; gap: 0.75rem; margin-bottom: 1rem; font-size: var(--fs-sm); line-height: 1.6; }
    .footer__contact li svg { flex-shrink: 0; margin-top: 2px; color: var(--c-accent); }
    .footer__contact a:hover { color: var(--c-white); }
    .footer__bottom { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,0.1); font-size: var(--fs-xs); color: rgba(255,255,255,0.4); }
    .footer__legal { display: flex; gap: 1.5rem; }
    .footer__legal a:hover { color: rgba(255,255,255,0.7); }
}

/* --- PAGES --- */
@layer pages {
    /* Hero */
    .hero-home { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
    .hero-home__bg { position: absolute; inset: 0; overflow: hidden; background-size: cover; background-position: center; }
    .hero-home__video { width: 100%; height: 100%; object-fit: cover; }
    .hero-home__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7,36,25,0.92) 0%, rgba(7,36,25,0.75) 40%, rgba(7,36,25,0.45) 100%); }
    .hero-home__grid { position: relative; z-index: 2; padding: 4rem 0; }
    .hero-home__content { max-width: 680px; }
    .hero-home__badge { display: inline-block; font-family: var(--ff-heading); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); border-left: 3px solid var(--c-accent); padding-left: 0.75rem; margin-bottom: 1.5rem; }
    .hero-home__title { font-family: var(--ff-heading); font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 800; line-height: 1.08; color: var(--c-white); letter-spacing: -0.02em; margin-bottom: 1.5rem; }
    .hero-home__lead { font-size: var(--fs-lg); color: rgba(255,255,255,0.75); line-height: 1.7; margin-bottom: 2rem; max-width: 560px; }
    .hero-home__actions { display: flex; gap: 1rem; margin-bottom: 3rem; }
    .hero-home__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 680px; padding: 1.5rem; background: rgba(255,255,255,0.08); backdrop-filter: blur(12px); border-radius: var(--radius-lg); border: 1px solid rgba(201,168,76,0.25); box-shadow: 0 4px 24px rgba(0,0,0,0.15); }
    .hero-home__stat-block { text-align: center; }
    .hero-home__stat-num { display: block; font-family: var(--ff-heading); font-size: var(--fs-3xl); font-weight: 800; color: var(--c-white); line-height: 1.1; }
    .hero-home__stat-label { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,0.55); margin-top: 0.25rem; white-space: nowrap; }

    /* Login Page */
    .login-page { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100svh - 110px); }
    .login-page__brand { background: var(--c-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; position: relative; overflow: hidden; }
    .login-page__brand::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(201,168,76,0.08) 0%, transparent 50%); pointer-events: none; }
    .login-page__brand-decoration { position: absolute; border-radius: 50%; border: 1px solid rgba(201,168,76,0.08); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; width: 400px; height: 400px; }
    .login-page__brand-decoration--sm { width: 250px; height: 250px; border-color: rgba(201,168,76,0.12); }
    .login-page__brand-decoration--lg { width: 550px; height: 550px; border-color: rgba(201,168,76,0.04); }
    .login-page__brand-logo { margin-bottom: 1.5rem; position: relative; z-index: 1; }
    .login-page__brand-logo-img { max-width: 240px; height: auto; filter: brightness(0) invert(1); }
    .login-page__brand-logo-mark { font-family: var(--ff-heading); font-size: 2.5rem; font-weight: 800; color: var(--c-white); }
    .login-page__brand-logo-text { font-family: var(--ff-heading); font-size: 2.5rem; font-weight: 400; color: rgba(255,255,255,0.8); }
    .login-page__brand-tagline { font-family: var(--ff-heading); font-size: var(--fs-2xl); font-weight: 600; color: var(--c-white); text-align: center; margin-bottom: 1rem; position: relative; z-index: 1; }
    .login-page__brand-desc { font-size: var(--fs-base); color: rgba(255,255,255,0.6); text-align: center; max-width: 340px; line-height: 1.7; position: relative; z-index: 1; }
    .login-page__form-wrap { display: flex; align-items: center; justify-content: center; padding: 3rem; background: var(--c-white); }

    /* Page Hero */
    .page-hero { background: var(--c-primary); padding: 6rem 0 4rem; text-align: center; }
    .page-hero__label { display: inline-block; font-family: var(--ff-heading); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 1rem; }
    .page-hero__title { font-family: var(--ff-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--c-white); line-height: 1.1; margin-bottom: 1rem; }
    .page-hero__subtitle { font-size: var(--fs-lg); color: rgba(255,255,255,0.7); max-width: 500px; margin: 0 auto; }

    /* Apply Page */
    .apply-section { padding: 6rem 0; }
    .apply__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start; }
    .apply__kicker { display: inline-block; font-family: var(--ff-heading); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent-dark); margin-bottom: 1rem; }
    .apply__headline { font-family: var(--ff-heading); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.25; margin-bottom: 1.25rem; }
    .apply__body { font-size: var(--fs-base); color: var(--c-text-muted); line-height: 1.7; margin-bottom: 1rem; }
    .apply__terms { margin-top: 2rem; padding: 1.5rem; background: var(--c-bg); border-radius: var(--radius); border-left: 4px solid var(--c-primary); }
    .apply__terms-title { font-family: var(--ff-heading); font-size: var(--fs-base); font-weight: 700; margin-bottom: 1rem; }
    .apply__terms-list li { position: relative; padding-left: 1.5rem; font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.7; margin-bottom: 0.5rem; }
    .apply__terms-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); }
    .apply__form-wrap { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-md); }
    .apply__form-title { font-family: var(--ff-heading); font-size: var(--fs-2xl); font-weight: 700; margin-bottom: 0.5rem; }
    .apply__form-sub { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: 1.5rem; }
    .apply__section-label { font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-primary); margin-bottom: 1.25rem; }

    /* Contact Page */
    .contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }
    .contact__form-wrap h2 { font-family: var(--ff-heading); font-size: var(--fs-2xl); font-weight: 700; margin-bottom: 0.5rem; }
    .contact__form-wrap > p { color: var(--c-text-muted); margin-bottom: 2rem; }
    .contact__info { display: flex; flex-direction: column; gap: 1.5rem; }
    .contact__info-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 2rem; }
    .contact__info-card h3 { font-family: var(--ff-heading); font-size: var(--fs-xl); font-weight: 700; margin-bottom: 1.5rem; }
    .contact__info-card--dark { background: var(--c-primary-dark); border-color: transparent; }
    .contact__info-card--dark h3 { color: var(--c-white); }
    .contact__info-card--dark p { color: rgba(255,255,255,0.7); margin-bottom: 1.25rem; line-height: 1.65; }
    .contact__info-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
    .contact__info-item:last-child { margin-bottom: 0; }
    .contact__info-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--c-primary); color: var(--c-accent); border-radius: var(--radius); }
    .contact__info-item h4 { font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 700; margin-bottom: 0.25rem; }
    .contact__info-item p { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.6; }
    .contact__info-item a { color: var(--c-text-muted); transition: color var(--transition); }
    .contact__info-item a:hover { color: var(--c-primary); }
    .map-section iframe { display: block; width: 100%; }

    /* Products Page */
    .section-badge { display: inline-block; font-family: var(--ff-heading); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 1rem; }
    .text-accent { color: var(--c-accent); }
    .page-hero-desc { font-size: var(--fs-lg); color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 auto; line-height: 1.7; }
    .page-hero h1 { font-family: var(--ff-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--c-white); line-height: 1.1; margin-bottom: 1rem; }
    .page-hero-compact { padding: 5rem 0 3rem; }
    .product-category-block { padding: 2.5rem; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg); margin-bottom: 2rem; transition: all var(--transition); }
    .product-category-block:hover { box-shadow: var(--shadow-md); border-color: var(--c-accent); }
    .pcb-header { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem; }
    .pcb-icon { flex-shrink: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--c-primary); border-radius: var(--radius); color: var(--c-accent); }
    .pcb-icon svg { width: 32px; height: 32px; }
    .pcb-header h2 { font-family: var(--ff-heading); font-size: var(--fs-xl); font-weight: 700; margin-bottom: 0.5rem; }
    .pcb-header p { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.6; }
    .pcb-details { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
    .pcb-list h4 { font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-primary); margin-bottom: 0.75rem; }
    .pcb-list ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .pcb-list li { position: relative; padding-left: 1rem; font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.6; }
    .pcb-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }
    .pcb-info { display: flex; flex-direction: column; gap: 1rem; }
    .pcb-info-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--c-bg); border-radius: var(--radius); }
    .pcb-info-label { font-size: var(--fs-sm); color: var(--c-text-muted); }
    .pcb-info-value { font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); }
    .cta-section { background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 100%); padding: 5rem 0; }
    .cta-inner { text-align: center; max-width: 560px; margin: 0 auto; }
    .cta-inner h2 { font-family: var(--ff-heading); font-size: var(--fs-3xl); font-weight: 800; color: var(--c-white); margin-bottom: 1rem; }
    .cta-inner p { font-size: var(--fs-lg); color: rgba(255,255,255,0.7); margin-bottom: 2rem; line-height: 1.7; }
    .btn-white { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2.25rem; font-family: var(--ff-heading); font-size: var(--fs-base); font-weight: 600; background: var(--c-white); color: var(--c-primary); border-radius: var(--radius); border: 2px solid transparent; transition: all var(--transition); }
    .btn-white:hover { background: var(--c-accent); color: var(--c-dark); transform: translateY(-1px); }
    .btn-lg { padding: 1rem 2.25rem; font-size: var(--fs-base); }

    /* About Page */
    .about-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    .about-principle { padding: 2rem; background: var(--c-bg); border-radius: var(--radius-lg); border-top: 3px solid var(--c-accent); }
    .about-principle .t-label { margin-bottom: 1rem; }
    .about-principle p { font-size: var(--fs-base); color: var(--c-text-muted); line-height: 1.7; }
    .grid--editorial { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: start; }
    .grid--editorial .t-heading-2 { margin-top: 1rem; margin-bottom: 1.5rem; }
    .grid--editorial p { color: var(--c-text-muted); line-height: 1.7; margin-bottom: 1rem; }
    .about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .about-fact { padding: 1.5rem; background: var(--c-bg); border-radius: var(--radius); border-left: 4px solid var(--c-accent); }
    .about-fact__value { display: block; font-family: var(--ff-heading); font-size: var(--fs-xl); font-weight: 800; color: var(--c-primary); margin-bottom: 0.25rem; }
    .about-fact__label { font-size: var(--fs-xs); color: var(--c-text-muted); }
    .about-diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .about-diff { padding: 2rem; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg); transition: all var(--transition); }
    .about-diff:hover { border-color: var(--c-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .about-diff h3 { font-family: var(--ff-heading); font-size: var(--fs-lg); font-weight: 700; margin-bottom: 0.75rem; }
    .about-diff p { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.65; }

    /* Brands Page */
    .brands-meta { margin-bottom: 2rem; }
    .t-meta { font-size: var(--fs-sm); color: var(--c-text-muted); }
    .brands-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .brand-card { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); transition: all var(--transition); cursor: pointer; }
    .brand-card:hover { border-color: var(--c-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .brand-card__logo { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--c-bg); border-radius: var(--radius); overflow: hidden; }
    .brand-card__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
    .brand-card__initial { font-family: var(--ff-heading); font-size: var(--fs-xl); font-weight: 800; color: var(--c-primary); }
    .brand-card__name { font-family: var(--ff-heading); font-size: var(--fs-base); font-weight: 700; margin-bottom: 0.25rem; }
    .brand-card__desc { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.5; margin-bottom: 0.25rem; }
    .brand-card__count { font-size: var(--fs-xs); color: var(--c-accent-dark); font-weight: 600; }

    /* Privacy / Terms / Legal Pages */
    .content-narrow { max-width: 740px; margin: 0 auto; }
    .entry-content h2 { font-family: var(--ff-heading); font-size: var(--fs-xl); font-weight: 700; margin: 2.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--c-border); }
    .entry-content h2:first-child { margin-top: 0; }
    .entry-content p { color: var(--c-text-muted); line-height: 1.8; margin-bottom: 1rem; }
    .entry-content ul { margin: 1rem 0; padding-left: 1.5rem; }
    .entry-content li { position: relative; padding-left: 1rem; color: var(--c-text-muted); line-height: 1.8; margin-bottom: 0.5rem; }
    .entry-content li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }
    .entry-content strong { color: var(--c-text); }
    .entry-content a { color: var(--c-accent-dark); font-weight: 500; text-decoration: underline; }
    .entry-content a:hover { color: var(--c-primary); }

    /* Wholesale gate */
    .wholesale-gate { padding: 2rem; background: var(--c-bg-alt); border-radius: var(--radius); border-left: 4px solid var(--c-accent); }
    .wholesale-gate p { margin-bottom: 1rem; }
    .wholesale-gate .btn { margin-right: 0.75rem; }
    .price-gated { font-size: var(--fs-sm); color: var(--c-text-muted); font-style: italic; }
}

/* --- UTILITIES --- */
@layer utilities {
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}

/* --- RESPONSIVE --- */
@layer responsive {
    @media (max-width: 1024px) {
        .hero-home__stats { grid-template-columns: repeat(2, 1fr); }
        .home-about__grid { grid-template-columns: 1fr; gap: 2.5rem; }
        .home-about__image img { min-height: 300px; }
        .cat-grid { grid-template-columns: repeat(2, 1fr); }
        .home-process__grid { grid-template-columns: 1fr; gap: 2.5rem; }
        .home-metrics { grid-template-columns: repeat(2, 1fr); }
        .testimonials-grid { grid-template-columns: 1fr; }
        .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
        .home-cta__inner { flex-direction: column; text-align: center; align-items: center; }
        .home-cta__actions { flex-direction: row; }
        .login-page { grid-template-columns: 1fr; }
        .login-page__brand { display: none; }
        .apply__grid { grid-template-columns: 1fr; gap: 2.5rem; }
        .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
        .about-principles { grid-template-columns: 1fr; }
        .grid--editorial { grid-template-columns: 1fr; gap: 2.5rem; }
        .about-diff-grid { grid-template-columns: 1fr; }
        .brands-grid { grid-template-columns: repeat(2, 1fr); }
        .pcb-details { grid-template-columns: 1fr; }
        .pcb-list ul { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
        .utility-bar__left { display: none; }
        .utility-bar__inner { justify-content: center; }
        .header__toggle { display: flex; }
        .header__logo-img { height: 40px; }
        .header__nav {
            position: fixed; inset: 0; background: var(--c-primary);
            flex-direction: column; justify-content: center; align-items: center; gap: 2rem;
            opacity: 0; visibility: hidden; transition: all var(--transition); z-index: 999;
        }
        .header__nav.is-open { opacity: 1; visibility: visible; }
        .header__nav-list { flex-direction: column; align-items: center; gap: 1.5rem; }
        .header__nav-list li a { color: var(--c-white); font-size: var(--fs-xl); }
        .header__nav-list li a::after { background: var(--c-accent); }
        .header__cta-group { flex-direction: column; }
        .header__cta-group .btn { min-width: 200px; justify-content: center; }

        .section { padding: 3rem 0; }
        .section--compact { padding: 2rem 0; }
        .container { padding: 0 1rem; }
        .section-header { margin-bottom: 2rem; }
        .t-heading-1 { font-size: var(--fs-3xl); }
        .t-heading-2 { font-size: var(--fs-2xl); }

        .hero-home { min-height: auto; padding: 3rem 0; }
        .hero-home__title { font-size: clamp(1.75rem, 6vw, 2.25rem); margin-bottom: 1rem; }
        .hero-home__lead { font-size: var(--fs-base); margin-bottom: 1.5rem; max-width: 100%; }
        .hero-home__badge { font-size: 0.65rem; margin-bottom: 1rem; }
        .hero-home__actions { flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
        .hero-home__actions .btn { width: 100%; justify-content: center; }
        .hero-home__stats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; padding: 1rem; }
        .hero-home__stat-num { font-size: var(--fs-xl); }
        .hero-home__stat-label { font-size: 0.6rem; }

        .trust-bar { padding: 1rem 0; }
        .trust-bar__inner { gap: 0.5rem 1rem; justify-content: center; }
        .trust-bar__item { font-size: 0.65rem; gap: 0.35rem; }
        .trust-bar__item svg { width: 12px; height: 12px; }

        .logos-section { padding: 1.5rem 0; }
        .logos-section__label { font-size: var(--fs-xs); margin-bottom: 1rem; }

        .cat-grid { grid-template-columns: 1fr; }
        .cat-grid__item { padding: 1.25rem; }
        .why-grid { grid-template-columns: 1fr; }
        .home-metrics { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
        .home-metrics__item { padding: 1rem; }
        .home-metrics__value { font-size: var(--fs-3xl); }
        .home-metrics-section { clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%); }

        .compliance-item { gap: 1rem; padding: 1.5rem; }
        .testimonial { padding: 1.5rem; }

        .home-cta__actions { flex-direction: column; width: 100%; }
        .home-cta__actions .btn { width: 100%; }

        .form__row { grid-template-columns: 1fr; }
        .contact-grid { grid-template-columns: 1fr; }

        .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
        .footer__bottom { flex-direction: column; gap: 0.75rem; text-align: center; }

        .login-page__form-wrap { padding: 2rem 1rem; }
        .login-form__header h1 { font-size: var(--fs-2xl); }

        .page-hero { padding: 4rem 0 3rem; }
        .page-hero__title { font-size: var(--fs-2xl); }
        .page-hero h1 { font-size: var(--fs-2xl); }
        .page-hero-desc { font-size: var(--fs-base); }

        .about-principles { grid-template-columns: 1fr; }
        .about-facts { grid-template-columns: 1fr; }
        .brands-grid { grid-template-columns: 1fr; }
        .brand-card { padding: 1.25rem; }
        .pcb-header { flex-direction: column; gap: 1rem; }
        .pcb-icon { width: 48px; height: 48px; }
        .pcb-icon svg { width: 24px; height: 24px; }
        .product-category-block { padding: 1.5rem; }

        /* Disable section transitions on mobile */
        .home-about::before,
        .home-categories::after,
        .home-process::before,
        .home-why::before,
        .home-compliance::after,
        .home-testimonials::before { display: none; }
    }

    @media (max-width: 480px) {
        .hero-home__title { font-size: 1.5rem; }
        .hero-home__stat-num { font-size: var(--fs-lg); }
        .hero-home__stat-label { font-size: 0.55rem; }
        .hero-home__stats { gap: 0.5rem; padding: 0.75rem; }
        .btn--lg { padding: 0.75rem 1.25rem; font-size: var(--fs-sm); }
        .home-about__stats { grid-template-columns: 1fr; }
        .home-metrics__value { font-size: var(--fs-2xl); }
        .home-metrics__label { font-size: 0.6rem; }
        .section { padding: 2.5rem 0; }
        .section-header { margin-bottom: 1.5rem; }
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
        .logos-track__slide { animation: none; }
        [data-animate] { opacity: 1; transform: none; }
    }
}