/* ========================================
   ART ATELIER - HAIR SALON PREMIUM
   Design System: Luxury High-End
   ======================================== */

:root {
    --color-black: #0a0a0a;
    --color-dark: #111111;
    --color-white: #faf9f6;
    --color-bone: #f4f0ec;
    --color-gold: #c5a059;
    --color-gold-light: #d4af37;
    --color-text: #333333;
    --color-text-light: #777777;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --transition-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --shadow-soft: 0 10px 40px rgba(0,0,0,0.08);
    --shadow-medium: 0 15px 50px rgba(0,0,0,0.12);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html { scroll-behavior:smooth; font-size:16px; }

body {
    font-family:var(--font-sans);
    color:var(--color-text);
    background:var(--color-white);
    line-height:1.6;
    overflow-x:hidden;
    cursor:none;
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:none; border:none; background:none; }

.container { width:100%; max-width:1280px; margin:0 auto; padding:0 24px; }
.container.narrow { max-width:800px; }

/* Custom Cursor */
.cursor-dot, .cursor-outline {
    position:fixed; top:0; left:0; transform:translate(-50%,-50%);
    border-radius:50%; pointer-events:none; z-index:9999;
    transition:width .2s, height .2s, background .2s;
}
.cursor-dot { width:6px; height:6px; background:var(--color-gold); }
.cursor-outline {
    width:36px; height:36px; border:1px solid rgba(197,160,89,0.4);
    transition:width .25s, height .25s, border-color .25s, transform .1s linear;
}
@media (pointer:coarse) { .cursor-dot, .cursor-outline { display:none; } body { cursor:auto; } button, a { cursor:pointer; } }

/* Preloader */
#preloader {
    position:fixed; inset:0; background:var(--color-white); z-index:10000;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .8s var(--transition-smooth), visibility .8s;
}
#preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.preloader-content { text-align:center; }
.preloader-logo {
    font-family:var(--font-serif); font-size:clamp(1.8rem,4vw,2.5rem);
    color:var(--color-black); letter-spacing:2px; margin-bottom:24px;
    animation:fadeUp .8s ease both;
}
.preloader-line { width:160px; height:2px; background:#e0ddd8; margin:0 auto; overflow:hidden; border-radius:2px; }
.preloader-progress { width:0; height:100%; background:var(--color-gold); animation:loadProgress 1.5s ease forwards; }
@keyframes loadProgress { to { width:100%; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Buttons */
.btn-primary {
    display:inline-flex; align-items:center; justify-content:center;
    padding:16px 36px; background:var(--color-black); color:var(--color-white);
    font-size:.85rem; font-weight:500; letter-spacing:1px; text-transform:uppercase;
    border-radius:var(--radius-sm); transition:transform .3s, background .3s, box-shadow .3s;
    position:relative; overflow:hidden;
}
.btn-primary:hover { background:var(--color-dark); transform:translateY(-2px); box-shadow:var(--shadow-medium); }
.btn-secondary {
    display:inline-flex; align-items:center; justify-content:center;
    padding:16px 36px; border:1px solid rgba(255,255,255,0.4); color:var(--color-white);
    font-size:.85rem; font-weight:500; letter-spacing:1px; text-transform:uppercase;
    border-radius:var(--radius-sm); transition:background .3s, border-color .3s;
}
.btn-secondary:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.7); }

/* Floating Book Button */
.floating-book-btn {
    position:fixed; bottom:24px; right:24px; z-index:998;
    background:var(--color-gold); color:var(--color-white);
    padding:16px 28px; border-radius:50px; font-weight:600; font-size:.85rem;
    letter-spacing:.5px; text-transform:uppercase; box-shadow:0 8px 30px rgba(197,160,89,0.35);
    transition:transform .3s, box-shadow .3s; display:none;
}
.floating-book-btn:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(197,160,89,0.45); }
@media (max-width:768px) { .floating-book-btn { display:flex; } }

