/* === SCROLL PROGRESS === */
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,#1a1a1a,#3a3a3a);z-index:9999;width:0%;transition:width 0.1s linear}

/* === TYPOGRAPHY === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500&display=swap');

/* === NAV === */
.nav-glass{background:rgba(250,248,245,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(26,26,26,0.06);transition:all 0.3s ease}
.nav-link{position:relative;font-size:0.75rem;letter-spacing:0.15em}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:#1a1a1a;transition:width 0.3s ease}
.nav-link:hover::after,.nav-link.active::after{width:100%}

/* === HERO === */
.hero-fade{opacity:0;transform:translateY(20px);animation:heroFadeIn 0.9s ease forwards 0.3s}
.hero-fade-delay{opacity:0;transform:translateY(20px);animation:heroFadeIn 0.9s ease forwards 0.6s}
.hero-fade-delay-2{opacity:0;transform:translateY(20px);animation:heroFadeIn 0.9s ease forwards 0.9s}
.hero-fade-delay-3{opacity:0;transform:translateY(20px);animation:heroFadeIn 0.9s ease forwards 1.1s}
@keyframes heroFadeIn{to{opacity:1;transform:translateY(0)}}

/* === CURSOR / TYPEWRITER === */
.cursor-blink{animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* === BUTTONS === */
.btn-primary{display:inline-block;background:#1a1a1a;color:#faf8f5;font-weight:500;font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.875rem 2.25rem;border-radius:2px;transition:all 0.3s ease;cursor:pointer;border:none;text-align:center}
.btn-primary:hover{background:#2a2a2a;transform:translateY(-1px);box-shadow:0 8px 24px rgba(26,26,26,0.2)}
.btn-primary:active{transform:translateY(0)}
.btn-outline{display:inline-block;background:transparent;color:#1a1a1a;font-weight:400;font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.875rem 2.25rem;border-radius:2px;border:1px solid #1a1a1a;transition:all 0.3s ease;cursor:pointer;text-align:center}
.btn-outline:hover{background:#1a1a1a;color:#faf8f5}

/* === CARDS === */
.card-3d{transform-style:preserve-3d;transition:transform 0.5s ease;box-shadow:0 4px 20px rgba(0,0,0,0.05)}
.card-3d:hover{transform:perspective(1000px) rotateX(var(--rotateX,0deg)) rotateY(var(--rotateY,0deg));box-shadow:0 20px 40px rgba(0,0,0,0.12)}

/* === SCROLL REVEAL === */
.reveal-section{opacity:0;transform:translateY(28px);transition:opacity 0.85s ease,transform 0.85s ease}
.reveal-section.revealed{opacity:1;transform:translateY(0)}

/* === PROCESS STEPS === */
.process-step{position:relative}
.process-step:not(:last-child)::after{content:'';position:absolute;top:2rem;left:calc(50% + 2rem);width:calc(100% - 4rem);height:1px;background:#e8ddd0}
@media(max-width:768px){.process-step::after{display:none}}

/* === PORTFOLIO FILTER === */
.filter-btn{padding:0.5rem 1.25rem;font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:400;border-radius:2px;border:1px solid #d5c4af;color:#3a3a3a;background:transparent;cursor:pointer;transition:all 0.25s ease}
.filter-btn:hover,.filter-btn.active{background:#1a1a1a;color:#faf8f5;border-color:#1a1a1a}

/* === SERVICE CARDS === */
.service-card{transition:all 0.3s ease}
.service-card:hover{transform:translateX(4px);box-shadow:0 4px 20px rgba(0,0,0,0.07)}

/* === TESTIMONIALS CAROUSEL === */
.carousel-track{overflow:hidden;position:relative}
.carousel-slide{display:none}
.carousel-slide.active{display:block;animation:slideIn 0.5s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:#d5c4af;cursor:pointer;transition:all 0.3s ease;border:none;padding:0}
.carousel-dot.active{background:#1a1a1a;width:24px;border-radius:4px}

/* === FAQ === */
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease, padding 0.3s ease;padding-top:0;padding-bottom:0}
.faq-item.open .faq-answer{max-height:300px;padding-bottom:1.5rem}
.faq-item.open .faq-icon{transform:rotate(180deg)}
.faq-icon{transition:transform 0.3s ease}

/* === MODALS === */
.modal-overlay{opacity:0;transition:opacity 0.3s ease}
.modal-overlay.active{opacity:1}
.modal-content{transform:translate(-50%,-50%) scale(0.96);transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s ease;opacity:0}
.modal-overlay.active .modal-content{transform:translate(-50%,-50%) scale(1);opacity:1}

/* === BACK TO TOP === */
.back-to-top{transition:opacity 0.3s ease,visibility 0.3s ease,transform 0.3s ease}
.back-to-top.visible{opacity:1!important;visibility:visible!important}
.back-to-top:hover{transform:translateY(-3px)}

/* === SCROLL ARROW === */
.scroll-arrow{animation:bounce 2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* === LAZY IMAGES === */
.lazy-img{transition:filter 0.6s ease,opacity 0.6s ease;filter:blur(6px) saturate(0.5);opacity:0.7}
.lazy-img.loaded{filter:none;opacity:1}

/* === NEWSLETTER SUCCESS === */
#newsletterSuccess.visible{display:block}

/* === SCROLLBAR === */
html{scroll-behavior:smooth}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#faf8f5}::-webkit-scrollbar-thumb{background:#d5c4af;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#1a1a1a}

/* === MOBILE MENU === */
.mobile-menu{max-height:0;overflow:hidden;transition:max-height 0.35s ease}
.mobile-menu.open{max-height:500px}

/* === COUNTERS === */
.counter{font-variant-numeric:tabular-nums}