/* ---------------------------------------------------
   Bem Vindo Comércio BC – style.css
   Projeto: Premium 3D website
   Tecnologias: HTML5, CSS3, Vanilla JS
   --------------------------------------------------- */

/* Root variables */
:root {
    /* Colors */
    --anthracite: #1C1B1A;
    --brass: #A97C50;
    --cognac: #8C4A2F;
    --stone: #EDE8DE;
    --forest: #2F4030;

    /* Typography */
    --font-title: 'Libre Baskerville', serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Layout */
    --max-width: 1200px;
    --gap: 1.5rem;
}

/* Reset & box‑sizing */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--anthracite);
    color: var(--stone);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Utility classes */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gap); }

/* ---------------------------------------------------
   Navbar
   --------------------------------------------------- */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    height: 80px;
    transition: all 0.3s ease;
}
.navbar.transparent { background: transparent; }
.navbar.scrolled {
    background: rgba(28,27,26,0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    height: 70px;
}
.navbar .navbar-container { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.logo { display: flex; align-items: baseline; text-decoration: none; color: var(--stone); }
.logo-symbol { font-family: var(--font-title); font-size: 2rem; font-weight: 700; margin-right: 0.5rem; }
.logo-text { font-family: var(--font-body); font-size: 0.9rem; opacity: 0.8; }
.nav-links { display: flex; gap: 1rem; }
.nav-links a { color: var(--stone); text-decoration: none; font-weight: 500; position: relative; }
.nav-links a::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 0%;
    left: 0; bottom: -4px;
    background: var(--brass);
    transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }
.whatsapp-btn { background: var(--brass); color: var(--stone); padding: 0.6rem 1rem; border-radius: 4px; }
.hamburger { display: none; background: none; border: none; cursor: pointer; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--stone); margin: 5px 0; transition: transform 0.3s; }

/* ---------------------------------------------------
   Hero
   --------------------------------------------------- */
.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    perspective: 1200px;
    background: var(--anthracite);
}
.hero-layers { position: absolute; inset: 0; }
.layer { position: absolute; inset: 0; }
.layer-bg { background: radial-gradient(circle at 30% 30%, #2e2d2c, #1c1b1a);
    /* subtle texture could be added via data‑uri */
}
.layer-shapes { pointer-events: none; }
.layer-shapes::before, .layer-shapes::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(169,124,80,0.07);
    box-shadow: 0 0 30px rgba(169,124,80,0.2);
}
.layer-shapes::before { width: 400px; height: 400px; top: 20%; left: 10%; transform: translateZ(100px); }
.layer-shapes::after { width: 300px; height: 300px; bottom: 15%; right: 15%; transform: translateZ(150px); }

/* BC Badge – 3D medal */
.bc-badge {
    position: absolute;
    top: 50%; left: 50%;
    width: 180px; height: 180px;
    margin: -90px 0 0 -90px;
    border-radius: 50%;
    background: conic-gradient(from 45deg, #d4b89f, #b08a66, #d4b89f);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3), 0 0 30px rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-title);
    font-size: 3rem;
    color: var(--stone);
    text-shadow: 0 0 8px rgba(255,255,255,0.6);
    transform-style: preserve-3d;
    animation: rotateSlow 30s linear infinite;
}
@keyframes rotateSlow { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

.layer-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; color: var(--stone); }
.hero-tagline { font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 2px; }
.hero-title { font-family: var(--font-title); font-size: clamp(2.5rem, 10vw, 5rem); line-height: 1.1; }
.hero-subtitle { font-family: var(--font-body); max-width: 600px; }
.hero-cta .btn { padding: 0.8rem 1.5rem; border-radius: 4px; text-decoration: none; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; }
.btn-primary { background: var(--brass); color: var(--stone); }
.btn-secondary { background: transparent; border: 2px solid var(--brass); color: var(--brass); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.2); }

/* Scroll indicator */
.scroll-indicator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; cursor: pointer; }
.scroll-text { font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 4px; }
.scroll-line { width: 2px; height: 30px; background: var(--brass); margin: 0 auto; animation: scrollPulse 1.5s infinite; }
@keyframes scrollPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ---------------------------------------------------
   Sections – generic styling
   --------------------------------------------------- */