/* Header */
.main-header {
    position:fixed; top:0; left:0; width:100%; z-index:999;
    padding:20px 0; transition:background .4s, backdrop-filter .4s, box-shadow .4s;
}
.main-header.scrolled {
    background:rgba(250,249,246,0.85); backdrop-filter:blur(16px); box-shadow:0 2px 20px rgba(0,0,0,0.05);
}
.header-inner {
    display:flex; align-items:center; justify-content:space-between;
    max-width:1280px; margin:0 auto; padding:0 24px;
}
.logo { font-family:var(--font-serif); font-size:1.4rem; font-weight:600; letter-spacing:1px; color:var(--color-white); transition:color .3s; }
.main-header.scrolled .logo { color:var(--color-black); }
.desktop-nav { display:flex; gap:32px; }
.nav-link { font-size:.78rem; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--color-white); position:relative; padding:4px 0; transition:color .3s; }
.main-header.scrolled .nav-link { color:var(--color-text); }
.nav-link::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--color-gold); transition:width .3s; }
.nav-link:hover::after { width:100%; }
.header-book-btn {
    display:flex; align-items:center; padding:10px 24px; background:var(--color-gold); color:var(--color-white);
    font-size:.75rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; border-radius:var(--radius-sm);
    transition:background .3s, transform .3s;
}
.header-book-btn:hover { background:var(--color-gold-light); transform:translateY(-1px); }
.menu-toggle { display:none; flex-direction:column; gap:5px; width:28px; }
.menu-toggle span { display:block; height:2px; width:100%; background:var(--color-white); transition:.3s; }
.main-header.scrolled .menu-toggle span { background:var(--color-black); }
.menu-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.menu-toggle.active span:nth-child(2) { opacity:0; }
.menu-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

@media (max-width:900px) {
    .desktop-nav, .header-book-btn { display:none; }
    .menu-toggle { display:flex; }
}

/* Mobile Menu */
.mobile-menu {
    position:fixed; inset:0; background:var(--color-white); z-index:998;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-menu nav { display:flex; flex-direction:column; align-items:center; gap:24px; }
.mobile-nav-link { font-family:var(--font-serif); font-size:1.6rem; color:var(--color-black); transition:color .3s; }
.mobile-nav-link:hover { color:var(--color-gold); }
.mobile-book-btn { margin-top:16px; padding:14px 32px; background:var(--color-gold); color:var(--color-white); font-weight:600; border-radius:var(--radius-sm); }

/* Hero */
.hero { position:relative; width:100%; height:100vh; min-height:700px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; animation:heroZoom 20s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform:scale(1); } to { transform:scale(1.08); } }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,10,10,0.3), rgba(10,10,10,0.6)); z-index:1; }
.hero-content { position:relative; z-index:2; text-align:center; color:var(--color-white); max-width:800px; padding:0 24px; }
.hero-label { font-size:.75rem; font-weight:500; letter-spacing:4px; text-transform:uppercase; opacity:.8; margin-bottom:20px; }
.hero-title { font-family:var(--font-serif); font-size:clamp(3rem,8vw,6.5rem); font-weight:500; line-height:1.05; margin-bottom:20px; }
.hero-title .italic { font-style:italic; font-weight:400; }
.hero-subtitle { font-size:clamp(1rem,2vw,1.25rem); font-weight:300; opacity:.9; margin-bottom:40px; }
.hero-cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-scroll { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:2; color:var(--color-white); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.65rem; letter-spacing:2px; text-transform:uppercase; opacity:.7; }
.scroll-line { width:1px; height:40px; background:rgba(255,255,255,0.4); position:relative; overflow:hidden; }
.scroll-line::after { content:''; position:absolute; top:0; left:0; width:100%; height:50%; background:var(--color-white); animation:scrollLine 1.5s ease-in-out infinite; }
@keyframes scrollLine { 0% { top:-50%; } 100% { top:100%; } }

/* Section Utilities */
.section-label { display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--color-gold); margin-bottom:12px; }
.section-title { font-family:var(--font-serif); font-size:clamp(2rem,4vw,3.2rem); font-weight:500; line-height:1.15; color:var(--color-black); margin-bottom:20px; }
.section-title em { font-style:italic; font-weight:400; }
.section-header { margin-bottom:60px; }
.section-header.center { text-align:center; }
.section-subtitle { font-size:1.05rem; color:var(--color-text-light); max-width:500px; margin:0 auto; }

.reveal-text { opacity:0; transform:translateY(30px); transition:opacity .8s var(--transition-smooth), transform .8s var(--transition-smooth); }
.reveal-text.visible { opacity:1; transform:translateY(0); }