.section { padding: 6rem 0; }
.section-title { font-family: var(--font-title); font-size: 2.5rem; text-align: center; margin-bottom: 1rem; color: var(--stone); }
.section-subtitle { text-align: center; max-width: 800px; margin: 0 auto 3rem; color: var(--stone); opacity: 0.9; }

/* Categories */
.category-cards { display: flex; gap: var(--gap); flex-wrap: wrap; justify-content: center; }
.category-card { position: relative; width: 320px; height: 420px; overflow: hidden; border-radius: 12px; cursor: pointer; perspective: 800px; }
.category-card .card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s; }
.category-card .card-content { position: absolute; inset: 0; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; color: var(--stone); background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); transition: transform 0.4s; }
.category-card .card-number { font-family: var(--font-mono); font-size: 2rem; opacity: 0.5; }
.category-card .card-title { font-family: var(--font-title); font-size: 1.8rem; margin-top: 0.5rem; }
.category-card .card-desc { font-size: 0.95rem; margin: 0.8rem 0; }
.category-card .btn { align-self: flex-start; }
.category-card:hover .card-bg { transform: translateZ(30px) scale(1.05); }
.category-card:hover .card-content { transform: translateZ(60px); }

/* About */
.about-container { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; max-width: var(--max-width); margin: 0 auto; }
.about-text { flex: 1 1 400px; }
.about-text h2 { font-family: var(--font-title); font-size: 2.2rem; margin-bottom: 1rem; }
.about-visual { flex: 1 1 400px; position: relative; height: 300px; }
.bc-watermark { position: absolute; inset: 0; font-family: var(--font-title); font-size: 12rem; color: rgba(169,124,80,0.07); display: flex; align-items: center; justify-content: center; }

/* Highlights – product grid */
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }
.product-card { background: var(--anthracite); border-radius: 12px; overflow: hidden; perspective: 800px; transition: transform 0.3s; }
.product-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 12px 24px rgba(0,0,0,0.4); }
.product-img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.3s; }
.product-card:hover .product-img { transform: scale(1.05); }
.product-info { padding: 1rem; color: var(--stone); }
.product-info h3 { font-family: var(--font-title); margin-bottom: 0.5rem; }
.product-info .price { font-family: var(--font-mono); color: var(--brass); margin-bottom: 0.5rem; }
.product-info .btn { display: inline-block; margin-top: 0.5rem; }

/* Material strip (marquee) */
.material-strip { background: var(--anthracite); padding: 0.5rem 0; overflow: hidden; }
.marquee { display: inline-block; white-space: nowrap; animation: marquee 20s linear infinite; font-family: var(--font-body); font-size: 0.9rem; color: var(--stone); }
@keyframes marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* Experience cards */
.experience-cards { display: flex; justify-content: center; gap: var(--gap); flex-wrap: wrap; }
.exp-card { background: var(--anthracite); padding: 2rem; border-radius: 12px; text-align: center; width: 260px; transition: transform 0.3s; }
.exp-card:hover { transform: translateY(-8px); }
.exp-icon { width: 48px; height: 48px; margin-bottom: 1rem; fill: var(--brass); }

/* Testimonials slider */
.testimonial-slider { position: relative; overflow: hidden; max-width: 800px; margin: 0 auto; }
.testimonial-slide { min-width: 100%; padding: 2rem; box-sizing: border-box; opacity: 0; transition: opacity 0.5s; }
.testimonial-slide.active { opacity: 1; }
.testimonial-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
.testimonial-controls button { background: var(--brass); border: none; color: var(--stone); padding: 0.5rem 1rem; cursor: pointer; }