/* About */
.about { padding:120px 0; background:var(--color-white); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-image { position:relative; overflow:hidden; border-radius:var(--radius-md); }
.about-image img { width:100%; height:500px; object-fit:cover; transition:transform .6s; }
.about-image:hover img { transform:scale(1.03); }
.about-text p { color:var(--color-text-light); margin-bottom:18px; font-size:1.02rem; line-height:1.7; }
.drop-cap::first-letter { font-family:var(--font-serif); font-size:3.5rem; float:left; line-height:.8; margin-right:10px; margin-top:6px; color:var(--color-gold); }
.about-stats { display:flex; gap:40px; margin-top:40px; padding-top:30px; border-top:1px solid #e8e5e0; }
.stat { display:flex; flex-direction:column; }
.stat-number { font-family:var(--font-serif); font-size:2rem; color:var(--color-black); font-weight:600; }
.stat-label { font-size:.78rem; color:var(--color-text-light); text-transform:uppercase; letter-spacing:1px; }
@media (max-width:900px) { .about-grid { grid-template-columns:1fr; gap:40px; } .about-image img { height:350px; } .about-stats { gap:24px; } }

/* Services */
.services { padding:120px 0; background:var(--color-bone); }
.services-tabs { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:50px; }
.tab-btn { padding:12px 24px; border-radius:50px; font-size:.82rem; font-weight:500; letter-spacing:.5px; background:transparent; border:1px solid #d5d0ca; color:var(--color-text); transition:all .3s; }
.tab-btn.active, .tab-btn:hover { background:var(--color-black); color:var(--color-white); border-color:var(--color-black); }
.services-content { max-width:800px; margin:0 auto; }
.tab-panel { display:none; }
.tab-panel.active { display:block; animation:fadeIn .4s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.service-item { display:flex; justify-content:space-between; align-items:center; padding:24px 0; border-bottom:1px solid #d5d0ca; gap:20px; }
.service-info h3 { font-family:var(--font-serif); font-size:1.2rem; font-weight:500; margin-bottom:4px; }
.service-info p { font-size:.88rem; color:var(--color-text-light); }
.service-meta { display:flex; gap:24px; align-items:center; flex-shrink:0; }
.service-time { font-size:.78rem; color:var(--color-text-light); text-transform:uppercase; letter-spacing:1px; }
.service-price { font-family:var(--font-serif); font-size:1.3rem; color:var(--color-gold); font-weight:600; }
@media (max-width:600px) { .service-item { flex-direction:column; align-items:flex-start; gap:8px; } .service-meta { width:100%; justify-content:space-between; } }

/* Booking Section - CRITICAL */
.booking { padding:120px 0; background:var(--color-white); }
.booking-app { max-width:760px; margin:0 auto; }
.booking-progress { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:48px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; }
.progress-step { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.step-circle { width:36px; height:36px; border-radius:50%; border:2px solid #ddd; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600; color:var(--color-text-light); background:var(--color-white); transition:all .3s; }
.progress-step.active .step-circle { border-color:var(--color-gold); background:var(--color-gold); color:var(--color-white); }
.progress-step.completed .step-circle { border-color:var(--color-gold); background:var(--color-gold); color:var(--color-white); }
.step-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; color:var(--color-text-light); white-space:nowrap; }
.progress-step.active .step-label { color:var(--color-black); font-weight:600; }
.progress-line { width:24px; height:2px; background:#ddd; flex-shrink:0; }
@media (max-width:600px) { .booking-progress { gap:4px; } .step-label { display:none; } .progress-line { width:12px; } }

.booking-wizard { background:var(--color-bone); border-radius:var(--radius-lg); padding:40px; position:relative; }
@media (max-width:600px) { .booking-wizard { padding:24px 16px; border-radius:var(--radius-md); } }

.wizard-step { display:none; }
.wizard-step.active { display:block; animation:fadeIn .4s ease; }
.wizard-title { font-family:var(--font-serif); font-size:1.5rem; margin-bottom:6px; }
.wizard-desc { font-size:.9rem; color:var(--color-text-light); margin-bottom:28px; }

/* Service Categories in Booking */
.service-categories { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.cat-btn { padding:10px 18px; border-radius:50px; font-size:.82rem; font-weight:500; background:transparent; border:1px solid #d5d0ca; color:var(--color-text); transition:all .2s; }
.cat-btn.active, .cat-btn:hover { background:var(--color-black); color:var(--color-white); border-color:var(--color-black); }

/* Service Cards */
.service-cards { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; max-height:320px; overflow-y:auto; padding-right:4px; }
.service-card {
    display:flex; justify-content:space-between; align-items:center; padding:16px 18px;
    background:var(--color-white); border-radius:var(--radius-sm); border:2px solid transparent;
    transition:border-color .2s, box-shadow .2s; cursor:pointer;
}
.service-card:hover, .service-card.selected { border-color:var(--color-gold); box-shadow:var(--shadow-soft); }
.sc-title { font-weight:600; font-size:.95rem; }
.sc-desc { font-size:.82rem; color:var(--color-text-light); margin-top:2px; }
.sc-meta { text-align:right; flex-shrink:0; margin-left:16px; }
.sc-price { font-family:var(--font-serif); font-size:1.1rem; color:var(--color-gold); font-weight:600; }
.sc-time { font-size:.75rem; color:var(--color-text-light); }

/* Pro Cards */
.pro-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:14px; margin-bottom:28px; }
.pro-card {
    background:var(--color-white); border-radius:var(--radius-md); padding:18px 12px; text-align:center;
    border:2px solid transparent; cursor:pointer; transition:border-color .2s, box-shadow .2s;
}
.pro-card:hover, .pro-card.selected { border-color:var(--color-gold); box-shadow:var(--shadow-soft); }
.pro-avatar { width:64px; height:64px; border-radius:50%; overflow:hidden; margin:0 auto 10px; background:var(--color-bone); display:flex; align-items:center; justify-content:center; }
.pro-avatar img { width:100%; height:100%; object-fit:cover; }
.pro-avatar span { font-size:1.5rem; color:var(--color-text-light); }
.pro-card h4 { font-size:.88rem; font-weight:600; margin-bottom:2px; }
.pro-card p { font-size:.78rem; color:var(--color-text-light); }

/* Calendar & Slots */
.datetime-picker { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; margin-bottom:28px; }
.calendar-box { background:var(--color-white); border-radius:var(--radius-md); padding:16px; }
.calendar-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cal-nav { width:32px; height:32px; border-radius:50%; background:var(--color-bone); font-size:1.1rem; color:var(--color-black); display:flex; align-items:center; justify-content:center; transition:background .2s; }
.cal-nav:hover { background:#e0ddd8; }
#calMonthYear { font-weight:600; font-size:.92rem; text-transform:capitalize; }
.calendar-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; text-align:center; }
.cal-day-label { font-size:.7rem; text-transform:uppercase; color:var(--color-text-light); padding:6px 0; font-weight:500; }
.cal-day {
    aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.85rem;
    border-radius:var(--radius-sm); cursor:pointer; transition:background .2s, color .2s; position:relative;
}
.cal-day:hover:not(.disabled):not(.selected) { background:var(--color-bone); }
.cal-day.selected { background:var(--color-gold); color:var(--color-white); font-weight:600; }
.cal-day.disabled { color:#ccc; cursor:not-allowed; }
.cal-day.today { font-weight:700; }
.cal-day.today::after { content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:4px; height:4px; background:var(--color-gold); border-radius:50%; }

.slots-box { background:var(--color-white); border-radius:var(--radius-md); padding:16px; }
.slots-box h4 { font-size:.9rem; margin-bottom:12px; font-weight:600; }
.slots-grid { display:flex; flex-wrap:wrap; gap:8px; }
.slot-chip {
    padding:10px 14px; border-radius:var(--radius-sm); background:var(--color-bone); font-size:.85rem; font-weight:500;
    cursor:pointer; transition:all .2s; border:2px solid transparent; min-width:64px; text-align:center;
}
.slot-chip:hover, .slot-chip.selected { background:var(--color-gold); color:var(--color-white); border-color:var(--color-gold); }
.slots-placeholder { font-size:.85rem; color:var(--color-text-light); }

@media (max-width:600px) {
    .datetime-picker { grid-template-columns:1fr; }
    .slots-box { min-height:120px; }
}

/* Form Grid */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.full { grid-column:1 / -1; }
.form-group label { font-size:.82rem; font-weight:500; color:var(--color-text); }
.form-group input, .form-group textarea {
    padding:14px 16px; border:1px solid #d5d0ca; border-radius:var(--radius-sm); background:var(--color-white);
    font-size:.95rem; transition:border-color .2s, box-shadow .2s; font-family:inherit;
}
.form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--color-gold); box-shadow:0 0 0 3px rgba(197,160,89,0.1); }
.form-group input.error { border-color:#e74c3c; }
.error-msg { font-size:.78rem; color:#e74c3c; min-height:16px; }
@media (max-width:600px) { .form-grid { grid-template-columns:1fr; } }

/* Wizard Nav */
.wizard-nav { display:flex; justify-content:space-between; gap:12px; margin-top:8px; }
.btn-next, .btn-back, .btn-confirm {
    padding:14px 28px; border-radius:var(--radius-sm); font-size:.85rem; font-weight:600; letter-spacing:.5px;
    transition:all .3s;
}
.btn-next, .btn-confirm { background:var(--color-black); color:var(--color-white); }
.btn-next:hover:not(:disabled), .btn-confirm:hover { background:var(--color-dark); transform:translateY(-1px); }
.btn-next:disabled { opacity:.4; cursor:not-allowed; }
.btn-back { background:transparent; color:var(--color-text); border:1px solid #d5d0ca; }
.btn-back:hover { background:var(--color-white); }

/* Summary Card */
.summary-card { background:var(--color-white); border-radius:var(--radius-md); padding:24px; margin-bottom:24px; }
.summary-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #eee; font-size:.92rem; }
.summary-row:last-child { border-bottom:none; }
.sum-label { color:var(--color-text-light); }
.sum-value { font-weight:600; color:var(--color-black); text-align:right; max-width:60%; }
.booking-terms { font-size:.78rem; color:var(--color-text-light); text-align:center; margin-top:16px; }
.booking-terms a { color:var(--color-gold); text-decoration:underline; }

/* Booking Success */
.booking-success { display:none; text-align:center; padding:40px 20px; }
.booking-success.show { display:block; animation:fadeIn .5s ease; }
.success-icon { width:72px; height:72px; background:#27ae60; color:var(--color-white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 20px; }
.booking-success h3 { font-family:var(--font-serif); font-size:1.6rem; margin-bottom:10px; }
.booking-success p { color:var(--color-text-light); margin-bottom:24px; }
.success-details { background:var(--color-white); border-radius:var(--radius-md); padding:20px; margin-bottom:24px; text-align:left; max-width:400px; margin-left:auto; margin-right:auto; }

/* Team */
.team { padding:120px 0; background:var(--color-bone); }
.team-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.team-card { background:var(--color-white); border-radius:var(--radius-md); overflow:hidden; transition:transform .3s, box-shadow .3s; }
.team-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-medium); }
.team-img { height:280px; overflow:hidden; }
.team-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.team-card:hover .team-img img { transform:scale(1.05); }
.team-info { padding:20px; }
.team-info h4 { font-family:var(--font-serif); font-size:1.1rem; margin-bottom:2px; }
.team-role { display:block; font-size:.78rem; color:var(--color-gold); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.team-info p { font-size:.85rem; color:var(--color-text-light); margin-bottom:10px; line-height:1.5; }
.team-ig { font-size:.8rem; font-weight:500; color:var(--color-black); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px) { .team-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:500px) { .team-grid { grid-template-columns:1fr; } .team-img { height:320px; } }

/* Portfolio */
.portfolio { padding:120px 0; background:var(--color-white); }
.portfolio-filter { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.filter-btn { padding:10px 22px; border-radius:50px; font-size:.82rem; font-weight:500; background:transparent; border:1px solid #ddd; color:var(--color-text); transition:all .3s; }
.filter-btn.active, .filter-btn:hover { background:var(--color-black); color:var(--color-white); border-color:var(--color-black); }
.portfolio-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.portfolio-item { position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/5; }
.portfolio-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.portfolio-item:hover img { transform:scale(1.06); }
.portfolio-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.6), transparent); display:flex; align-items:flex-end; padding:20px; opacity:0; transition:opacity .3s; }
.portfolio-item:hover .portfolio-overlay { opacity:1; }
.portfolio-overlay span { color:var(--color-white); font-family:var(--font-serif); font-size:1.1rem; }
@media (max-width:768px) { .portfolio-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px) { .portfolio-grid { grid-template-columns:1fr; } }

/* Testimonials */
.testimonials { padding:120px 0; background:var(--color-bone); }
.reviews-badge { text-align:center; margin-bottom:48px; }
.badge-stars { font-size:1.4rem; color:var(--color-gold); letter-spacing:2px; margin-bottom:6px; }
.reviews-badge span { display:block; font-size:1rem; font-weight:600; margin-bottom:4px; }
.reviews-badge a { font-size:.85rem; color:var(--color-gold); text-decoration:underline; }
.testimonials-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.testimonial-card { background:var(--color-white); border-radius:var(--radius-md); padding:32px; transition:box-shadow .3s; }
.testimonial-card:hover { box-shadow:var(--shadow-soft); }
.stars { color:var(--color-gold); font-size:1.1rem; margin-bottom:14px; }
.testimonial-card p { font-size:.95rem; line-height:1.7; margin-bottom:20px; color:var(--color-text); font-style:italic; }
.testimonial-author { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--color-text-light); }
.author-name { font-weight:600; color:var(--color-black); }
@media (max-width:900px) { .testimonials-grid { grid-template-columns:1fr; max-width:600px; margin:0 auto; } }

/* Products */
.products { padding:80px 0; background:var(--color-white); border-top:1px solid #eee; }
.products-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:32px; align-items:center; }
.product-logo { font-family:var(--font-serif); font-size:1.3rem; color:var(--color-text-light); opacity:.7; transition:opacity .3s, color .3s; }
.product-logo:hover { opacity:1; color:var(--color-black); }

/* FAQ */
.faq { padding:120px 0; background:var(--color-bone); }
.accordion { display:flex; flex-direction:column; gap:12px; }
.accordion-item { background:var(--color-white); border-radius:var(--radius-sm); overflow:hidden; }
.accordion-trigger { width:100%; display:flex; justify-content:space-between; align-items:center; padding:20px 24px; font-size:1rem; font-weight:500; text-align:left; transition:background .2s; }
.accordion-trigger:hover { background:rgba(197,160,89,0.04); }
.accordion-icon { font-size:1.3rem; color:var(--color-gold); transition:transform .3s; }
.accordion-item.open .accordion-icon { transform:rotate(45deg); }
.accordion-body { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.accordion-item.open .accordion-body { max-height:300px; }
.accordion-body p { padding:0 24px 20px; color:var(--color-text-light); font-size:.92rem; line-height:1.7; }

/* Contact */
.contact { padding:120px 0; background:var(--color-white); }
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:start; }
.contact-info p { color:var(--color-text-light); margin-bottom:32px; }
.contact-details { display:flex; flex-direction:column; gap:20px; margin-bottom:32px; }
.contact-item { display:flex; gap:14px; align-items:flex-start; }
.contact-icon { font-size:1.3rem; color:var(--color-gold); line-height:1; margin-top:2px; }
.contact-item div { display:flex; flex-direction:column; }
.contact-item strong { font-size:.82rem; text-transform:uppercase; letter-spacing:1px; color:var(--color-black); margin-bottom:2px; }
.contact-item a { color:var(--color-text); transition:color .2s; }
.contact-item a:hover { color:var(--color-gold); }
.opening-hours { background:var(--color-bone); border-radius:var(--radius-md); padding:24px; margin-bottom:28px; }
.opening-hours h4 { font-family:var(--font-serif); font-size:1.1rem; margin-bottom:14px; }
.hours-row { display:flex; justify-content:space-between; font-size:.9rem; padding:6px 0; border-bottom:1px solid #e0ddd8; }
.hours-row:last-child { border-bottom:none; }
.closed { color:#c0392b; font-weight:500; }
.social-links { display:flex; gap:12px; }
.social-links a { width:44px; height:44px; border-radius:50%; border:1px solid #ddd; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:600; transition:background .3s, border-color .3s, color .3s; }
.social-links a:hover { background:var(--color-black); color:var(--color-white); border-color:var(--color-black); }
.contact-map { border-radius:var(--radius-md); overflow:hidden; height:100%; min-height:500px; }
.contact-map iframe { width:100%; height:100%; border:0; display:block; }
@media (max-width:900px) { .contact-grid { grid-template-columns:1fr; gap:40px; } .contact-map { min-height:350px; } }

/* Footer */
.main-footer { background:var(--color-black); color:var(--color-white); padding-top:80px; overflow:hidden; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:60px; }
.footer-logo { font-family:var(--font-serif); font-size:1.5rem; display:block; margin-bottom:14px; }
.footer-brand p { color:rgba(255,255,255,0.6); font-size:.9rem; line-height:1.6; }
.footer-col h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:2px; margin-bottom:18px; color:rgba(255,255,255,0.5); }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a { color:rgba(255,255,255,0.7); font-size:.88rem; transition:color .2s; }
.footer-col a:hover { color:var(--color-gold); }
.footer-big-logo {
    font-family:var(--font-serif); font-size:clamp(3rem,12vw,10rem);
    color:rgba(255,255,255,0.04); text-align:center; line-height:1;
    white-space:nowrap; user-select:none; pointer-events:none;
}
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding:24px 0; margin-top:20px; }
.footer-bottom span { font-size:.78rem; color:rgba(255,255,255,0.4); }
@media (max-width:768px) { .footer-grid { grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:480px) { .footer-grid { grid-template-columns:1fr; } }