/* Final CTA */
.final-cta { position: relative; color: var(--stone); text-align: center; padding: 8rem 0; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; background: rgba(28,27,26,0.9); }
.bc-badge-large { position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; margin: -250px 0 0 -250px; border-radius: 50%; background: conic-gradient(from 45deg, #d4b89f, #b08a66, #d4b89f); opacity: 0.1; }

/* Contact */
.contact-info p, .contact-info a { margin-bottom: 0.5rem; color: var(--stone); }

/* Footer */
.footer { background: var(--anthracite); color: var(--stone); padding: 3rem 0; text-align: center; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.footer-brand .logo-symbol { font-family: var(--font-title); font-size: 2rem; }
.footer-tagline { margin-bottom: 1rem; }
.footer-links { display: flex; gap: 1rem; justify-content: center; margin-bottom: 1rem; }
.footer-links a { color: var(--stone); text-decoration: none; }
.footer-social a { margin: 0 0.5rem; color: var(--stone); }
.footer-copy { font-size: 0.85rem; opacity: 0.7; }

/* Buttons – magnetic effect (JS will add class .magnetic) */
.btn.magnetic { position: relative; overflow: hidden; }
.btn.magnetic::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.2), transparent 60%); transition: background 0.2s; }

/* Custom cursor */
body.custom-cursor { cursor: none; }
.cursor { position: fixed; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(169,124,80,0.8); pointer-events: none; transform: translate(-50%, -50%); transition: transform 0.1s ease-out, background 0.2s; z-index: 9999; }
.cursor.expand { transform: translate(-50%, -50%) scale(2); background: rgba(169,124,80,1); }

/* Responsive breakpoints */
@media (max-width: 992px) {
    .navbar { height: 70px; }
    .hero-title { font-size: clamp(2rem,8vw,4rem); }
    .category-cards { flex-direction: column; align-items: center; }
    .about-container { flex-direction: column; }
}
@media (max-width: 768px) {
    .hamburger { display: block; }
    .nav-links { position: fixed; top: 0; right: -100%; height: 100vh; width: 70%; background: var(--anthracite); flex-direction: column; align-items: center; justify-content: center; gap: 2rem; transition: right 0.3s; }
    .nav-links.open { right: 0; }
    .hero { height: 90vh; }
    .hero-title { font-size: 2.5rem; }
    .bc-badge { width: 130px; height: 130px; }
    .final-cta .bc-badge-large { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
    .cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------
   BC / visual direction 2026
   --------------------------------------------------- */
:root {
    --anthracite: #101313;
    --ink: #161b1a;
    --brass: #d8a76c;
    --brass-light: #f0c992;
    --stone: #f2eee6;
    --muted: #9b9f97;
    --line: rgba(242, 238, 230, .16);
    --acid: #c7ee72;
    --font-title: 'Libre Baskerville', Georgia, serif;
    --font-body: 'Inter', sans-serif;
}

body { background: var(--ink); color: var(--stone); }
body.modal-open { overflow: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.navbar { height: 86px; padding: 0 clamp(1.25rem, 4vw, 4rem); }
.navbar .navbar-container { max-width: 1440px; margin: auto; }
.logo { letter-spacing: .08em; }
.logo-symbol { color: var(--brass-light); font-size: 1.8rem; }
.logo-text { font-size: .65rem; letter-spacing: .2em; }
.nav-links { align-items: center; gap: clamp(.8rem, 2vw, 2rem); }
.nav-links a { font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: rgba(242,238,230,.78); }
.nav-links a::after { background: var(--acid); height: 1px; }
.whatsapp-btn { color: var(--ink) !important; background: var(--acid); padding: .75rem 1rem; letter-spacing: .08em !important; }
.whatsapp-btn span { font-size: 1rem; margin-left: .35rem; }

.hero { min-height: 760px; height: 100svh; max-height: 980px; background: radial-gradient(circle at 75% 48%, #26312b 0, #151b19 34%, #101313 72%); }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(16,19,19,.92) 0%, rgba(16,19,19,.35) 50%, transparent 80%), linear-gradient(0deg, rgba(16,19,19,.6), transparent 35%); }
.hero-layers { z-index: 1; }
.layer-bg { background: transparent; }
.layer-shapes::before { width: min(44vw, 580px); height: min(44vw, 580px); top: 15%; left: auto; right: 8%; background: radial-gradient(circle, rgba(216,167,108,.22), transparent 65%); box-shadow: none; filter: blur(2px); }
.layer-shapes::after { width: 80vw; height: 1px; top: 50%; bottom: auto; right: -10%; border-radius: 0; background: rgba(199,238,114,.26); box-shadow: 0 0 80px rgba(199,238,114,.15); transform: rotate(-25deg); }
.layer-badge { z-index: 2; }
.bc-badge { left: 65%; width: clamp(230px, 32vw, 420px); height: clamp(230px, 32vw, 420px); margin: calc(clamp(230px, 32vw, 420px) / -2) 0 0 calc(clamp(230px, 32vw, 420px) / -2); border: 1px solid rgba(240,201,146,.45); background: radial-gradient(circle at 30% 22%, #f1c88e 0 2%, #a97143 24%, #523825 60%, #211c17 100%); box-shadow: inset -30px -30px 80px rgba(0,0,0,.45), inset 16px 12px 24px rgba(255,255,255,.28), 0 0 90px rgba(216,167,108,.15); animation: floatBadge 8s ease-in-out infinite; }
.bc-badge::before, .bc-badge::after { content: ''; position: absolute; border: 1px solid rgba(240,201,146,.55); border-radius: 50%; }
.bc-badge::before { inset: 7%; }
.bc-badge::after { inset: 12%; border-style: dashed; opacity: .7; }
.bc-badge span { font-size: clamp(4rem, 9vw, 8rem); color: #f7dfb6; line-height: .8; z-index: 1; }
.bc-badge small { position: absolute; bottom: 18%; z-index: 1; font: .55rem var(--font-body); letter-spacing: .35em; color: rgba(255,235,198,.7); }
@keyframes floatBadge { 0%,100% { transform: translateY(0) rotateX(0) rotateY(0); } 50% { transform: translateY(-16px) rotateX(4deg) rotateY(6deg); } }
.orbit { position: absolute; top: 50%; left: 65%; width: clamp(330px, 47vw, 610px); height: clamp(110px, 14vw, 180px); margin: calc(clamp(110px, 14vw, 180px) / -2) 0 0 calc(clamp(330px, 47vw, 610px) / -2); border: 1px solid rgba(199,238,114,.45); border-radius: 50%; transform: rotate(-28deg); animation: orbitSpin 15s linear infinite; }
.orbit-two { width: clamp(280px, 39vw, 510px); height: clamp(160px, 24vw, 290px); margin-top: calc(clamp(160px, 24vw, 290px) / -2); margin-left: calc(clamp(280px, 39vw, 510px) / -2); border-color: rgba(216,167,108,.35); transform: rotate(57deg); animation-direction: reverse; animation-duration: 22s; }
@keyframes orbitSpin { to { transform: rotate(332deg); } }
.layer-text { align-items: flex-start; text-align: left; padding: 0 clamp(1.25rem, 8vw, 9rem); max-width: 760px; gap: 1.2rem; z-index: 3; }
.hero-tagline { color: var(--acid); font-size: .64rem; letter-spacing: .27em; }
.hero-title { font-size: clamp(2.65rem, 5.4vw, 5.4rem); line-height: .98; letter-spacing: -.045em; max-width: 700px; text-wrap: balance; }
.hero-title em { color: var(--brass-light); font-style: normal; }
.hero-subtitle { max-width: 420px; color: rgba(242,238,230,.68); font-size: .95rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.25rem; border-radius: 0; font: 600 .65rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; transition: transform .35s, background .35s, color .35s, border-color .35s; }
.btn-primary { background: var(--acid); color: var(--ink); }
.btn-secondary { border: 1px solid rgba(242,238,230,.4); color: var(--stone); }
.btn:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,.2); }
.btn-secondary:hover { border-color: var(--acid); color: var(--acid); }
.scroll-indicator { left: clamp(1.25rem, 8vw, 9rem); transform: none; text-align: left; display: flex; align-items: center; gap: .8rem; }
.scroll-text { font-size: .58rem; letter-spacing: .25em; color: var(--muted); }
.scroll-line { width: 42px; height: 1px; margin: 0; background: var(--acid); }

.section { max-width: 1440px; margin: auto; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 5rem); }
.section-title { text-align: left; font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.03em; margin-bottom: .6rem; }
.section-subtitle { text-align: left; color: var(--muted); max-width: 470px; margin: 0 0 3rem; font-size: .9rem; }
.categories { background: #151a18; max-width: none; }
.categories > * { max-width: 1340px; margin-left: auto; margin-right: auto; }
.category-cards { align-items: stretch; gap: 1rem; }
.category-card { flex: 1 1 280px; width: auto; max-width: 430px; height: 510px; border-radius: 0; border: 1px solid var(--line); background: #212a26; box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.category-card .card-bg { opacity: .82; background-size: cover; background-position: center; }
.category-card .card-bg-roupas { background-image: url('../img/fato_antracite.png'); }
.category-card .card-bg-sapatos { background-image: url('../img/sapatos_coleccao.jpg'); }
.category-card .card-bg-acessorios { background-image: url('../img/cinto_cognac.png'); }
.card-bg-roupas { background: radial-gradient(circle at 40% 20%, #e2b47d, transparent 27%), linear-gradient(145deg, #4e4638, #18221f 58%, #101313); }
.card-bg-sapatos { background: radial-gradient(ellipse at 75% 25%, #cae277, transparent 2%, transparent 25%), linear-gradient(120deg, #25362f, #111817 65%); }
.card-bg-acessorios { background: radial-gradient(circle at 65% 34%, #d8a76c, transparent 3%, transparent 25%), linear-gradient(145deg, #3f3026, #151a18 65%); }
.category-card::before { content: ''; position: absolute; inset: 1rem; border: 1px solid rgba(242,238,230,.2); z-index: 1; pointer-events: none; }
.category-card .card-content { z-index: 2; padding: 2rem; background: linear-gradient(to top, rgba(10,13,12,.9), transparent 75%); }
.category-card .card-number { color: var(--acid); font-size: .65rem; letter-spacing: .15em; }
.category-card .card-title { font-size: 2.1rem; }
.category-card .card-desc { color: rgba(242,238,230,.7); font-size: .82rem; }
.about { background: var(--brass); color: var(--ink); max-width: none; }
.about-container { max-width: 1340px; padding: 0 clamp(1.25rem, 5vw, 5rem); }
.about-text h2 { font-size: clamp(2.4rem, 5vw, 5rem); line-height: .98; }
.about-text p { max-width: 460px; color: rgba(16,19,19,.7); }
.about-visual { background: #18221f; height: 400px; overflow: hidden; }
.about-visual::before { content: '01'; position: absolute; right: 8%; top: 10%; font: clamp(8rem, 18vw, 16rem) var(--font-title); color: rgba(199,238,114,.2); line-height: 1; }
.bc-watermark { color: var(--brass-light); opacity: .8; mix-blend-mode: screen; }
.highlights { background: #111716; max-width: none; }
.highlights > * { max-width: 1340px; margin-left: auto; margin-right: auto; }
.collection-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin: 2.5rem 0; padding-bottom: 1rem; border-bottom: 1px solid var(--line); color: var(--acid); font: .62rem var(--font-body); letter-spacing: .18em; }
.filter-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-btn { border: 1px solid var(--line); background: transparent; color: var(--muted); padding: .6rem .8rem; font: .62rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.filter-btn.active, .filter-btn:hover { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.products-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.product-card { border: 1px solid var(--line); border-radius: 0; background: #19201d; }
.product-card:hover { border-color: rgba(199,238,114,.55); box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.product-img { height: 300px; transition: transform .5s; }
.product-art { position: relative; display: grid; place-items: center; overflow: hidden; background-color: #1c2723; background-position: center; background-size: cover; }
.product-art::before { content: ''; position: absolute; width: 58%; height: 78%; border-radius: 50%; background: rgba(216,167,108,.16); filter: blur(20px); }
.product-art::after { content: ''; position: absolute; width: 42%; height: 62%; border: 1px solid rgba(242,238,230,.35); transform: rotate(22deg); }
.product-art span { z-index: 1; font: 3.5rem var(--font-title); color: rgba(242,238,230,.72); }
.art-collection::before, .art-collection::after { display: none; }
.art-shoe::after, .art-derby::after, .art-sneaker::after { width: 54%; height: 26%; border-radius: 55% 50% 28% 20%; transform: rotate(-10deg); background: linear-gradient(135deg, #d8a76c, #3b271b); box-shadow: -15px 14px 0 -5px rgba(0,0,0,.32); }
.art-watch::after { width: 30%; height: 62%; border-radius: 50%; transform: rotate(0); box-shadow: inset 0 0 0 9px #101313, 0 0 0 4px #d8a76c; }
.art-belt::after { width: 68%; height: 14%; transform: rotate(-25deg); background: #7d4d2e; }
.art-wallet::after { width: 47%; height: 38%; transform: rotate(-12deg); background: #7d4d2e; border-radius: 4px; }
.product-info { padding: 1.25rem; }
.product-info h3 { font-size: 1rem; }
.product-info .price { color: var(--acid); font-size: .76rem; }
.product-info .btn { min-height: 38px; width: 100%; font-size: .58rem; }
.product-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; }
.product-actions .btn { margin-top: 0; }
.product-details-btn { min-height: 38px; border: 1px solid var(--line); background: transparent; color: var(--stone); cursor: pointer; font: 600 .58rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.product-details-btn:hover { border-color: var(--acid); color: var(--acid); }
.product-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1.25rem; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.product-modal.open { opacity: 1; visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(8,11,10,.82); backdrop-filter: blur(12px); }
.modal-panel { position: relative; display: grid; grid-template-columns: minmax(240px, .82fr) 1.18fr; width: min(900px, 100%); max-height: min(680px, 92vh); overflow: auto; background: #1b2420; border: 1px solid rgba(199,238,114,.3); box-shadow: 0 30px 100px rgba(0,0,0,.5); transform: translateY(24px) scale(.98); transition: transform .35s; }
.product-modal.open .modal-panel { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: .8rem; right: .8rem; z-index: 2; width: 38px; height: 38px; border: 1px solid rgba(242,238,230,.3); background: rgba(16,19,19,.5); color: var(--stone); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.modal-close:hover { color: var(--acid); border-color: var(--acid); }
.modal-product-art { min-height: 520px; height: 100%; }
.modal-product-art span { font-size: clamp(5rem, 10vw, 9rem); }
.modal-content { padding: clamp(2rem, 5vw, 4.5rem); align-self: center; }
.modal-kicker { color: var(--acid); font-size: .6rem; letter-spacing: .2em; }
.modal-content h2 { margin: .65rem 0 .8rem; font: clamp(1.8rem, 4vw, 3.4rem) var(--font-title); line-height: 1; }
.modal-description { color: var(--muted); max-width: 400px; font-size: .85rem; }
.modal-price { margin: 1.2rem 0 1.5rem; color: var(--brass-light); font: 1rem var(--font-body); letter-spacing: .08em; }
.modal-options { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.modal-options label { display: grid; gap: .4rem; color: var(--muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.modal-options label:last-child { grid-column: 1 / -1; max-width: 120px; }
.modal-options select, .modal-options input { width: 100%; border: 1px solid var(--line); border-radius: 0; background: #111716; color: var(--stone); padding: .75rem; font: .78rem var(--font-body); outline: none; }
.modal-options select:focus, .modal-options input:focus { border-color: var(--acid); }
.modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.7rem; }
.modal-actions .btn { width: 100%; }
.modal-add { border: 0; padding: 0; background: transparent; color: var(--muted); font: .65rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.modal-add:hover { color: var(--acid); }
.selection-note { min-height: 1.2em; margin-top: 1rem; color: var(--acid); font-size: .75rem; }
.material-strip { background: var(--acid); color: var(--ink); padding: .7rem 0; }
.marquee { color: var(--ink); font-weight: 700; letter-spacing: .18em; }
.experience { max-width: none; background: var(--brass); color: var(--ink); }
.experience-cards { max-width: 1200px; margin: auto; }
.exp-card { width: 31%; min-width: 220px; background: transparent; border-top: 1px solid rgba(16,19,19,.45); border-radius: 0; padding: 1.6rem 0; text-align: left; }
.exp-card h3 { font-size: .8rem; letter-spacing: .15em; }
.exp-card p { color: rgba(16,19,19,.68); font-size: .85rem; }
.exp-icon { stroke: var(--ink) !important; }
.testimonials { max-width: none; background: #151a18; }
.testimonial-slider { max-width: 900px; margin-left: 0; }
.testimonial-slide { padding: 2rem 0; }
.testimonial-slide blockquote { font: clamp(1.6rem, 3vw, 3rem) var(--font-title); line-height: 1.15; max-width: 760px; }
.testimonial-slide cite { display: block; color: var(--acid); margin-top: 1.5rem; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; }
.testimonial-controls { justify-content: flex-start; }
.testimonial-controls button { width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--stone); }
.final-cta { max-width: none; padding: clamp(6rem, 12vw, 12rem) 1.25rem; background: #1d2823; }
.cta-bg { background: radial-gradient(circle at 50% 50%, rgba(216,167,108,.18), transparent 40%); }
.bc-badge-large { border: 1px solid rgba(199,238,114,.25); background: transparent; opacity: 1; box-shadow: 0 0 120px rgba(199,238,114,.12); }
.cta-content { position: relative; z-index: 1; }
.cta-content h2 { font-size: clamp(2.2rem, 5vw, 5rem); line-height: .98; }
.cta-content p { color: var(--muted); }
.contact { max-width: none; background: var(--brass); color: var(--ink); }
.contact h2 { color: var(--ink); }
.contact-info a, .contact-info p { color: rgba(16,19,19,.78); }
.footer { background: #101313; }
.footer { padding: 4.5rem clamp(1.25rem, 5vw, 5rem) 2rem; text-align: left; border-top: 1px solid rgba(199,238,114,.2); }
.footer-container { width: min(1340px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; align-items: start; }
.footer-brand { justify-content: flex-start; margin-bottom: .8rem; }
.footer-brand .logo-text { letter-spacing: .13em; }
.footer-tagline { max-width: 220px; color: var(--muted); font-size: .8rem; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; justify-content: start; gap: .7rem 1.2rem; margin: 0; }
.footer-links a { color: var(--muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; transition: color .25s; }
.footer-links a:hover { color: var(--acid); }
.footer-social { display: flex; justify-content: flex-end; align-items: flex-start; gap: .6rem; height: auto; }
.footer-social a { display: grid; place-items: center; width: 42px; height: 42px; margin: 0; border: 1px solid var(--line); color: var(--stone); transition: border-color .25s, color .25s, transform .25s; }
.footer-social a:hover { color: var(--acid); border-color: var(--acid); transform: translateY(-3px); }
.footer-social svg { display: block; width: 17px; height: 17px; fill: currentColor; overflow: visible; }
.footer-copy { grid-column: 1 / -1; width: 100%; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); }
.btn-light { background: transparent; border: 1px solid rgba(242,238,230,.55); color: var(--stone); }
.btn-light:hover { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.category-explore { cursor: pointer; }
.category-modal { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 1.25rem; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.category-modal.open { opacity: 1; visibility: visible; }
.category-modal-panel { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; width: min(900px, 100%); max-height: min(680px, 92vh); overflow: auto; background: #1b2420; border: 1px solid rgba(199,238,114,.3); box-shadow: 0 30px 100px rgba(0,0,0,.5); transform: translateY(24px) scale(.98); transition: transform .35s; }
.category-modal.open .category-modal-panel { transform: translateY(0) scale(1); }
.category-modal-visual { position: relative; display: grid; place-items: center; min-height: 520px; overflow: hidden; background: linear-gradient(145deg, #35483d, #111716); }
.category-modal-visual::before { content: ''; position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid rgba(199,238,114,.45); border-radius: 50%; box-shadow: 0 0 80px rgba(199,238,114,.18); transform: rotate(-22deg) scaleY(.45); }
.category-modal-visual::after { content: 'BC'; position: absolute; color: rgba(240,201,146,.28); font: clamp(7rem, 16vw, 12rem) var(--font-title); }
.visual-clothes { background: radial-gradient(circle at 50% 30%, rgba(216,167,108,.5), transparent 28%), linear-gradient(145deg, #534331, #18221f 70%); }
.visual-shoes { background: radial-gradient(ellipse at 62% 35%, rgba(199,238,114,.35), transparent 22%), linear-gradient(145deg, #30473d, #111716 72%); }
.visual-accessories { background: radial-gradient(circle at 50% 32%, rgba(216,167,108,.5), transparent 22%), linear-gradient(145deg, #493226, #151a18 72%); }
.category-modal-visual span { position: absolute; top: 1.5rem; left: 1.5rem; z-index: 1; color: var(--acid); font: .7rem var(--font-body); letter-spacing: .22em; }
.category-modal-content { align-self: center; padding: clamp(2rem, 5vw, 4.5rem); }
.category-modal-content h2 { margin: .65rem 0 .8rem; font: clamp(2rem, 4vw, 3.6rem) var(--font-title); line-height: 1; }
.category-modal-content > p { max-width: 410px; color: var(--muted); font-size: .9rem; }
.category-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.category-facts span { padding: .55rem .7rem; border: 1px solid var(--line); color: var(--brass-light); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.category-modal-products { display: grid; gap: .6rem; margin: 1rem 0 1.6rem; }
.category-modal-product { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); color: var(--stone); font-size: .78rem; }
.category-modal-product span { color: var(--acid); white-space: nowrap; }
.category-modal-content .btn { width: 100%; }
.contact h2 { font-family: var(--font-title); font-size: clamp(2.3rem, 5vw, 5rem); line-height: 1; margin-bottom: 2rem; }
.contact-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 3rem; max-width: 760px; }
.contact-info p { margin-bottom: 0; font-size: .85rem; }
.contact-info p:first-child { grid-column: 1 / -1; font-size: 1.1rem; }
.contact-info a { text-decoration: underline; text-underline-offset: 3px; }
.reveal { animation: sectionReveal .8s both; }
@keyframes sectionReveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) { .products-grid { grid-template-columns: repeat(2, 1fr); } .layer-text { max-width: 65%; } }
@media (max-width: 768px) {
    .navbar { padding: 0 1.25rem; }
    .layer-text { max-width: 100%; justify-content: flex-end; padding-bottom: 8rem; }
    .hero-title { font-size: clamp(2.6rem, 12vw, 4.5rem); }
    .layer-badge { opacity: .72; }
    .bc-badge { left: 68%; width: 250px; height: 250px; margin: -125px 0 0 -125px; }
    .orbit { left: 68%; }
    .orbit { opacity: .55; }
    .category-card { max-width: none; width: 100%; height: 390px; }
    .about-container { padding: 0 1.25rem; }
    .about-visual { width: 100%; }
    .products-grid { grid-template-columns: 1fr; }
    .product-img { height: 260px; }
    .product-actions { grid-template-columns: 1fr; }
    .exp-card { width: 100%; }
    .footer { padding: 4rem 1.25rem 1.5rem; }
    .footer-container { grid-template-columns: 1fr; gap: 2rem; }
    .footer-social { justify-content: flex-start; }
    .footer-copy { grid-column: auto; }
    .contact-info { grid-template-columns: 1fr; }
    .contact-info p:first-child { grid-column: auto; }
}
@media (max-width: 620px) {
    .modal-panel { display: block; max-height: 94vh; }
    .modal-product-art { min-height: 210px; height: 210px; }
    .modal-content { padding: 1.5rem; }
    .modal-options { grid-template-columns: 1fr; }
    .modal-options label:last-child { grid-column: auto; max-width: none; }
    .category-modal-panel { display: block; max-height: 94vh; }
    .category-modal-visual { min-height: 180px; height: 180px; }
    .category-modal-content { padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .bc-badge, .orbit { animation: none; } }