*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0a;--bg-2:#111;--bg-3:#1a1a1a;
  --gold:#f68a24;--gold-2:#f57316;--gold-3:#d4881a;--gold-glow:rgba(244,165,42,.4);
  --text:#fff;--text-dim:#a8a8a8;--text-dim-2:#6b6b6b;
  --border:rgba(255,255,255,.06);--card:rgba(255,255,255,.02)
}
html{scroll-padding-top:80px;overflow-x:hidden;width:100%;max-width:100vw}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;width:100%;max-width:100vw;position:relative;cursor:none;line-height:1.6;-webkit-font-smoothing:antialiased}

.cursor,.cursor-follower{display:none}
@media(min-width:1025px) and (hover:hover){
  .cursor{display:block;width:8px;height:8px;background:var(--gold);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transition:transform .15s,width .3s,height .3s;box-shadow:0 0 15px var(--gold-glow);transform:translate(-50%,-50%)}
  .cursor-follower{display:block;width:36px;height:36px;border:1px solid var(--gold);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transition:transform .5s cubic-bezier(.16,1,.3,1),width .3s,height .3s;transform:translate(-50%,-50%);opacity:.4}
  .cursor.hover{width:20px;height:20px;background:transparent;border:1px solid var(--gold)}
  .cursor-follower.hover{width:60px;height:60px;opacity:.15;background:var(--gold)}
}

.loader{
  position:fixed;inset:0;
  background:radial-gradient(circle at center, #14171f 0%, #080a0e 100%);
  z-index:10000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1),visibility .35s;
  pointer-events:all;
}
.loader.hide{opacity:0;transform:scale(1.04);visibility:hidden;pointer-events:none}
.loader-logo{
  font-family:'Playfair Display',serif;font-size:clamp(1.5rem,5vw,2rem);font-weight:700;letter-spacing:3px;color:var(--gold,#f68a24);
  animation:loaderPulse .8s ease-in-out infinite alternate;
}
@keyframes loaderPulse{0%{transform:scale(.98);opacity:.85}100%{transform:scale(1.02);opacity:1;filter:drop-shadow(0 0 12px rgba(246,138,36,.4))}}
.loader-bar-wrap{width:180px;height:4px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;position:relative}
.loader-bar{width:0%;height:100%;background:linear-gradient(90deg,var(--gold,#f68a24),#ffb347);box-shadow:0 0 10px rgba(246,138,36,.8);border-radius:4px;transform-origin:left center}
.loader-percent{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--gold,#f68a24);letter-spacing:2px;min-width:55px;text-align:center}

.progress-bar{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-2));z-index:9999;width:0%;will-change:width}

header{position:fixed;top:0;left:0;right:0;padding:20px 60px;z-index:1000;transition:all .4s cubic-bezier(.16,1,.3,1);background:transparent}
header.scrolled{padding:15px 60px;background:rgba(10,10,10,.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-container{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;gap:20px;width:100%}
.nav-actions{display:flex;align-items:center;gap:15px;flex-shrink:0}
.logo{font-family:'Playfair Display',serif;font-size:clamp(1.2rem,3vw,1.6rem);font-weight:700;color:var(--text);text-decoration:none;letter-spacing:2px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.site-logo-desktop{display:inline-block;width:auto;height:auto}
.site-logo-mobile{display:none;width:auto;height:auto}
@media(max-width:768px){
  .site-logo-desktop{display:none !important}
  .site-logo-mobile{display:inline-block !important}
}
.logo-mark{width:36px;height:36px;background:linear-gradient(135deg,var(--gold),var(--gold-2));border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--bg);font-weight:900;font-family:'Inter',sans-serif;font-size:1.1rem;flex-shrink:0}
.logo-text span{color:var(--gold)}
nav ul{display:flex;list-style:none;gap:32px;align-items:center;margin:0;padding:0}
nav li{list-style:none}
nav a{color:var(--text-dim);text-decoration:none;font-weight:400;font-size:.9rem;letter-spacing:.5px;transition:color .3s;position:relative;display:inline-flex;align-items:center;gap:6px}
nav a::after{content:'';position:absolute;bottom:-8px;left:50%;width:0;height:1px;background:var(--gold);transition:all .3s;transform:translateX(-50%)}
nav a:hover{color:var(--text)}
nav a:hover::after{width:100%}
nav a.active{color:var(--gold)}
nav a.active::after{width:100%}
nav a.active .dropdown-chevron,
.dropdown-toggle.active .dropdown-chevron{color:var(--gold);opacity:1}

/* ---- Header Multi-Level Dropdowns ---- */
.nav-item-dropdown{position:relative;list-style:none}
.nav-item-link-wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.dropdown-toggle{cursor:pointer}
.dropdown-chevron{transition:transform .25s ease,color .25s ease;opacity:.7;display:inline-block;flex-shrink:0}
.nav-item-dropdown:hover > .nav-item-link-wrap > .dropdown-toggle .dropdown-chevron,
.nav-item-dropdown:hover > a .dropdown-chevron{transform:rotate(180deg);color:var(--gold);opacity:1}
.dropdown-menu{
  position:absolute;top:calc(100% + 12px);left:0;min-width:220px;
  background:rgba(14,14,14,.97);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 15px 35px rgba(0,0,0,.85),0 0 15px rgba(244,165,42,.08);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:8px;list-style:none;display:flex;flex-direction:column;gap:3px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1),visibility .22s;
  z-index:1050;margin:0;
}
.dropdown-menu::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-item-dropdown:hover > .dropdown-menu,
.nav-item-dropdown:focus-within > .dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.dropdown-menu li{list-style:none;width:100%}
.dropdown-menu li a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 14px;border-radius:8px;color:var(--text-dim);font-size:.88rem;
  text-decoration:none;transition:all .2s ease;width:100%;box-sizing:border-box;text-align:left;
}
.dropdown-menu li a::after{display:none!important}
.dropdown-menu li a:hover{
  color:var(--gold);background:rgba(244,165,42,.08);transform:translateX(3px);
}
.dropdown-menu li a.active{
  color:var(--gold);background:rgba(244,165,42,.12);font-weight:600;border-left:2px solid var(--gold);transform:translateX(3px);
}
.sub-flyout{position:relative;width:100%}
.flyout-menu{position:absolute;top:-4px;left:calc(100% + 8px);transform:translateX(8px)}
.flyout-menu::before{content:'';position:absolute;top:0;left:-10px;width:10px;bottom:0}
.sub-flyout:hover > .flyout-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0)}
.flyout-chevron{transform:rotate(0deg)!important}
.sub-flyout:hover > .nav-item-link-wrap > .dropdown-toggle .flyout-chevron{transform:translateX(3px)!important;color:var(--gold)}
.mobile-sub-toggle{display:none}
.menu-icon{color:var(--gold);font-size:.85rem;margin-right:4px}

/* ---- Language Switcher ---- */
.lang-switcher{position:relative;display:inline-flex;align-items:center}
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:20px;
  color:var(--text);font-size:.78rem;font-weight:600;cursor:pointer;
  transition:all .3s ease;letter-spacing:.5px;
}
.lang-btn:hover{border-color:var(--gold);color:var(--gold)}
.lang-btn .current-lang{font-weight:700;color:var(--gold)}
.lang-chevron{transition:transform .25s ease;opacity:.7}
.lang-btn[aria-expanded="true"] .lang-chevron{transform:rotate(180deg);color:var(--gold)}
.lang-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;min-width:140px;
  background:rgba(14,14,14,.98);border:1px solid var(--border);border-radius:10px;
  padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.85);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);display:none;flex-direction:column;gap:2px;z-index:1060;
}
.lang-dropdown.show{display:flex}
.lang-item{
  display:flex;align-items:center;justify-content:space-between;padding:6px 10px;
  border-radius:6px;color:var(--text-dim);font-size:.8rem;text-decoration:none;transition:all .2s;
}
.lang-item:hover,.lang-item.active{color:var(--gold);background:rgba(244,165,42,.1)}
.lang-badge{font-size:.68rem;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text-dim-2)}
.lang-item.active .lang-badge{border-color:var(--gold);color:var(--gold)}

.nav-cta{padding:12px 26px;background:transparent;color:var(--text);border:1px solid var(--gold);border-radius:30px;font-weight:500;font-size:.85rem;letter-spacing:1px;text-decoration:none;transition:all .4s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0}
.nav-cta:hover{background:var(--gold);color:var(--bg);box-shadow:0 10px 30px var(--gold-glow)}
.menu-toggle{display:none;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:1.4rem;cursor:pointer;padding:0;width:40px;height:40px;align-items:center;justify-content:center;line-height:1;transition:all .3s;z-index:1001}
.menu-toggle:hover{border-color:var(--gold);color:var(--gold)}

.hero{height:100vh;min-height:600px;position:relative;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s cubic-bezier(.16,1,.3,1);z-index:1;overflow:hidden}
.slide.active{opacity:1;z-index:2}
.slide-bg{position:absolute;top:-5%;left:-5%;width:110%;height:110%;background-size:cover;background-position:center;will-change:transform}
.slide-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.6) 60%,rgba(10,10,10,.95) 100%),linear-gradient(90deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,.3) 60%,transparent 100%);z-index:2}

.laser-station{position:absolute;bottom:0;left:0;right:0;height:350px;pointer-events:none;z-index:3;overflow:hidden}
.laser-head{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:60px;height:100px;background:linear-gradient(180deg,#444,#222);border-radius:8px 8px 3px 3px;box-shadow:inset 0 -20px 30px rgba(0,0,0,.5),0 5px 15px rgba(0,0,0,.6);opacity:0}
.laser-head::before{content:'';position:absolute;top:15px;left:50%;transform:translateX(-50%);width:40px;height:8px;background:#666;border-radius:2px}
.laser-head::after{content:'';position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:20px;height:25px;background:linear-gradient(180deg,#333,#111);border-radius:3px;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.laser-beam{position:absolute;top:130px;left:50%;transform:translateX(-50%);width:2px;height:90px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,235,59,.8) 40%,rgba(255,152,0,.6));box-shadow:0 0 10px #fff,0 0 20px #ffeb3b,0 0 40px #ff9800;opacity:0;animation:laserBeam .15s 1.5s infinite}
@keyframes laserBeam{0%,100%{opacity:1;transform:translateX(-50%) scaleY(1)}50%{opacity:.7;transform:translateX(-50%) scaleY(.95)}}
.laser-plate{position:absolute;bottom:40px;left:-10%;right:-10%;height:25px;background:linear-gradient(180deg,#3a3a3a,#2a2a2a 40%,#1a1a1a);box-shadow:0 -3px 10px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.1);opacity:0}
.laser-plate::before{content:'';position:absolute;top:-5px;left:0;right:0;height:5px;background:linear-gradient(180deg,#555,#333)}
.laser-cut-point{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);width:40px;height:15px;background:radial-gradient(ellipse,#fff,#ffeb3b 20%,#ff9800 50%,transparent 90%);border-radius:50%;filter:blur(3px);opacity:0;animation:cutGlow .15s 1.5s infinite}
@keyframes cutGlow{0%,100%{transform:translateX(-50%) scale(1);opacity:1}50%{transform:translateX(-50%) scale(1.3);opacity:.8}}
.laser-halo{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.4),rgba(255,235,59,.3) 15%,rgba(255,152,0,.2) 35%,rgba(255,87,34,.1) 55%,transparent 80%);border-radius:50%;filter:blur(20px);opacity:0;animation:haloPulse 2s 1.5s ease-in-out infinite}
@keyframes haloPulse{0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.15)}}
.laser-reflection{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);width:350px;height:20px;background:radial-gradient(ellipse,rgba(255,152,0,.5),rgba(255,87,34,.2) 50%,transparent 80%);border-radius:50%;filter:blur(8px);opacity:0;animation:reflectPulse .15s 1.5s infinite}
@keyframes reflectPulse{0%,100%{opacity:.8;transform:translateX(-50%) scaleX(1)}50%{opacity:1;transform:translateX(-50%) scaleX(1.1)}}
.laser-sparks-container{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);width:10px;height:10px;pointer-events:none}
.laser-spark{position:absolute;top:0;left:50%;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 4px #fff,0 0 8px #ffeb3b,0 0 15px #ff9800,0 0 25px #ff5722;pointer-events:none;opacity:0;will-change:transform,opacity}
@keyframes sparkShoot{0%{transform:translate(0,0) scale(1);opacity:1;background:#fff;box-shadow:0 0 4px #fff,0 0 8px #ffeb3b,0 0 15px #ff9800}20%{opacity:1;background:#ffeb3b}60%{opacity:1;background:#ff9800;box-shadow:0 0 3px #ff9800,0 0 6px #ff5722}100%{transform:translate(var(--end-x),var(--end-y)) scale(.1);opacity:0;background:#ff5722;box-shadow:0 0 1px #ff5722}}

.slide-content{position:relative;z-index:4;height:100%;display:flex;align-items:center;padding:100px 60px 200px;max-width:1400px;margin:0 auto}
.slide-inner{max-width:720px}
.slide-badge{display:inline-flex;align-items:center;gap:12px;margin-bottom:25px;opacity:0;transform:translateY(20px)}
.slide-badge-line{width:40px;height:1px;background:var(--gold)}
.slide-badge-text{color:var(--gold);font-size:clamp(.7rem,1.5vw,.8rem);letter-spacing:3px;text-transform:uppercase;font-weight:500}
.slide h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,7vw,5.8rem);font-weight:700;line-height:1;margin-bottom:20px;letter-spacing:-1px;opacity:0;transform:translateY(30px);text-transform:uppercase}
.slide h1 em{font-style:normal;display:block;background:linear-gradient(135deg,var(--gold),var(--gold-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.slide-desc{font-size:clamp(.9rem,1.8vw,1.05rem);color:var(--text-dim);max-width:500px;margin-bottom:30px;opacity:0;transform:translateY(30px);line-height:1.7}
.slide-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:25px;opacity:0;transform:translateY(30px)}
.slide-rating{display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(30px);flex-wrap:wrap}

.slide.active .slide-badge,
.slide.active .slide h1,
.slide.active .slide-desc,
.slide.active .slide-actions,
.slide.active .slide-rating{
  opacity:1;
  transform:none;
}
.btn-primary, .proj-cta-btn{padding:14px 26px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--bg);border-radius:10px;text-decoration:none;font-weight:700;font-size:clamp(.8rem,1.5vw,.9rem);transition:all .4s;display:inline-flex;align-items:center;gap:10px;border:none;white-space:nowrap;position:relative;overflow:hidden}
.btn-primary .btn-ripple, .proj-cta-btn .btn-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.btn-primary:hover, .proj-cta-btn:hover{transform:translateY(-3px);box-shadow:0 15px 40px var(--gold-glow);color:var(--bg)}
.btn-ghost{padding:14px 26px;background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.25);border-radius:10px;text-decoration:none;font-weight:600;font-size:clamp(.8rem,1.5vw,.9rem);transition:all .4s;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-primary svg, .btn-ghost svg, .nav-cta svg, .service-link svg, .product-card-link svg, .more-btn svg, .blog-slide-read svg{transition:transform .3s ease;flex-shrink:0}
.btn-primary:hover svg, .btn-ghost:hover svg, .nav-cta:hover svg, .service-link:hover svg, .product-card:hover .product-card-link svg, .product-card-more:hover .more-btn svg, .blog-slide:hover .blog-slide-read svg{transform:translateX(4px)}
.slide-rating{display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(30px);flex-wrap:wrap}
.rating-stars{color:var(--gold);font-size:clamp(.9rem,2vw,1.1rem);letter-spacing:2px}
.rating-text{color:var(--text-dim);font-size:clamp(.8rem,1.5vw,.9rem)}

.slider-nav{position:absolute;bottom:90px;left:60px;right:60px;z-index:5;display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;gap:15px}
.slider-dots{display:flex;gap:12px;align-items:center}
.slider-dot{width:35px;height:2px;background:rgba(255,255,255,.2);border:none;cursor:pointer;padding:0;position:relative;overflow:hidden;transition:background .3s}
.slider-dot::before{content:'';position:absolute;top:0;left:0;height:100%;width:0;background:var(--gold);transition:width 0s}
.slider-dot.active::before{width:100%;transition:width 7s linear}
.slider-counter{display:flex;align-items:center;gap:12px;color:var(--text);font-family:'Playfair Display',serif}
.slider-current{font-size:1.8rem;font-weight:700;color:var(--gold)}
.slider-divider{width:30px;height:1px;background:rgba(255,255,255,.3)}
.slider-total{font-size:.9rem;color:var(--text-dim)}
.slider-arrows{display:flex;gap:10px}
.slider-arrow{width:45px;height:45px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);font-size:1rem}
.slider-arrow:hover{background:var(--gold);color:var(--bg);border-color:var(--gold)}

.marquee{position:absolute;bottom:0;left:0;right:0;z-index:5;background:rgba(10,10,10,.6);backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:18px 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;animation:marqueeScroll 40s linear infinite;gap:60px;padding-left:30px}
.marquee-item{display:inline-flex;align-items:center;gap:60px;font-size:.85rem;font-weight:600;letter-spacing:3px;color:var(--text);text-transform:uppercase;flex-shrink:0}
.marquee-item::after{content:'';width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 10px var(--gold)}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(hover:hover) and (pointer:fine){
  .marquee:hover .marquee-track{animation-play-state:paused}
}

section{padding:100px 0;position:relative}
.container{width:100%;max-width:1400px;margin:0 auto;padding-left:30px;padding-right:30px;box-sizing:border-box}

.section-header, .reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-header{text-align:center;margin-bottom:90px}
.reveal-left{transform:none}
.reveal-right{transform:none}
.reveal-scale{transform:none}

.section-header.visible,
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible{
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .section-header, .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .product-card, .service-card, .value-card, .team-card, .timeline-item,
  .process-step, .stat, .about-feature, .contact-item,
  .gallery-card, .proj-showcase-slide, .proj-hero-visual, .ref-slide-inner, .ref-card-item, .blog-slide,
  .slide .slide-badge, .slide h1, .slide .slide-desc, .slide .slide-actions, .slide .slide-rating {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    visibility: visible !important;
  }
}
.section-tag{display:inline-flex;align-items:center;gap:12px;color:var(--gold);font-size:clamp(.7rem,1.5vw,.8rem);letter-spacing:4px;text-transform:uppercase;font-weight:500;margin-bottom:25px}
.section-tag::before,.section-tag::after{content:'';width:30px;height:1px;background:var(--gold)}
.section-header h2{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,5vw,3.8rem);font-weight:700;line-height:1.15;margin-bottom:20px;letter-spacing:-1px}
.section-header h2 em{font-style:italic;color:var(--gold)}
.section-header p{color:var(--text-dim);max-width:600px;margin:0 auto;font-size:clamp(.9rem,1.8vw,1.05rem)}

.icon-svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

.about{background:linear-gradient(180deg,var(--bg),var(--bg-2));position:relative}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-img-wrap{position:relative}
.about-img-main{aspect-ratio:4/5;border-radius:8px;overflow:hidden;position:relative}
.about-img-main img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.about-img-wrap:hover .about-img-main img{transform:scale(1.08)}
.about-img-frame{position:absolute;top:20px;left:20px;right:-20px;bottom:-20px;border:1px solid var(--gold);border-radius:8px;z-index:-1}
.about-experience{position:absolute;bottom:-30px;right:-30px;background:var(--bg-3);border:1px solid var(--border);padding:25px 30px;border-radius:8px;text-align:center;z-index:2}
.about-experience .num{font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;color:var(--gold);line-height:1;display:block}
.about-experience .txt{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;margin-top:8px}
.about-text .section-tag{margin-bottom:20px}
.about-text h2{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;line-height:1.15;margin-bottom:25px;letter-spacing:-1px}
.about-text h2 em{font-style:italic;color:var(--gold)}
.about-text>p{color:var(--text-dim);margin-bottom:20px;font-size:clamp(.9rem,1.5vw,1rem)}
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:35px}
.about-feature{display:flex;gap:15px;align-items:flex-start}
.about-feature-icon{width:42px;height:42px;background:rgba(244,165,42,.1);border:1px solid rgba(244,165,42,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
.about-feature-icon svg{width:18px;height:18px}
.about-feature h4{font-size:.95rem;font-weight:600;margin-bottom:4px}
.about-feature p{font-size:.85rem;color:var(--text-dim);margin:0}

/* ===== SERVICE TABS & FILTERS (CAPSULE SEGMENTED CONTROL) ===== */
.services{background:var(--bg);position:relative}
.service-tabs-wrap, .filter-bar-wrap, .gallery-filters-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:0 0 38px;
  position:relative;
  z-index:2;
  text-align:center;
}
.service-tabs, .filter-bar, .gallery-filters{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  margin:0 auto 38px;
  padding:5px 6px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:50px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:none !important;
  position:relative;
  z-index:2;
  width:fit-content;
  max-width:100%;
}
.service-tabs a, .service-tabs button,
.filter-bar a, .filter-bar button,
.gallery-filters a, .gallery-filters button,
.service-tab-btn, .filter-btn{
  padding:9px 20px;
  background:transparent;
  border:1px solid transparent;
  color:var(--text-dim);
  border-radius:40px;
  font-family:inherit;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.3px;
  cursor:pointer;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  outline:none;
  text-decoration:none !important;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  transition:color .22s ease,background-color .22s ease,border-color .22s ease;
  white-space:nowrap;
  box-shadow:none !important;
}
.service-tabs a:hover, .service-tabs button:hover,
.filter-bar a:hover, .filter-bar button:hover,
.gallery-filters a:hover, .gallery-filters button:hover,
.service-tab-btn:hover, .filter-btn:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.1);
  color:#fff;
  text-decoration:none !important;
}
.service-tabs a.active, .service-tabs button.active,
.filter-bar a.active, .filter-bar button.active,
.gallery-filters a.active, .gallery-filters button.active,
.service-tab-btn.active, .filter-btn.active{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%);
  color:#0a0a0a !important;
  border-color:rgba(245,121,25,.6);
  box-shadow:none !important;
  font-weight:700;
  text-decoration:none !important;
}
.service-cat-tag{display:inline-block;padding:3px 10px;background:rgba(244,165,42,.1);border:1px solid rgba(244,165,42,.25);border-radius:15px;font-size:.65rem;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;width:fit-content}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.service-card{padding:40px 30px;background:var(--bg);transition:all .5s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 0%,var(--gold-glow),transparent 60%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:1}
.service-card:hover{background:var(--bg-2)}
.service-card:hover::before{opacity:1}
.service-card.hidden{display:none !important}
.service-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;position:relative;z-index:3}
.service-num{font-family:'Playfair Display',serif;font-size:1rem;color:var(--gold);letter-spacing:3px}
.service-head{display:block;margin-bottom:14px;position:relative;z-index:3}
.service-icon{width:55px;height:55px;background:rgba(244,165,42,.08);border:1px solid rgba(244,165,42,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:18px;transition:all .5s cubic-bezier(.16,1,.3,1)}
.service-card:hover .service-icon{transform:translateY(-4px);background:var(--gold);color:var(--bg);box-shadow:0 8px 20px var(--gold-glow)}
.service-card h3, .service-card .service-title{font-family:'Playfair Display',serif;font-size:clamp(1.2rem,2.5vw,1.6rem);font-weight:600;margin-bottom:12px;line-height:1.3;position:relative;z-index:3}
.service-card h3 a, .service-card .service-title a{color:inherit;text-decoration:none;position:relative;z-index:4;cursor:pointer}
.service-card h3 a:hover, .service-card .service-title a:hover{color:var(--gold)}
.service-card p{color:var(--text-dim);font-size:.9rem;margin-bottom:25px;min-height:50px;line-height:1.6;position:relative;z-index:3}
.service-link{display:inline-flex;align-items:center;gap:12px;color:var(--gold);font-size:.8rem;text-transform:uppercase;letter-spacing:2px;font-weight:600;text-decoration:none;transition:gap .3s;position:relative;z-index:5;cursor:pointer;pointer-events:auto}
.service-card:hover .service-link{gap:20px}

/* ===== PRODUCTS & CATEGORIES SHOWCASE ===== */
.products-section{background:var(--bg)}
.products{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);position:relative;padding:80px 0}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative;z-index:2}

/* Product & Category Card Base */
.product-card, .category-card{
  background:linear-gradient(160deg,rgba(25,25,25,0.7) 0%,rgba(14,14,14,0.95) 100%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  overflow:hidden;
  transition:all .5s cubic-bezier(.16,1,.3,1);
  position:relative;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--text);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.product-card::before, .category-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:100%;
  background:radial-gradient(circle at 50% 0%,var(--gold-glow),transparent 65%);
  opacity:0;
  transition:opacity .5s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  z-index:1;
}
.product-card:hover, .category-card:hover{
  transform:translateY(-8px);
  border-color:rgba(246,138,36,0.5);
  box-shadow:0 20px 45px rgba(0,0,0,0.8),0 0 30px rgba(246,138,36,0.15);
}
.product-card:hover::before, .category-card:hover::before{
  opacity:.2;
}

/* Card Image Area */
.product-card-img{
  aspect-ratio:16/10;
  overflow:hidden;
  position:relative;
  background:#121212;
  width:100%;
  display:block;
  margin:0;
  padding:0;
}
.product-card-img::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:40%;
  background:linear-gradient(180deg,transparent 0%,rgba(14,14,14,0.85) 100%);
  pointer-events:none;
  z-index:1;
}
.product-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .6s ease;
  filter:brightness(.92);
  margin:0;
  padding:0;
  border:none;
}
.product-card:hover .product-card-img img, .category-card:hover .product-card-img img{
  transform:scale(1.08);
  filter:brightness(1);
}

/* ===== PRODUCT DETAIL 2-COLUMN & TABS SYSTEM ===== */
.product-detail-layout{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:40px;
  align-items:start;
}
@media(max-width:991px){
  .product-detail-layout{grid-template-columns:1fr;gap:30px}
}

.product-detail-card{
  background:linear-gradient(160deg,rgba(22,22,22,0.85) 0%,rgba(14,14,14,0.98) 100%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:32px;
  box-shadow:0 20px 50px rgba(0,0,0,0.6);
  position:relative;
}
@media(max-width:768px){
  .product-detail-card{padding:14px 8px;border-radius:14px}
}
@media(max-width:576px){
  .product-detail-card{padding:8px 5px;border-radius:10px}
}

.product-gallery-container{
  display:flex;
  flex-direction:column;
  gap:16px;
  position:sticky;
  top:95px;
}
.product-main-stage{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  max-height:450px;
  background:#141414;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  cursor:pointer;
}
.product-main-stage img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.product-main-stage:hover img{
  transform:scale(1.05);
}
.product-main-stage .gallery-zoom-badge{
  position:absolute;
  bottom:16px;
  right:16px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(10,10,10,0.75);
  border:1px solid rgba(246,138,36,0.4);
  color:var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:0.95rem;
  transition:all 0.3s ease;
  z-index:3;
  pointer-events:none;
}
.product-main-stage:hover .gallery-zoom-badge{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#0a0a0a;
  transform:scale(1.1);
  box-shadow:0 0 15px var(--gold-glow);
}

.product-thumbs-slider{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  width:100%;
}
.product-thumbs-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:4px 2px 8px;
  width:100%;
  scrollbar-width:thin;
  scrollbar-color:rgba(246,138,36,0.3) transparent;
}
.product-thumbs-track::-webkit-scrollbar{
  height:4px;
}
.product-thumbs-track::-webkit-scrollbar-thumb{
  background:rgba(246,138,36,0.3);
  border-radius:4px;
}
.gallery-thumb-item{
  flex:0 0 82px;
  width:82px;
  height:82px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,0.12);
  background:#141414;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  opacity:0.65;
  padding:0;
  outline:none;
}
.gallery-thumb-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.4s ease;
}
.gallery-thumb-item:hover{
  opacity:1;
  border-color:rgba(246,138,36,0.5);
  transform:translateY(-2px);
}
.gallery-thumb-item.active{
  opacity:1;
  border-color:var(--gold);
  box-shadow:0 0 15px var(--gold-glow);
  transform:scale(1.04);
}
.thumb-arrow-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
  color:var(--text-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.3s ease;
  flex-shrink:0;
  outline:none;
}
.thumb-arrow-btn:hover{
  background:var(--gold);
  color:#0a0a0a;
  border-color:var(--gold);
  box-shadow:0 0 10px var(--gold-glow);
}

/* Product Info Elements */
.product-info-box{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.product-meta-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.product-stock-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 14px;
  background:rgba(246,138,36,0.08);
  border:1px solid rgba(246,138,36,0.3);
  border-radius:20px;
  font-size:0.75rem;
  font-weight:700;
  color:var(--gold-2, #ffb167);
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.product-stock-status .pulse-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold, #f68a24);
  box-shadow:0 0 8px var(--gold-glow, rgba(244,165,42,0.4));
  animation:stockPulse 2s infinite;
}
@keyframes stockPulse{
  0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(246,138,36,0.6)}
  70%{transform:scale(1);box-shadow:0 0 0 6px rgba(246,138,36,0)}
  100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(246,138,36,0)}
}

.product-quick-specs{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
@media(max-width:576px){
  .product-quick-specs{grid-template-columns:1fr}
}
.product-quick-spec-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 8px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:10px;
  font-size:0.74rem;
  color:var(--text);
}
.product-quick-spec-item i{
  color:var(--gold);
  font-size:0.95rem;
}

.product-trust-badges{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:15px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.06);
}
@media(max-width:576px){
  .product-trust-badges{grid-template-columns:1fr}
}
.product-trust-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.78rem;
  font-weight:600;
  color:var(--text-dim);
}
.product-trust-item i{
  color:var(--gold);
  font-size:0.9rem;
}

.product-action-box{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.btn-whatsapp-quote{
  background:#25d366;
  color:#fff !important;
  border:none;
  font-weight:700;
  border-radius:30px;
  padding:14px 28px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none !important;
  transition:all 0.3s ease;
  box-shadow:0 6px 20px rgba(37,211,102,0.3);
}
.btn-whatsapp-quote i{
  font-size:1.25rem;
  color:#fff;
}
.btn-whatsapp-quote:hover{
  background:#20ba5a;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(37,211,102,0.45);
}

/* ===== PRODUCT TABS SYSTEM (ALT ALAN) ===== */
.product-tabs-wrapper{
  margin-top:55px;
}
.product-tabs-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:25px;
}
.product-tab-btn{
  padding:11px 24px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-dim);
  border-radius:40px;
  font-size:0.88rem;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all 0.25s ease;
  outline:none;
}
.product-tab-btn:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.15);
  color:#fff;
}
.product-tab-btn.active{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%);
  color:#0a0a0a !important;
  border-color:rgba(244,165,42,0.6);
  font-weight:700;
  box-shadow:0 4px 18px var(--gold-glow);
}
.product-tab-pane{
  display:none;
  background:linear-gradient(160deg,rgba(22,22,22,0.85) 0%,rgba(14,14,14,0.98) 100%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:35px;
  box-shadow:0 20px 50px rgba(0,0,0,0.6);
  animation:tabFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-tab-pane.active{
  display:block;
}
@media(max-width:768px){
  .product-tab-pane{padding:14px 8px;border-radius:14px}
}
@media(max-width:576px){
  .product-tab-pane{padding:8px 5px;border-radius:10px}
}
@keyframes tabFadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* Tab 1: Description & Advantages Card Grid */
.product-desc-grid{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:35px;
  align-items:start;
}
@media (max-width: 991px){
  .product-desc-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
}
.product-tab-title{
  color:#ffffff;
  font-family:'Playfair Display',serif;
  font-size:clamp(1.25rem, 2vw, 1.6rem);
  font-weight:700;
  margin-bottom:16px;
  line-height:1.3;
}
.product-tab-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(244, 165, 42, 0.35));
  display: inline-block;
}
.product-article-body{
  color:#e2e8f0;
  font-size:0.98rem;
  line-height:1.85;
}
.product-article-body p{
  margin-bottom:14px;
}
.product-article-body strong {
  color: #ffffff;
  font-weight: 600;
}
.product-article-body ul {
  padding-left: 20px;
  margin-bottom: 18px;
}
.product-article-body li {
  margin-bottom: 8px;
  color: #cbd5e1;
}
.product-article-body li strong {
  color: #f8fafc;
}
.product-article-body p:last-child{
  margin-bottom:0;
}
.product-advantages-card{
  background:linear-gradient(145deg, rgba(30, 24, 15, 0.65) 0%, rgba(18, 18, 18, 0.95) 100%);
  border:1px solid rgba(246, 138, 36, 0.28);
  border-radius:18px;
  padding:26px;
  box-shadow:0 12px 35px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative;
  overflow:hidden;
}
@media(max-width:768px){
  .product-advantages-card{padding:14px 10px;border-radius:12px}
}
@media(max-width:576px){
  .product-advantages-card{padding:10px 8px;border-radius:10px}
}
.product-advantages-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-2), transparent);
}
.product-advantages-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(244, 165, 42, 0.16);
}
.product-advantages-header i{
  color:var(--gold-2);
  font-size:1.15rem;
  filter:drop-shadow(0 0 8px var(--gold-glow));
}
.product-advantages-header h5{
  margin:0;
  font-family:'Playfair Display',serif;
  font-size:1.08rem;
  font-weight:700;
  color:#ffffff;
}
.product-advantages-list{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.product-advantages-list li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:0.92rem;
  color:#cbd5e1;
  line-height:1.55;
}
.adv-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(244, 165, 42, 0.14);
  border:1px solid rgba(244, 165, 42, 0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
  color:var(--gold-2);
  font-size:0.7rem;
}
.adv-text{
  flex:1;
}

.list-unstyled{
  list-style:none !important;
  padding-left:0 !important;
  margin-left:0 !important;
}

/* Specifications Table */
.product-specs-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}
.product-specs-table th, .product-specs-table td{
  padding:14px 20px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:0.9rem;
}
.product-specs-table th{
  background:rgba(246,138,36,0.08);
  color:var(--gold-2);
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:0.98rem;
  letter-spacing:0.5px;
}
.product-specs-table tr:nth-child(even) td{
  background:rgba(255,255,255,0.015);
}
.product-specs-table tr:hover td{
  background:rgba(246,138,36,0.04);
}
.product-specs-table td:first-child{
  font-weight:600;
  color:var(--text);
  width:35%;
}
.product-specs-table td:last-child{
  color:var(--text-dim);
}
@media(max-width:768px){
  .product-specs-table th, .product-specs-table td{
    padding:10px 8px;
    font-size:0.84rem;
  }
}
@media(max-width:576px){
  .product-specs-table th, .product-specs-table td{
    padding:8px 5px;
    font-size:0.78rem;
  }
  .product-specs-table td:first-child{
    width:40%;
  }
}

/* Video Player Frame */
.product-video-wrapper{
  position:relative;
  width:100%;
  max-width:860px;
  margin:0 auto;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 15px 40px rgba(0,0,0,0.8);
  background:#0a0a0a;
  margin-top: 20px;
}
.product-video-wrapper iframe, .product-video-wrapper video{
  width:100%;
  height:100%;
  border:none;
  display:block;
}

/* Related Products Section */
.related-products-section{
  margin-top:85px;
  padding-top:65px;
  border-top:1px solid rgba(255,255,255,0.08);
  position:relative;
}
.related-products-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:35px;
  flex-wrap:wrap;
}
.related-products-title-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.related-products-title-wrap .service-cat-tag{
  margin-bottom:0;
}
.related-products-title-wrap h3{
  margin:0;
  font-size:clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight:700;
  color:#fff;
  font-family:'Playfair Display',serif;
}
.related-products-header .product-card-link{
  width:auto;
  padding-top:0;
  border-top:none;
  margin-top:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Card Floating Badge */
.product-card-badge{
  position:absolute;
  top:14px;
  left:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 14px;
  background:rgba(10,10,10,0.82);
  border:1px solid rgba(246,138,36,0.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:20px;
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  font-weight:700;
  line-height:1.2;
  color:var(--gold-2);
  letter-spacing:.5px;
  text-transform:uppercase;
  box-shadow:0 4px 15px rgba(0,0,0,0.5);
  z-index:2;
  white-space:nowrap;
  pointer-events:none;
  transition:all .3s ease;
}
.product-card:hover .product-card-badge, .category-card:hover .product-card-badge{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#0a0a0a;
  border-color:var(--gold);
  box-shadow:0 4px 15px var(--gold-glow);
}

/* Card Body */
.product-card-body{
  padding:24px 24px 20px;
  display:flex;
  flex-direction:column;
  flex-grow:1;
  position:relative;
  z-index:2;
}
.category-card-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.category-icon-pill{
  width:32px;
  height:32px;
  border-radius:8px;
  background:rgba(246,138,36,0.1);
  border:1px solid rgba(246,138,36,0.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font-size:.85rem;
  flex-shrink:0;
}
.product-card-body h3{
  font-family:'Playfair Display',serif;
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:10px;
  color:var(--text);
  line-height:1.35;
  transition:color .3s ease;
}
.product-card-body h3 a{
  color:inherit;
  text-decoration:none;
  transition:color .3s ease;
}
.product-card:hover .product-card-body h3 a,
.category-card:hover .product-card-body h3 a{
  color:var(--gold);
}
.product-card-body p{
  color:var(--text-dim);
  font-size:.88rem;
  margin-bottom:18px;
  line-height:1.65;
  flex-grow:1;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Card Specs */
.product-card-specs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.product-spec{
  padding:4px 10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:6px;
  font-size:.75rem;
  color:var(--text-dim);
  letter-spacing:.3px;
  transition:all .2s ease;
}
.product-card:hover .product-spec{
  border-color:rgba(246,138,36,0.25);
  background:rgba(246,138,36,0.06);
  color:#e2e2e2;
}

/* Card Action Link / Button */
.product-card-link{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  color:var(--gold);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:700;
  text-decoration:none;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.06);
  transition:all .3s ease;
}
.product-card-link .link-arrow{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(246,138,36,0.1);
  border:1px solid rgba(246,138,36,0.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.product-card:hover .product-card-link,
.category-card:hover .product-card-link{
  color:#fff;
}
.product-card:hover .product-card-link .link-arrow,
.category-card:hover .product-card-link .link-arrow{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#0a0a0a;
  border-color:var(--gold);
  transform:translateX(4px);
  box-shadow:0 0 15px var(--gold-glow);
}
.product-card.hidden{display:none !important}

/* Product & Category Empty States */
.product-empty-state, .product-card-more{
  background:linear-gradient(145deg,rgba(25,25,25,0.8),rgba(14,14,14,0.95));
  border:1px dashed rgba(246,138,36,0.4);
  border-radius:16px;
  padding:50px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  text-decoration:none;
  color:var(--text);
  transition:all .4s;
  max-width:600px;
  margin:40px auto;
  min-height:280px;
  backdrop-filter:blur(10px);
}
.product-empty-state:hover, .product-card-more:hover{
  border-color:var(--gold);
  background:linear-gradient(145deg,rgba(30,30,30,0.95),rgba(18,18,18,0.98));
  box-shadow:0 15px 40px var(--gold-glow);
}
.product-empty-state .more-icon, .product-card-more .more-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#0a0a0a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  margin-bottom:20px;
  box-shadow:0 6px 20px var(--gold-glow);
  transition:transform .3s;
}
.product-empty-state:hover .more-icon, .product-card-more:hover .more-icon{
  transform:scale(1.1);
}
.product-empty-state h3, .product-card-more h3{
  font-family:'Playfair Display',serif;
  font-size:1.4rem;
  font-weight:700;
  margin-bottom:10px;
  color:var(--text);
}
.product-empty-state p, .product-card-more p{
  color:var(--text-dim);
  font-size:.92rem;
  margin-bottom:20px;
  max-width:460px;
  line-height:1.6;
}

/* Parallax Watermark Text */
.parallax-text{position:absolute;font-family:'Playfair Display',serif;font-size:clamp(4.5rem,14vw,11rem);font-weight:900;color:rgba(255,255,255,.025);white-space:nowrap;pointer-events:none;user-select:none;z-index:0;letter-spacing:6px}
.parallax-text.top-right{top:6%;right:-2%}
.parallax-text.top-left{top:6%;left:-2%}
.parallax-text.bottom-left{bottom:6%;left:-2%}
.parallax-text.bottom-right{bottom:6%;right:-2%}
@media(max-width:768px){.parallax-text{display:none}}

/* ===== PROJECTS SHOWCASE ===== */

.proj-showcase-section{background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);overflow:hidden}
.proj-ambient-glow{position:absolute;top:40%;left:30%;width:800px;height:800px;background:radial-gradient(circle,rgba(244,165,42,.06),transparent 70%);filter:blur(90px);pointer-events:none}

.proj-nav-bar{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin:-40px 0 35px;position:relative;z-index:2}
.proj-counter{display:flex;align-items:baseline;gap:4px;font-family:'Playfair Display',serif;margin-right:8px}
.proj-curr{font-size:1.6rem;font-weight:700;color:var(--gold)}
.proj-sep{color:var(--text-dim-2);font-size:.9rem}
.proj-tot{font-size:.9rem;color:var(--text-dim-2)}

.proj-nav-btns{display:flex;gap:10px}
.proj-arrow-btn{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .35s cubic-bezier(.16,1,.3,1);outline:none}
.proj-arrow-btn:hover{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--bg);border-color:var(--gold);box-shadow:0 6px 25px var(--gold-glow);transform:scale(1.08)}

.proj-showcase-container{position:relative;width:100%;z-index:1}
.proj-slider-viewport{width:100%;overflow:hidden;position:relative}
.proj-slider-slides{display:flex;width:100%;transition:transform .55s cubic-bezier(.16,1,.3,1)}

.proj-showcase-slide{flex:0 0 100%;width:100%;min-width:100%;max-width:100%;box-sizing:border-box;opacity:.25;transition:opacity .45s ease;display:block}
.proj-showcase-slide.active{opacity:1}

.proj-hero-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:50px;align-items:center}

.proj-hero-visual-wrap{position:relative;width:100%}
.proj-hero-visual{position:relative;border-radius:20px;overflow:hidden;display:block;border:1px solid var(--border);box-shadow:0 20px 50px rgba(0,0,0,.6);transition:all .6s cubic-bezier(.16,1,.3,1);aspect-ratio:16/11;background:#141414;text-decoration:none}
.proj-hero-visual:hover{transform:translateY(-6px);border-color:rgba(244,165,42,.45);box-shadow:0 25px 60px rgba(0,0,0,.8),0 0 30px rgba(244,165,42,.15)}
.proj-hero-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s;filter:brightness(.92) contrast(1.05)}
.proj-hero-visual:hover img{transform:scale(1.07);filter:brightness(1) contrast(1.1)}
.proj-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.05) 0%,transparent 40%,rgba(10,10,10,.6) 100%);pointer-events:none}

.proj-featured-badge{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:7px;padding:7px 16px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#0a0a0a;border-radius:30px;font-size:.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;box-shadow:0 6px 20px rgba(0,0,0,.45);z-index:2;pointer-events:none}
.proj-visual-hover-icon{position:absolute;bottom:20px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(10,10,10,.8);backdrop-filter:blur(10px);border:1px solid rgba(244,165,42,.4);color:var(--gold);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:all .4s cubic-bezier(.16,1,.3,1);z-index:2}
.proj-hero-visual:hover .proj-visual-hover-icon{opacity:1;transform:scale(1)}

.proj-hero-content{display:flex;flex-direction:column}
.proj-tag-line{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px}
.proj-tag-bar{width:24px;height:1px;background:var(--gold);opacity:.75}
.proj-tag-text{color:var(--gold);font-size:.76rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase}

.proj-hero-title{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:700;line-height:1.25;margin-bottom:16px}
.proj-hero-title a{color:var(--text);text-decoration:none;transition:color .3s}
.proj-hero-title a:hover{color:var(--gold-2)}
.proj-hero-title em{font-style:italic;color:var(--gold);font-family:'Playfair Display',serif}

.proj-hero-desc{color:var(--text-dim);font-size:.92rem;line-height:1.7;margin-bottom:28px;max-width:540px}

.proj-specs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px;margin-bottom:32px}
.proj-spec-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:12px;transition:all .3s}
.proj-spec-item:hover{border-color:rgba(244,165,42,.3);background:rgba(255,255,255,.04)}
.proj-spec-icon{width:38px;height:38px;border-radius:50%;background:rgba(244,165,42,.08);border:1px solid rgba(244,165,42,.2);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.proj-spec-info{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.proj-spec-label{color:var(--text-dim-2);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.proj-spec-value{color:var(--text);font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.proj-hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.proj-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:35px}
.proj-dot{width:28px;height:3px;background:rgba(255,255,255,.15);border-radius:3px;border:none;cursor:pointer;transition:all .4s;padding:0}
.proj-dot.active{background:var(--gold);width:45px;box-shadow:0 0 10px var(--gold-glow)}

@media(max-width:991px){
  .proj-showcase-section{padding:60px 0}
  .proj-hero-grid{grid-template-columns:1fr;gap:25px}
  .proj-section-head{flex-direction:column;align-items:flex-start;gap:18px}
  .proj-hero-title{font-size:clamp(1.3rem,5vw,1.85rem);line-height:1.25;margin-bottom:12px}
  .proj-hero-desc{font-size:.85rem;line-height:1.6;margin-bottom:20px}
}
@media(max-width:768px){
  .proj-nav-bar{margin:-20px 0 20px}
  .proj-hero-visual{aspect-ratio:16/10;border-radius:16px}
  .proj-specs-grid{grid-template-columns:repeat(2,1fr);gap:8px 10px;margin-bottom:20px}
  .proj-spec-item{padding:9px 11px;gap:9px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
  .proj-spec-icon{width:32px;height:32px;border-radius:8px}
  .proj-spec-icon svg{width:15px;height:15px}
  .proj-spec-label{font-size:.62rem;letter-spacing:.5px}
  .proj-spec-value{font-size:.8rem}
  .proj-hero-actions{display:flex;flex-direction:row;gap:10px;width:100%}
  .proj-hero-actions .btn-primary,
  .proj-hero-actions .btn-ghost{flex:1;min-width:0;padding:12px 14px;font-size:.8rem;justify-content:center;white-space:nowrap;border-radius:30px}
  .proj-dots{margin-top:22px}
}
@media(max-width:480px){
  .proj-tag-line{gap:8px;margin-bottom:8px}
  .proj-tag-bar{width:18px}
  .proj-tag-text{font-size:.7rem;letter-spacing:2px}
  .proj-hero-title{font-size:1.35rem;line-height:1.26;margin-bottom:10px}
  .proj-hero-desc{font-size:.82rem;line-height:1.55;margin-bottom:16px}
  .proj-specs-grid{grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:18px}
  .proj-spec-item{padding:7px 9px;gap:7px;border-radius:8px}
  .proj-spec-icon{width:28px;height:28px;border-radius:6px}
  .proj-spec-icon svg{width:13px;height:13px}
  .proj-spec-label{font-size:.6rem}
  .proj-spec-value{font-size:.75rem}
  .proj-hero-actions{display:flex;flex-direction:row;gap:8px;width:100%}
  .proj-hero-actions .btn-primary,
  .proj-hero-actions .btn-ghost{flex:1;min-width:0;padding:10px 8px;font-size:.75rem;border-radius:25px;gap:5px}
  .proj-hero-actions .btn-primary svg,
  .proj-hero-actions .btn-ghost svg{width:13px;height:13px}
}
@media(max-width:360px){
  .proj-hero-actions{flex-direction:column;gap:8px}
  .proj-hero-actions .btn-primary,
  .proj-hero-actions .btn-ghost{width:100%;padding:11px 14px}
}



/* ===== BLOG CAROUSEL ===== */
.blog-carousel-section{padding:100px 0 80px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);position:relative;overflow:hidden}

.blog-nav-bar{margin-bottom:30px}
.blog-nav-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;outline:none}
.blog-nav-btn:hover{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--bg);border-color:var(--gold);box-shadow:0 4px 20px var(--gold-glow)}

.blog-track-wrapper{position:relative;width:100%;overflow:hidden}
.blog-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:10px 60px 30px;cursor:grab}
.blog-track::-webkit-scrollbar{display:none}
.blog-track.dragging{cursor:grabbing;scroll-snap-type:none}
.blog-track.dragging .blog-slide{pointer-events:none}

.blog-slide{flex:0 0 340px;scroll-snap-align:start;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--text);background:rgba(255,255,255,.02);border:1px solid var(--border);transition:all .5s cubic-bezier(.16,1,.3,1);position:relative;display:flex;flex-direction:column}
.blog-slide::before{content:'';position:absolute;inset:0;border-radius:16px;border:1px solid transparent;background:linear-gradient(135deg,rgba(244,165,42,.4),transparent 55%,rgba(244,165,42,.15)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none;z-index:2}
.blog-slide:hover{transform:translateY(-6px);border-color:rgba(244,165,42,.4);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 25px rgba(244,165,42,.1)}
.blog-slide:hover::before{opacity:1}

.blog-slide-img{aspect-ratio:16/10;overflow:hidden;position:relative;background:#141414}
.blog-slide-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .6s;filter:brightness(.85) contrast(1.05)}
.blog-slide:hover .blog-slide-img img{transform:scale(1.08);filter:brightness(.95) contrast(1.1)}
.blog-slide-img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,10,10,.6) 100%);pointer-events:none}

.blog-slide-date{position:absolute;top:14px;left:14px;padding:5px 14px;background:rgba(10,10,10,.75);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:20px;font-size:.7rem;font-weight:600;color:var(--text-dim);letter-spacing:.5px;z-index:2}
.blog-slide:hover .blog-slide-date{border-color:rgba(244,165,42,.3);color:var(--gold)}

.blog-slide-body{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.blog-slide-body h4{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;line-height:1.35;margin-bottom:10px;color:var(--text);transition:color .3s}
.blog-slide:hover .blog-slide-body h4{color:var(--gold-2)}
.blog-slide-body p{color:var(--text-dim);font-size:.82rem;line-height:1.6;margin-bottom:16px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.blog-slide-read{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;transition:gap .3s}
.blog-slide-read svg{transition:transform .3s}
.blog-slide:hover .blog-slide-read{gap:12px}
.blog-slide:hover .blog-slide-read svg{transform:translateX(3px)}

@media(max-width:768px){
  .blog-track{padding:10px 20px 25px;gap:14px}
  .blog-slide{flex:0 0 280px}
  .blog-nav-bar{display:none}
}

/* ===== HIGH-PERFORMANCE REFERENCES CAROUSEL ===== */
.references-section{background:var(--bg);position:relative;overflow:hidden;padding:85px 0 80px}
.references-section .container{position:relative;z-index:2}

.ref-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:35px}
.ref-nav-controls{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ref-nav-btn{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--text-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .25s ease;outline:none}
.ref-nav-btn:hover{background:var(--gold);color:#0b0c10;border-color:var(--gold)}
.ref-nav-btn.is-stopped{color:var(--gold);border-color:var(--gold);background:rgba(244,165,42,.12)}

.ref-marquee-outer{position:relative;width:100%;overflow:hidden;padding:10px 0 30px}
.ref-marquee-outer::before,
.ref-marquee-outer::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:3;pointer-events:none}
.ref-marquee-outer::before{left:0;background:linear-gradient(90deg,var(--bg,#0a0a0a) 0%,transparent 100%)}
.ref-marquee-outer::after{right:0;background:linear-gradient(270deg,var(--bg,#0a0a0a) 0%,transparent 100%)}

.ref-marquee-inner{display:flex;width:max-content;transform:translate3d(0,0,0)}
.ref-marquee-track{display:flex;align-items:stretch;gap:20px;padding-right:20px;flex-shrink:0;animation:refMarqueeLoop 32s linear infinite;transform:translate3d(0,0,0);will-change:transform}
@media(hover:hover) and (pointer:fine){
  .ref-marquee-outer:hover .ref-marquee-track{animation-play-state:paused}
}
.ref-marquee-outer.is-paused .ref-marquee-track{animation-play-state:paused!important}
@keyframes refMarqueeLoop{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-100%,0,0)}}

.ref-card-item{flex:0 0 270px;width:270px;display:flex}
.ref-slide-inner{position:relative;width:100%;background:#141720;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px 20px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;text-decoration:none;transition:border-color .25s ease,background .25s ease,transform .25s ease;contain:content}
.ref-slide-inner.is-link{cursor:pointer}

.ref-link-icon{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text-dim-2);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease}

@media(hover:hover) and (pointer:fine){
  .ref-slide-inner:hover{transform:translateY(-4px);border-color:var(--gold);background:#181c27}
  .ref-slide-inner:hover .ref-link-icon{opacity:1;color:var(--gold)}
  .ref-slide-inner:hover .ref-name{color:var(--gold)}
}

.ref-slide-icon{width:68px;height:68px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(244,165,42,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;padding:8px}
.ref-logo-img{max-width:100%;max-height:100%;object-fit:contain}
.ref-initials{font-family:'Playfair Display',serif;font-weight:700;font-size:1.3rem;color:var(--gold);letter-spacing:1px}

.ref-slide-body{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%}
.ref-name{font-family:'Inter',sans-serif;font-size:.92rem;font-weight:700;color:#ffffff;margin:0;line-height:1.3;transition:color .2s ease;word-break:break-word}
.ref-badge{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;color:var(--text-dim-2);letter-spacing:1px;text-transform:uppercase;font-weight:600}
.ref-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);display:inline-block}

/* Partnership CTA Banner */
.ref-cta-card{margin-top:40px;background:linear-gradient(135deg,rgba(244,165,42,.08),rgba(20,20,20,.95));border:1px solid rgba(244,165,42,.3);border-radius:20px;padding:40px 45px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden}
.ref-cta-content h3{font-family:'Playfair Display',serif;font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:700;margin-bottom:8px}
.ref-cta-content p{color:var(--text-dim);font-size:.9rem;margin:0;max-width:560px}
.ref-cta-actions{flex-shrink:0}

@media(max-width:991px){
  .ref-card-item{flex:0 0 240px;width:240px}
  .ref-cta-card{flex-direction:column;text-align:center;padding:35px 25px}
  .ref-cta-content p{max-width:100%}
}
@media(max-width:768px){
  .references-section{padding:50px 0!important}
  .ref-header-row{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:20px}
  .ref-nav-controls{align-self:flex-end;margin-bottom:0}
  .ref-marquee-track{gap:12px;padding-right:12px;animation-duration:25s}
  .ref-card-item{flex:0 0 200px;width:200px}
  .ref-slide-inner{padding:16px 12px 14px;gap:10px;border-radius:12px}
  .ref-slide-icon{width:50px;height:50px;border-radius:10px;padding:6px}
  .ref-initials{font-size:1.05rem}
  .ref-name{font-size:.84rem}
  .ref-badge{font-size:.62rem}
  .ref-nav-btn{width:36px;height:36px}
  .ref-marquee-outer::before,
  .ref-marquee-outer::after{width:35px}
}

/* ===== HIGH-PERFORMANCE STATS SECTION ===== */
.stats-section{background:var(--bg-2);position:relative;overflow:hidden;padding:80px 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative;text-align:center}
.stat{padding:20px}
.stat h3{font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3.8rem);font-weight:700;color:var(--gold);line-height:1;margin-bottom:10px}
.stat p{color:var(--text-dim);font-size:clamp(.7rem,1.3vw,.85rem);text-transform:uppercase;letter-spacing:3px}
.stat-divider{position:relative}
.stat-divider::after{content:'';position:absolute;right:-15px;top:50%;transform:translateY(-50%);width:1px;height:50px;background:var(--border)}
.stat-divider:last-child::after{display:none}



.contact{background:var(--bg)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.contact-info h3{font-family:'Playfair Display',serif;font-size:clamp(1.5rem,3vw,2rem);font-weight:700;margin-bottom:40px}
.contact-item{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--border);transition:all .3s}
.contact-item:last-child{border-bottom:none}
.contact-item:hover{padding-left:10px}
.contact-icon{width:45px;height:45px;background:rgba(244,165,42,.1);border:1px solid rgba(244,165,42,.3);color:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-icon svg{width:18px;height:18px}
.contact-item strong{display:block;margin-bottom:5px;font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;font-weight:500}
.contact-item a,.contact-item span{color:var(--text);text-decoration:none;font-size:clamp(.9rem,1.5vw,1.05rem);word-break:break-word}
.contact-item a:hover{color:var(--gold)}
.map-wrap{border-radius:8px;overflow:hidden;border:1px solid var(--border);min-height:400px}
.map-wrap iframe{width:100%;height:100%;min-height:400px;border:0;filter:invert(90%) hue-rotate(180deg) brightness(.85)}

.glow-line{display:block;width:90px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:18px auto 22px;opacity:1;box-shadow:0 0 10px rgba(244,165,42,.4)}
.tilt-card{transform-style:preserve-3d;perspective:1000px}

footer{background:var(--bg-2);border-top:1px solid var(--border);padding:60px 60px 30px}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:60px;max-width:1400px;margin:0 auto 40px}
.footer-brand p{color:var(--text-dim);font-size:.9rem;margin-top:20px;max-width:300px}
.footer-socials{display:flex;gap:10px;margin-top:20px}
.social-icon{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;color:var(--text-dim);text-decoration:none;transition:all .3s ease}
.social-icon:hover{background:var(--gold);color:#0a0a0a;border-color:var(--gold);transform:translateY(-3px);box-shadow:0 6px 15px var(--gold-glow)}
.footer-col h5{font-size:.85rem;color:var(--gold);text-transform:uppercase;letter-spacing:2px;margin-bottom:20px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:12px;list-style:none}
.footer-col a{color:var(--text-dim);text-decoration:none;font-size:.9rem;transition:color .3s;display:inline-flex;align-items:center}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{padding-top:30px;border-top:1px solid var(--border);text-align:center;color:var(--text-dim-2);font-size:.85rem;max-width:1400px;margin:0 auto}

.whatsapp{position:fixed;bottom:25px;right:25px;background:#25d366;color:#fff;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 20px rgba(37,211,102,.35);z-index:999;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.whatsapp svg{width:26px;height:26px;fill:#fff}
.whatsapp:hover{transform:scale(1.08);box-shadow:0 8px 25px rgba(37,211,102,.5)}
.back-top{position:fixed;bottom:88px;right:25px;width:52px;height:52px;background:rgba(18,18,18,.9);border:1px solid rgba(244,165,42,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px) scale(.9);transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1),visibility .35s ease,background .3s,border-color .3s;z-index:998;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,.5)}
.back-top.show{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.back-top:hover{background:var(--gold);color:#0a0a0a;border-color:var(--gold);transform:translateY(-2px) scale(1.04);box-shadow:0 8px 25px var(--gold-glow)}

#particleCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.3}

@media(max-width:1024px){
  header{padding:18px 30px}header.scrolled{padding:12px 30px}
  section,footer{padding-left:30px;padding-right:30px}
  .slide-content{padding:100px 30px 200px}
  .slider-nav{left:30px;right:30px;bottom:100px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:60px}
  .stats{grid-template-columns:repeat(2,1fr);gap:40px}
  .stat-divider:nth-child(2)::after{display:none}
  .products-grid, .projects-grid{grid-template-columns:repeat(2,1fr);gap:25px}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
  .stats-section{padding:80px 30px}
}
@media(max-width:768px){
  body{cursor:auto}
  header{padding:10px 15px!important;width:100%!important;box-sizing:border-box!important;background:rgba(10,10,10,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
  header.scrolled{padding:10px 15px!important}
  header nav{display:contents}
  .nav-container{gap:8px;width:100%;box-sizing:border-box}
  .logo{font-size:1.15rem;gap:6px;flex-shrink:1;min-width:0}
  .logo-mark{width:30px;height:30px;font-size:.95rem;border-radius:6px;flex-shrink:0}
  .logo-text{white-space:nowrap}
  .nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
  
  /* Mobile Menu & Submenu Accordion */
  nav ul#menu{
    display:none;position:fixed;top:62px;left:12px;right:12px;
    background:rgba(12,12,12,.98);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
    border:1px solid var(--border);border-radius:16px;flex-direction:column;
    padding:14px 10px;gap:4px;max-height:calc(100vh - 80px);overflow-y:auto;z-index:1001;
    box-shadow:0 20px 50px rgba(0,0,0,.9),0 0 20px rgba(244,165,42,.08);
  }
  nav ul#menu.active{display:flex}
  #menu > li{width:100%;list-style:none;border-bottom:1px solid rgba(255,255,255,.04);padding:2px 0}
  #menu > li:last-child{border-bottom:none}
  .nav-item-link-wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px}
  #menu a{
    flex:1;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
    color:rgba(255,255,255,.85);font-size:.92rem;font-weight:500;text-align:left;
    text-decoration:none;transition:all .2s ease;
  }
  #menu a::after{display:none}
  #menu a:hover{color:var(--gold);background:rgba(255,255,255,.04)}
  #menu a.active{color:var(--gold);background:rgba(244,165,42,.1);font-weight:600}
  .dropdown-chevron{display:none}
  .mobile-sub-toggle{
    display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;
    color:var(--gold);cursor:pointer;transition:transform .25s ease,background .25s ease,border-color .25s ease;
    flex-shrink:0;margin-right:2px;
  }
  .mobile-sub-toggle.active{transform:rotate(180deg);background:rgba(244,165,42,.15);border-color:var(--gold)}
  .dropdown-menu{
    position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;
    box-shadow:none!important;background:rgba(0,0,0,.35)!important;border:none!important;
    border-left:2px solid var(--gold)!important;border-radius:0 8px 8px 0!important;
    padding:4px 6px 4px 10px!important;margin:4px 0 6px 10px!important;
    display:none;pointer-events:auto!important;min-width:auto!important;
  }
  .dropdown-menu.mobile-open{display:flex!important;flex-direction:column!important;gap:3px!important}
  .dropdown-menu li{width:100%;list-style:none}
  .dropdown-menu li a{padding:7px 10px!important;font-size:.86rem!important;color:rgba(255,255,255,.7)!important;border-radius:6px!important}
  .dropdown-menu li a:hover,.dropdown-menu li a.active{color:var(--gold)!important;background:rgba(244,165,42,.1)!important}
  .flyout-menu{position:static!important;transform:none!important;margin-left:10px!important}
  
  .lang-btn{padding:6px 10px;font-size:.75rem;gap:5px}
  .lang-chevron{display:none}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;font-size:1.25rem;flex-shrink:0;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);cursor:pointer}
  .nav-cta{display:none!important}
  
  header{padding:12px 20px!important}
  header.scrolled{padding:10px 20px!important}
  .nav-container{gap:10px}
  .logo{font-size:1.15rem;letter-spacing:.5px;gap:8px}
  .site-logo-mobile{max-height:36px;max-width:160px;object-fit:contain}
  .logo-mark{width:32px;height:32px;font-size:1rem;border-radius:7px}
  .nav-actions{gap:8px}

  section,footer,
  .about,.services,.products,.products-section,.proj-showcase-section,.blog-carousel-section,.references-section,.gallery-section,.stats-section,.contact{
    padding:60px 0!important;
  }
  .container{
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .section-header{margin-bottom:38px!important}
  .section-tag{font-size:.72rem;letter-spacing:2px;margin-bottom:12px}
  .section-tag::before,.section-tag::after{width:20px}
  .section-header h2{font-size:clamp(1.55rem,6vw,2.2rem);line-height:1.24;margin-bottom:14px;word-break:break-word}
  .section-header p{font-size:.88rem;line-height:1.6;padding:0 8px}

  .hero{min-height:550px}
  .slide-content{padding:110px 16px 200px!important}
  .slide h1{font-size:clamp(1.8rem,8vw,3rem)}
  .slide-desc{font-size:.9rem;margin-bottom:25px}
  .slide-actions{gap:10px;margin-bottom:20px}
  .slide-actions .btn-primary,.slide-actions .btn-ghost{padding:12px 20px;font-size:.8rem;width:100%;justify-content:center}
  .slider-nav{left:20px;right:20px;bottom:90px;flex-wrap:wrap;gap:15px;justify-content:center}
  .slider-counter{display:none}
  .slider-dots{flex:1}
  .slider-dot{width:25px}
  .slider-arrow{width:40px;height:40px;font-size:.9rem}
  .laser-station{height:250px}
  .laser-head{width:40px;height:70px;top:15px}
  .laser-head::before{width:25px;height:6px;top:10px}
  .laser-head::after{width:14px;height:18px;bottom:-10px}
  .laser-beam{top:95px;height:60px}
  .laser-plate{bottom:30px;height:18px}
  .laser-cut-point{bottom:40px;width:30px;height:12px}
  .laser-halo{width:250px;height:250px;bottom:30px}
  .laser-reflection{bottom:18px;width:220px;height:15px}
  .laser-sparks-container{bottom:40px}
  .marquee{padding:14px 0}
  .marquee-item{gap:30px;font-size:.75rem;letter-spacing:2px}
  .marquee-track{gap:30px}
  .about-experience{right:15px;bottom:-20px;padding:18px 22px}
  .about-features{grid-template-columns:1fr;gap:15px}
  .about-img-frame{top:15px;left:15px;right:-15px;bottom:-15px}
  /* Mobile Service Card with icon next to title */
  .services-grid{grid-template-columns:1fr}
  .service-card{padding:28px 20px}
  .service-card p{min-height:auto;font-size:.88rem;margin-bottom:20px}
  .service-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
  }
  .service-card .service-icon{
    width:46px;
    height:46px;
    margin-bottom:0!important;
    border-radius:10px;
    flex-shrink:0;
  }
  .service-card .service-icon svg{
    width:22px;
    height:22px;
  }
  .service-card h3, .service-card .service-title{
    margin-bottom:0!important;
    font-size:1.2rem!important;
    line-height:1.25;
  }

  /* Mobile Non-Scrollable Centered Segment Pill Bars */
  .service-tabs, .filter-bar, .gallery-filters{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    overflow:visible;
    max-width:100%;
    width:fit-content;
    margin:0 auto 26px;
    padding:4px 5px;
    gap:5px;
    border-radius:30px;
    box-shadow:none !important;
  }
  .service-tab-btn, .filter-btn, .gallery-filter-btn{
    padding:7px 14px;
    font-size:.78rem;
    flex:0 1 auto;
    white-space:nowrap;
    border-radius:25px;
    box-shadow:none !important;
  }

  .products-grid, .projects-grid{grid-template-columns:1fr;gap:20px}
  .product-content{padding:25px}
  .stats{grid-template-columns:1fr 1fr;gap:20px}
  .stat{padding:15px}
  .stat-divider::after{display:none}
  .contact-grid{gap:40px}
  .map-wrap iframe{min-height:300px}
  .map-wrap{min-height:300px}
  footer{padding:50px 20px 25px}
  .footer-top{grid-template-columns:1fr;gap:30px;text-align:center}
  .footer-brand p{max-width:100%}
  .footer-brand .logo{justify-content:center}
  .footer-socials{justify-content:center}
  .whatsapp{width:48px;height:48px;bottom:20px;right:20px}
  .whatsapp svg{width:24px;height:24px}
  .back-top{width:44px;height:44px;bottom:20px;left:20px;right:auto;font-size:1.1rem}
  .parallax-text{display:none}
  #particleCanvas{display:none}
}
@media(max-width:480px){
  header{padding:10px 14px!important}
  header.scrolled{padding:8px 14px!important}
  .nav-container{gap:8px}
  .logo{font-size:1.05rem;letter-spacing:.5px;gap:6px}
  .site-logo-mobile{max-height:34px;max-width:140px}
  .logo-mark{width:28px;height:28px;font-size:.9rem;border-radius:6px}
  .nav-actions{gap:6px}
  .menu-toggle{width:36px;height:36px;font-size:1.2rem}
  .whatsapp{width:44px;height:44px;bottom:16px;right:16px}
  .whatsapp svg{width:22px;height:22px}
  .back-top{width:40px;height:40px;bottom:16px;left:16px;right:auto;font-size:1rem}
  section,footer,
  .about,.services,.products,.products-section,.proj-showcase-section,.blog-carousel-section,.references-section,.gallery-section,.stats-section,.contact{
    padding:48px 0!important;
  }
  .container{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .section-header{margin-bottom:30px!important}
  .slide-content{padding:100px 12px 180px!important}
  .slide-badge{margin-bottom:20px}
  .slide-badge-line{width:30px}
  .slide-badge-text{letter-spacing:2px;font-size:.65rem}
  .slide h1{font-size:1.9rem;margin-bottom:15px}
  .slide-desc{font-size:.85rem;margin-bottom:20px}
  .slider-nav{bottom:85px}
  .slider-dot{width:20px}
  .marquee-item{gap:25px;font-size:.7rem}
  .marquee-track{gap:25px}
  .about-grid,.contact-grid{gap:50px}
  .about-experience{padding:15px 18px}
  .service-card{padding:30px 20px}
  .service-icon{width:50px;height:50px}
  .service-icon svg{width:22px;height:22px}
  .product-content{padding:20px}
  .product-num{top:15px;right:20px;font-size:2rem}
  .stats{gap:15px}
  .stat h3{font-size:2rem}
  .stat p{font-size:.65rem;letter-spacing:2px}
  .contact-item{gap:15px;padding:18px 0}
  .contact-icon{width:40px;height:40px}
}
@media(hover:none){body{cursor:auto}.cursor,.cursor-follower{display:none!important}}

/* ==========================================================================
   🔧 MOBILE GPU PERFORMANCE FIX — Prevents Android black screen / freeze
   Removes ALL heavy GPU compositing on mobile: blur, backdrop-filter,
   will-change, large filter gradients. These combined cause Android Chrome
   to exhaust GPU memory and crash the renderer (black screen).
   ========================================================================== */
@media (max-width: 768px) {
  /* Kill ALL filter:blur on pseudo-elements (stats, projects, CTA glow) */
  .stats-section::before,
  .project-stats::before,
  .proj-ambient-glow,
  .cta-section::before,
  .cta-inner::before,
  .cta-inner::after {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 0.08 !important;
    width: 300px !important;
    height: 300px !important;
  }

  /* Kill backdrop-filter everywhere on mobile */
  header,
  header.scrolled,
  .slider-arrow,
  .back-top,
  .marquee,
  .blog-slide-date,
  .proj-visual-hover-icon,
  .site-popup-overlay,
  .quote-modal-overlay,
  .cookie-consent-banner,
  .cookie-settings-modal {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Remove will-change from all continuously-animated elements */
  .ref-marquee-track,
  .proj-slider-slides,
  .parallax-text,
  .marquee-track {
    will-change: auto !important;
  }

  /* Simplify marquee animation for lower GPU overhead */
  .ref-marquee-track {
    transform: translate3d(0,0,0);
  }

  /* Disable laser effects entirely on mobile (canvas already hidden) */
  .laser-halo,
  .laser-reflection,
  .laser-cut-point {
    display: none !important;
  }

  /* Projects page mobile — kill heavy hover effects */
  .project-hover-btn,
  .project-number,
  .blog-slide-date {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .project-card {
    transition: border-color 0.2s ease !important;
  }
  .project-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .project-img img {
    transition: none !important;
    filter: brightness(.9) !important;
  }
  .project-card:hover .project-img img {
    transform: none !important;
  }
}

/* Also catch touch devices that may be larger tablets */
@media (hover: none) and (pointer: coarse) {
  .stats-section::before,
  .project-stats::before,
  .proj-ambient-glow {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 0.06 !important;
  }
  .ref-marquee-track {
    will-change: auto !important;
  }
}

/* ==========================================================================
   Popup / Modal Announcement - Bespoke Luxury Dark & Gold Design
   ========================================================================== */
body.popup-open {
  overflow: hidden !important;
}

.site-popup-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at center, rgba(14, 18, 28, 0.88) 0%, rgba(4, 6, 10, 0.94) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}

.site-popup-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-popup-overlay.closing {
  opacity: 0;
  pointer-events: none;
}

/* Ambient Gold Glow Behind Modal */
.site-popup-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(550px, 90vw);
  height: min(550px, 90vw);
  background: radial-gradient(circle, rgba(244, 165, 42, 0.22) 0%, rgba(244, 165, 42, 0.08) 45%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
  animation: popupAuraPulse 4s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes popupAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.site-popup-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-popup-card {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 48px);
  background: linear-gradient(155deg, #181b26 0%, #0d0f15 60%, #090a0e 100%);
  border: 1px solid rgba(244, 165, 42, 0.45);
  border-radius: 24px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.95), 0 0 45px rgba(244, 165, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transform: scale(0.9) translateY(30px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

.site-popup-card::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.site-popup-overlay.active .site-popup-card {
  transform: scale(1) translateY(0);
}

.site-popup-overlay.closing .site-popup-card {
  transform: scale(0.92) translateY(20px);
}

/* Glowing Top Accent Line */
.site-popup-top-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(244, 165, 42, 0.4) 20%, #fff 50%, rgba(244, 165, 42, 0.4) 80%, transparent 100%);
  z-index: 15;
  box-shadow: 0 0 12px rgba(244, 165, 42, 0.8);
}

.site-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(10, 12, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.site-popup-close:hover {
  background: rgba(239, 68, 68, 0.95);
  border-color: rgba(239, 68, 68, 1);
  color: #fff;
  transform: scale(1.12) rotate(90deg);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}

.site-popup-image-wrap {
  position: relative;
  width: 100%;
  max-height: 290px;
  overflow: hidden;
  background: #000;
}

.site-popup-image {
  width: 100%;
  height: 100%;
  max-height: 290px;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.site-popup-card:hover .site-popup-image {
  transform: scale(1.04);
}

.site-popup-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 18, 0.05) 0%, rgba(13, 15, 21, 0.5) 50%, rgba(13, 15, 21, 0.9) 85%, #0d0f15 100%);
  pointer-events: none;
}

.site-popup-content {
  padding: 36px 40px 40px;
  text-align: center;
  position: relative;
  z-index: 5;
}

.site-popup-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  background: linear-gradient(135deg, rgba(244, 165, 42, 0.18), rgba(244, 165, 42, 0.06));
  border: 1px solid rgba(244, 165, 42, 0.45);
  border-radius: 30px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  box-shadow: 0 0 20px rgba(244, 165, 42, 0.18);
}

.site-popup-badge .badge-icon {
  font-size: 0.85rem;
  color: var(--gold);
  animation: badgeIconPulse 2s infinite ease-in-out;
}

@keyframes badgeIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2) rotate(-6deg); color: #fff; }
}

.site-popup-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.45rem, 3.2vw, 1.95rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Rich Content / Typography in Modal */
.site-popup-text {
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.8;
  margin-bottom: 28px;
  text-align: left;
}

.site-popup-text.typography-content p {
  margin-bottom: 12px;
  line-height: 1.8;
}

.site-popup-text.typography-content p:last-child {
  margin-bottom: 0;
}

.site-popup-text.typography-content strong,
.site-popup-text.typography-content b {
  color: #fff;
  font-weight: 700;
}

.site-popup-text.typography-content em,
.site-popup-text.typography-content i {
  color: var(--gold-2);
}

.site-popup-text.typography-content ul,
.site-popup-text.typography-content ol {
  padding-left: 22px;
  margin-bottom: 14px;
}

.site-popup-text.typography-content li {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.85);
}

.site-popup-text.typography-content a {
  color: var(--gold);
  text-decoration: underline;
  transition: color 0.2s;
}

.site-popup-text.typography-content a:hover {
  color: #fff;
}

.site-popup-text.typography-content blockquote {
  border-left: 3px solid var(--gold);
  padding: 8px 16px;
  margin: 12px 0;
  background: rgba(244, 165, 42, 0.08);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
}

.site-popup-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Luxury Gold Action Button with Shimmer */
.btn-luxury-gold {
  position: relative;
  overflow: hidden;
  padding: 13px 32px;
  background: linear-gradient(135deg, #f68a24 0%, #ffb167 50%, #d4881a 100%);
  color: #0a0a0a !important;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 28px rgba(244, 165, 42, 0.4), 0 0 15px rgba(244, 165, 42, 0.2);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-luxury-gold::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: rotate(25deg);
  animation: goldBtnShine 3.5s infinite;
  pointer-events: none;
}

@keyframes goldBtnShine {
  0% { left: -60%; }
  35%, 100% { left: 140%; }
}

.btn-luxury-gold:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 38px rgba(244, 165, 42, 0.55), 0 0 25px rgba(244, 165, 42, 0.35);
  color: #000 !important;
}

.btn-luxury-gold svg {
  transition: transform 0.3s ease;
}

.btn-luxury-gold:hover svg {
  transform: translateX(4px);
}

.site-popup-dismiss {
  padding: 12px 26px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.site-popup-dismiss:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 576px) {
  .site-popup-overlay {
    padding: 14px;
  }
  .site-popup-card {
    border-radius: 20px;
  }
  .site-popup-content {
    padding: 26px 22px 28px;
  }
  .site-popup-title {
    font-size: 1.35rem;
  }
  .site-popup-text {
    font-size: 0.9rem;
    margin-bottom: 22px;
  }
  .site-popup-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .site-popup-actions a,
  .site-popup-actions button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Media & Video Gallery Section - Luxury Dark & Gold
   ========================================================================== */
.gallery-section {
  padding: 120px 0;
  position: relative;
  background: var(--bg);
  overflow: hidden;
}

.gallery-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 40px;
  padding: 5px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none !important;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  position: relative;
  z-index: 2;
}

.gallery-filter-btn {
  padding: 9px 20px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 40px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
  white-space: nowrap;
  box-shadow: none !important;
}

.gallery-filter-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.gallery-filter-btn.active {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  border-color: rgba(244, 165, 42, 0.6);
  color: #0a0a0a !important;
  box-shadow: none !important;
  font-weight: 600;
}

.gallery-filter-btn .filter-badge {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  margin-left: 6px;
  font-weight: 600;
  transition: background-color 0.22s ease, color 0.22s ease;
}

.gallery-filter-btn.active .filter-badge {
  background: rgba(10, 10, 10, 0.25);
  color: #0a0a0a;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.gallery-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #11141c;
  border: 1px solid var(--border);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card:hover {
  transform: translateY(-8px);
  border-color: rgba(244, 165, 42, 0.4);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(244, 165, 42, 0.12);
}

.gallery-card-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gallery-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
}

.gallery-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

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

.gallery-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 18, 0.1) 0%, rgba(10, 12, 18, 0.5) 60%, rgba(10, 12, 18, 0.95) 100%);
  opacity: 0.6;
  transition: opacity 0.4s ease;
}

.gallery-card:hover .gallery-card-overlay {
  opacity: 0.85;
}

.gallery-card-type-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gallery-card-type-badge.type-image {
  background: rgba(10, 12, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
}

.gallery-card-type-badge.type-video {
  background: rgba(239, 68, 68, 0.85);
  border: 1px solid rgba(239, 68, 68, 1);
  color: #fff;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

/* Pulsing Play Button for Videos */
.gallery-play-btn-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
}

.gallery-play-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 10px 30px var(--gold-glow);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
  padding-left: 4px;
}

.gallery-card:hover .gallery-play-btn {
  transform: scale(1.15);
  background: #fff;
  color: #000;
}

.gallery-play-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: playPulse 2s infinite ease-out;
  pointer-events: none;
}

@keyframes playPulse {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Zoom Button for Photos */
.gallery-zoom-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(10, 12, 18, 0.85);
  border: 1px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 6;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

.gallery-card:hover .gallery-zoom-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.gallery-card-info {
  padding: 22px 24px;
  background: linear-gradient(180deg, #11141c 0%, #0c0d12 100%);
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gallery-card-counter {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
  transition: color 0.3s ease;
}

.gallery-card:hover .gallery-card-counter {
  color: rgba(244, 165, 42, 0.25);
}

.gallery-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 12px;
  padding-right: 35px;
  transition: color 0.3s ease;
}

.gallery-card:hover .gallery-card-title {
  color: var(--gold);
}

.gallery-card-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  transition: all 0.3s ease;
}

.gallery-card:hover .gallery-card-action {
  color: var(--gold);
  transform: translateX(4px);
}

@media (max-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .gallery-section {
    padding: 70px 0;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .gallery-card-info {
    padding: 18px 20px;
  }
}

/* ==========================================================================
   🏛️ PAGE HERO (SAYFA TEPE BANNER) STILLERI
   ========================================================================== */
.page-hero {
  position: relative;
  height: 60vh;
  min-height: 440px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  margin-top: 0;
  text-align: center;
  background-color: var(--bg, #0a0a0a);
}
.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(244, 165, 42, .08), transparent 60%);
}
.page-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .3;
    z-index:999;
}
.page-hero-bg {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.24) contrast(1.1);
  z-index: 1;
  transform: translateY(0);
  will-change: transform;
  transition: transform 0.05s linear;
}
.page-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(10,12,18,0.25) 0%, rgba(10,12,18,0.7) 65%, var(--bg, #0a0a0a) 100%),
              linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.3) 50%, var(--bg, #0a0a0a) 100%);
  z-index: 2;
}
.page-hero-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(244, 165, 42, 0.12), transparent 60%);
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.page-hero-content {
  position: relative;
  z-index: 3;
  text-align: center !important;
  padding: 0 20px;
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform, opacity;
  transition: transform 0.05s linear, opacity 0.1s linear;
}
.page-hero-breadcrumb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin-bottom: 22px;
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(244, 165, 42, 0.22);
  border-radius: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.82rem;
  line-height: 1.5;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  max-width: 100%;
  text-align: center;
}
.page-hero-breadcrumb a {
  color: var(--gold, #f4a52a);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline;
}
.page-hero-breadcrumb a:hover {
  color: #ffc766;
  text-shadow: 0 0 12px var(--gold-glow);
}
.page-hero-breadcrumb span {
  color: var(--text-dim-2, #6b6b6b);
  display: inline;
}
.page-hero-breadcrumb span:last-child {
  color: rgba(255, 255, 255, 0.9);
  display: inline;
}
.page-hero h1,
.page-hero-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(2.4rem, 6vw, 3.6rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -1px !important;
  margin-bottom: 0 !important;
  color: #ffffff !important;
  text-align: center !important;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.85);
}
.page-hero h1 em,
.page-hero-title em {
  font-style: normal !important;
background: linear-gradient(135deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 20px rgba(244, 165, 42, 0.45));
  display: inline-block;
}
.page-hero p,
.page-hero-subtitle {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(0.98rem, 1.8vw, 1.15rem) !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  text-align: center !important;
  line-height: 1.75 !important;
  font-weight: 300 !important;
  letter-spacing: 0.2px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

/* Page Hero Stats Counters */
.page-hero-stats {
  display: flex;
  gap: 50px;
  margin-top: 35px;
  flex-wrap: wrap;
  justify-content: center;
}
.page-hero-stat {
  text-align: center;
}
.page-hero-stat h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.page-hero-stat p {
  color: var(--text-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 5px;
}

/* Mouse Scroll Down Hint */
.page-hero-scroll-hint {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.page-hero-scroll-hint .mouse-icon {
  width: 22px;
  height: 34px;
  border: 1.5px solid rgba(244, 165, 42, 0.55);
  border-radius: 12px;
  position: relative;
  background: rgba(10, 10, 10, 0.3);
}
.page-hero-scroll-hint .mouse-icon .wheel {
  width: 3px;
  height: 6px;
  background: var(--gold);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: mouseWheel 1.8s infinite;
  box-shadow: 0 0 6px var(--gold);
}
@keyframes mouseWheel {
  0% { opacity: 1; transform: translate(-50%, 0); }
  70% { opacity: 0; transform: translate(-50%, 11px); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}

/* ==========================================================================
   ⚙️ PROCESS SECTION (ÇALIŞMA SÜRECİMİZ / AŞAMALAR)
   ========================================================================== */
.process-section {
  background: var(--bg-2);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.process-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(244, 165, 42, 0.05), transparent 70%);
  pointer-events: none;
}
.process-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
  margin-top: 20px;
}
.process-timeline::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold), transparent);
  opacity: 0.2;
}
.process-step {
  text-align: center;
  position: relative;
  padding: 20px;
}
.process-step-num {
  width: 60px;
  height: 60px;
  margin: 0 auto 25px;
  background: rgba(244, 165, 42, 0.1);
  border: 1px solid rgba(244, 165, 42, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  position: relative;
  z-index: 2;
  transition: all 0.4s;
}
.process-step:hover .process-step-num {
  background: var(--gold);
  color: var(--bg);
  transform: scale(1.1);
  box-shadow: 0 10px 30px var(--gold-glow);
}
.process-step h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text);
}
.process-step p {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ==========================================================================
   📊 STATS SECTION
   ========================================================================== */
.project-stats {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  padding: 90px 0;
}
.project-stats::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  filter: blur(80px);
  opacity: 0.3;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
  text-align: center;
}
.stat {
  padding: 20px;
}
.stat h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 10px;
}
.stat p {
  color: var(--text-dim);
  font-size: clamp(0.7rem, 1.3vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 3px;
}

@media (max-width: 1024px) {
  .process-timeline { grid-template-columns: repeat(2, 1fr); }
  .process-timeline::before { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .page-hero-stats { gap: 25px; }
  .process-timeline { grid-template-columns: 1fr; gap: 25px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ==========================================================================
   🏛️ HAKKIMIZDA MODÜLÜ (KURUMSAL ÖZEL ŞABLON) STILLERI
   ========================================================================== */

/* Reveal Animasyon Temel Sınıfları */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal { transform: translateY(50px); }
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal-scale { transform: scale(0.92); }

.reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

/* --- ABOUT STORY (HİKAYEMİZ) --- */
.about-story {
  background: var(--bg, #0a0c12);
  padding: 80px 0;
  position: relative;
}
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-story-img {
  position: relative;
  border-radius: 14px;
  aspect-ratio: 4/5;
}
.about-story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.about-story-img:hover img {
  transform: scale(1.03);
}
.about-story-img-frame {
  position: absolute;
  top: 22px;
  left: 22px;
  right: -22px;
  bottom: -22px;
  border: 1px solid var(--gold);
  border-radius: 14px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
.about-story-text h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.25;
  color: #ffffff;
}
.about-story-text h3 em {
  font-style: italic;
  color: var(--gold);
}
.about-story-text p {
  color: var(--text-dim, #a8a8a8);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  margin-bottom: 20px;
  line-height: 1.85;
}
.about-story-text p:last-of-type {
  margin-bottom: 0;
}

/* --- VISION & MISSION (VİZYON & MİSYON) --- */
.vision-mission {
  background: var(--bg-2, #0d1017);
  padding: 110px 0;
  border-top: 1px solid var(--border, rgba(255,255,255,.06));
  border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
}
.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.vm-card {
  padding: 50px 40px;
  background: var(--bg, #0a0c12);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.45s ease;
}
.vm-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2, #ffc766));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.vm-card:hover::before {
  transform: scaleX(1);
}
.vm-card:hover {
  border-color: rgba(244, 165, 42, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}
.vm-card-icon {
  width: 65px;
  height: 65px;
  background: rgba(244, 165, 42, 0.08);
  border: 1px solid rgba(244, 165, 42, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: 25px;
  font-size: 1.5rem;
  transition: all 0.4s ease;
}
.vm-card:hover .vm-card-icon {
  background: var(--gold);
  color: #0a0c12;
  transform: translateY(-4px);
}
.vm-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #ffffff;
}
.vm-card p {
  color: var(--text-dim, #a8a8a8);
  font-size: 0.98rem;
  line-height: 1.8;
  margin-bottom: 0;
}

/* --- VALUES (DEĞERLERİMİZ) --- */
.values {
  background: var(--bg, #0a0c12);
  padding: 110px 0;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.value-card {
  text-align: center;
  padding: 45px 25px;
  background: var(--bg-2, #0d1017);
  border: 1px solid var(--border, rgba(255,255,255,.06));
  border-radius: 16px;
  transition: all 0.45s ease;
  position: relative;
  overflow: hidden;
}
.value-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.5s ease;
}
.value-card:hover {
  transform: translateY(-8px);
  border-color: rgba(244, 165, 42, 0.35);
  box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}
.value-card:hover::after {
  transform: scaleX(1);
}
.value-num {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 700;
  color: rgba(244, 165, 42, 0.2);
  line-height: 1;
  margin-bottom: 15px;
  transition: color 0.3s;
}
.value-card:hover .value-num {
  color: rgba(244, 165, 42, 0.45);
}
.value-card h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
}
.value-card p {
  color: var(--text-dim, #a8a8a8);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 0;
}

/* --- TIMELINE (TARİHÇE) --- */
.timeline-section {
  background: var(--bg-2, #0d1017);
  padding: 110px 0;
  border-top: 1px solid var(--border, rgba(255,255,255,.06));
  border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
}
.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
  transform: translateX(-50%);
  opacity: 0.4;
}
.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  position: relative;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-item:nth-child(odd) {
  flex-direction: row;
}
.timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}
.timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  background: var(--gold);
  border-radius: 50%;
  border: 3px solid var(--bg-2, #0d1017);
  z-index: 2;
  box-shadow: 0 0 15px var(--gold-glow, rgba(244,165,42,.4));
}
.timeline-content {
  width: calc(50% - 50px);
  padding: 30px;
  background: var(--bg, #0a0c12);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 14px;
  transition: all 0.35s ease;
}
.timeline-content:hover {
  border-color: rgba(244, 165, 42, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.timeline-year {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(244, 165, 42, 0.12);
  border: 1px solid rgba(244, 165, 42, 0.3);
  border-radius: 20px;
  font-size: 0.82rem;
  color: var(--gold);
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 12px;
}
.timeline-content h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #ffffff;
}
.timeline-content p {
  color: var(--text-dim, #a8a8a8);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 0;
}

/* --- TEAM (UZMAN KADROMUZ) --- */
.team {
  background: var(--bg, #0a0c12);
  padding: 110px 0;
  position: relative;
}
.home-team-section {
  position: relative;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.team-card {
  background: linear-gradient(180deg, rgba(22, 26, 36, 0.85) 0%, rgba(13, 16, 23, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}
.team-card:hover {
  transform: translateY(-8px);
  border-color: rgba(244, 165, 42, 0.45);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), 0 0 25px rgba(244, 165, 42, 0.12);
}
.team-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #11141c;
}
.team-img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.team-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  filter: brightness(0.92);
}
.team-card:hover .team-img img {
  transform: scale(1.07);
  filter: brightness(1);
}
.team-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 12, 18, 0.85) 0%, rgba(10, 12, 18, 0.2) 60%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.team-card:hover .team-card-overlay {
  opacity: 1;
  pointer-events: auto;
}
.team-socials {
  display: flex;
  gap: 10px;
  transform: translateY(12px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-card:hover .team-socials {
  transform: translateY(0);
}
.team-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(22, 26, 36, 0.85);
  border: 1px solid rgba(244, 165, 42, 0.4);
  color: var(--gold, #f4a52a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  text-decoration: none;
}
.team-social-btn:hover {
  background: var(--gold, #f4a52a);
  color: #0d1017;
  transform: scale(1.12);
  box-shadow: 0 0 15px rgba(244, 165, 42, 0.6);
}
.team-dept-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(13, 16, 23, 0.82);
  border: 1px solid rgba(244, 165, 42, 0.35);
  color: var(--gold, #f4a52a);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.team-avatar-placeholder {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #1b212f 0%, #0d1017 100%);
  position: relative;
}
.team-avatar-ring {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 2px dashed rgba(244, 165, 42, 0.35);
  animation: rotateAvatarRing 20s linear infinite;
}
@keyframes rotateAvatarRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.team-avatar-initials {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd782 0%, #f4a52a 50%, #b87b14 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
}
.team-info {
  padding: 22px 20px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.team-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #ffffff;
  transition: color 0.3s ease;
}
.team-card:hover .team-name {
  color: var(--gold, #f4a52a);
}
.team-role {
  color: var(--gold, #f4a52a);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.team-bio {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.45;
  margin: 6px 0 0 0;
}

/* --- CTA BANNER --- */
.cta-banner {
  background: var(--bg-2, #0d1017);
  padding: 100px 0;
  position: relative;
  border-top: 1px solid var(--border, rgba(255,255,255,.06));
}
.cta-inner {
  max-width:100%;
  margin: 0 auto;
  text-align: center;
  padding: 70px 50px;
  background: linear-gradient(135deg, rgba(244, 165, 42, 0.08), rgba(244, 165, 42, 0.02));
  border: 1px solid rgba(244, 165, 42, 0.25);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.cta-inner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--gold-glow, rgba(244,165,42,.4)), transparent 70%);
  filter: blur(60px);
  opacity: 0.35;
}
.cta-inner h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 15px;
  color: #ffffff;
  position: relative;
}
.cta-inner h2 em {
  font-style: normal;
  color: var(--gold);
}
.cta-inner p {
  color: var(--text-dim, #a8a8a8);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  max-width: 580px;
  margin: 0 auto 30px;
  position: relative;
}
.cta-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.btn-ghost {
  padding: 14px 28px;
  background: transparent;
  color: var(--text, #ffffff);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: all 0.4s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

/* --- ABOUT RESPONSIVE --- */
@media(max-width: 1024px) {
  .about-story-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .vm-grid {
    grid-template-columns: 1fr;
  }
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width: 768px) {
  .about-story, .vision-mission, .values, .timeline-section, .team, .cta-banner {
    padding: 70px 0;
  }
  .about-story-img-frame {
    top: 15px;
    left: 15px;
    right: -15px;
    bottom: -15px;
  }
  .values-grid {
    grid-template-columns: 1fr;
  }
  .timeline::before {
    left: 20px;
  }
  .timeline-item, .timeline-item:nth-child(even) {
    flex-direction: row;
    padding-left: 50px;
  }
  .timeline-dot {
    left: 20px;
    transform: translateX(-50%);
  }
  .timeline-content {
    width: 100%;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
  .cta-inner {
    padding: 45px 20px;
  }
}

/* ===== LUXURY CATALOG & PAGINATION STYLES ===== */
.catalog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.catalog-pagination ul.pagination,
.pagination {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
}
.page-item .page-link,
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.page-item .page-link:hover,
.pagination a:hover {
  color: var(--text);
  border-color: rgba(244, 165, 42, 0.5);
  background: rgba(244, 165, 42, 0.08);
  transform: translateY(-2px);
}
.page-item.active .page-link,
.page-item.active span,
.pagination .active span,
.pagination .active a {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  color: #0a0a0a !important;
  border-color: var(--gold) !important;
  box-shadow: 0 4px 15px var(--gold-glow);
  font-weight: 700;
}
.page-item.disabled .page-link,
.pagination .disabled span {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===================================================
   HURMETALSITE / HİZMETLER EXACT DESIGN SYSTEM
   =================================================== */

/* ===== SERVICE DETAIL CARDS (sd-item) ===== */
.services-detail{background:var(--bg);padding:100px 0}
.sd-item{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-bottom:120px}
.sd-item:last-child{margin-bottom:0}
.sd-item.reverse{direction:rtl}
.sd-item.reverse>*{direction:ltr}
.sd-img{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/11;box-shadow:0 20px 50px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);background:#0d121f}
.sd-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1);filter:brightness(.85)}
.sd-img:hover img{transform:scale(1.05);filter:brightness(1)}
.sd-img-num{position:absolute;top:20px;left:20px;font-family:'Playfair Display',serif;font-size:3rem;font-weight:700;color:var(--gold);opacity:.7;line-height:1;z-index:2;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.sd-text .section-tag{margin-bottom:15px}
.sd-text h3{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:700;margin-bottom:20px;line-height:1.2;color:#ffffff}
.sd-text h3 em{font-style:italic;color:var(--gold)}
.sd-text>p{color:var(--text-dim);font-size:clamp(.95rem,1.5vw,1.05rem);margin-bottom:18px;line-height:1.8}
.sd-features{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:25px;margin-bottom:25px}
.sd-feature{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--text);font-weight:500}
.sd-feature-dot{width:8px;height:8px;background:var(--gold);border-radius:50%;flex-shrink:0;box-shadow:0 0 8px rgba(244,165,42,.6)}
.sd-cta{margin-top:30px;display:flex;align-items:center;gap:15px;flex-wrap:wrap}

/* Project Process Timeline (EXACT HURMETALSITE & FULL RESPONSIVE) */
.process-section, .process {
  background: var(--bg-2);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.process-section::before, .process::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(244, 165, 42, .05), transparent 70%);
  pointer-events: none;
}

.process-timeline, .process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
  margin-top: 40px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.process-timeline::before, .process-grid::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,165,42,0.4) 20%, rgba(244,165,42,0.4) 80%, transparent);
  opacity: 0.6;
  z-index: 1;
}

.process-step {
  text-align: center;
  position: relative;
  padding: 0 10px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.process-step-num, .process-circle-badge {
  width: 60px;
  height: 60px;
  margin: 0 auto 22px;
  background: rgba(244, 165, 42, .1) !important;
  border: 1px solid rgba(244, 165, 42, .35) !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold) !important;
  position: relative;
  z-index: 2;
  transition: all .4s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 4px 15px rgba(0,0,0,.4) !important;
}

.process-circle-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

.process-step:hover .process-step-num,
.process-step:hover .process-circle-badge {
  background: var(--gold) !important;
  color: #0c101d !important;
  border-color: var(--gold) !important;
  transform: scale(1.1);
  box-shadow: 0 10px 30px var(--gold-glow) !important;
}

.process-step:hover .process-circle-num {
  color: #0c101d !important;
}

.process-step h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 0;
  color: #ffffff;
}

.process-step p {
  color: var(--text-dim);
  font-size: .85rem;
  line-height: 1.65;
  margin: 0 auto;
  max-width: 250px;
}

.process-num, .process-step-icon, .process-connector, .process-connecting-line {
  display: none;
}

/* ===== STATS SECTION (EXACT HURMETALSITE DESIGN) ===== */
.stats-section, .project-stats {
  background: var(--bg, #0a0c12);
  position: relative;
  overflow: hidden;
  padding: 90px 0;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.05));
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.05));
}
.stats-section::before, .project-stats::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  filter: blur(80px);
  opacity: .25;
  pointer-events: none;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
  text-align: center;
  z-index: 2;
}
.stat {
  padding: 20px;
  position: relative;
}
.stat-divider::after {
  content: '';
  position: absolute;
  right: -15px;
  top: 20%;
  height: 60%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(244, 165, 42, 0.25), transparent);
}
.stat h3, .stat .counter {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 700;
  color: var(--gold, #f4a52a);
  line-height: 1;
  margin-bottom: 12px;
  text-shadow: 0 0 25px rgba(244, 165, 42, 0.3);
}
.stat p {
  color: var(--text-dim, #a8a8a8);
  font-size: clamp(.72rem, 1.3vw, .85rem);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  font-weight: 500;
}

@media (max-width: 992px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 20px;
  }
  .stat-divider::after {
    display: none;
  }
}
@media (max-width: 576px) {
  .stats-section, .project-stats {
    padding: 60px 0;
  }
  .stats {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ===== SECTION TAG (—— ROZET BAŞLIK ——) ===== */
.section-tag {
  color: var(--gold, #f4a52a);
  font-size: clamp(0.75rem, 1.5vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 3.5px;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 600;
}
.section-tag::before, .section-tag::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold, #f4a52a);
  opacity: 0.55;
  display: inline-block;
}

/* ===== CTA SECTION & CTA BANNER (EXACT HURMETALSITE DESIGN) ===== */
.cta-section, .cta-banner {
  background: var(--bg-2, #0d1017);
  position: relative;
  overflow: hidden;
  padding: 110px 30px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.05));
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.05));
}
.cta-section::before, .cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(244, 165, 42, 0.07), transparent 65%);
  pointer-events: none;
}

.cta-inner .section-tag {
  margin-bottom: 20px;
}
.cta-inner h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.18;
  margin-bottom: 20px;
  color: #ffffff;
}
.cta-inner h2 em {
  font-style: italic;
  color: var(--gold, #f4a52a);
}
.cta-inner > p {
  color: var(--text-dim, #a8a8a8);
  font-size: clamp(0.95rem, 1.8vw, 1.08rem);
  margin-bottom: 35px;
  line-height: 1.75;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  z-index: 2;
}
.cta-actions .btn-primary {
  padding: 15px 34px;
  background: linear-gradient(135deg, var(--gold, #f4a52a), var(--gold-2, #e0921e));
  color: #0c0f17 !important;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  transition: all 0.35s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  white-space: nowrap;
  box-shadow: 0 10px 25px rgba(244, 165, 42, 0.25);
  cursor: pointer;
}
.cta-actions .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px var(--gold-glow);
  color: #000000 !important;
}
.cta-actions .btn-ghost {
  padding: 15px 30px;
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  transition: all 0.35s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.cta-actions .btn-ghost:hover {
  border-color: var(--gold, #f4a52a);
  color: var(--gold, #f4a52a) !important;
  background: rgba(244, 165, 42, 0.08);
  transform: translateY(-3px);
}

@media(max-width:1024px){
  .sd-item,.sd-item.reverse{grid-template-columns:1fr;gap:40px;direction:ltr}
  .process-timeline, .process-grid{grid-template-columns:repeat(2,1fr) !important;gap:40px 20px !important}
  .process-timeline::before, .process-grid::before{display:none !important}
}
@media(max-width:768px){
  .process-section, .process{padding:60px 0 !important}
  .sd-item{margin-bottom:70px}
  .sd-features{grid-template-columns:1fr}
  .process-timeline, .process-grid{grid-template-columns:1fr !important;gap:35px !important}
  .process-step{padding:0 15px}
  .process-step p{max-width:320px}
  .cta-inner{padding:50px 25px;}
}

/* ===================================================
   HURMETALSITE / CONTACT PAGE EXACT DESIGN SYSTEM
   =================================================== */

.contact-section-top {
  background: var(--bg);
  padding: 80px 0 40px;
}

.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.contact-info-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.contact-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.contact-info-card:hover {
  transform: translateY(-6px);
  border-color: rgba(244, 165, 42, 0.4);
  background: rgba(20, 24, 38, 0.7);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(244, 165, 42, 0.1);
}

.contact-info-card:hover::before {
  opacity: 1;
}

.contact-card-icon {
  width: 52px;
  height: 52px;
  background: rgba(244, 165, 42, 0.08);
  border: 1px solid rgba(244, 165, 42, 0.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.3rem;
  margin-bottom: 20px;
  transition: all 0.4s;
  flex-shrink: 0;
}

.contact-info-card:hover .contact-card-icon {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #0a0a0a;
  border-color: var(--gold);
  transform: scale(1.05);
}

.contact-card-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.contact-card-body {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.contact-card-body strong,
.contact-card-body a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.contact-card-body a:hover {
  color: var(--gold);
}

.contact-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.3s;
}

.contact-card-link:hover {
  color: var(--gold-2);
  transform: translateX(4px);
}

.contact-card-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #10b981;
  font-size: 0.82rem;
  font-weight: 600;
}

.contact-card-status .status-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
}

/* ===== MAIN MIDDLE SECTION (FORM + MAP) ===== */
.contact-main-section {
  background: var(--bg);
  padding: 40px 0 100px;
}

.contact-main-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: stretch;
}

.contact-form-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-form-header {
  margin-bottom: 30px;
}

.contact-form-header .section-tag {
  margin-bottom: 12px;
}

.contact-form-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}

.contact-form-header h3 em {
  font-style: italic;
  color: var(--gold);
}

.contact-form-header p {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Form alerts */
.form-alert-success {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 500;
}

.form-alert-success i {
  color: #10b981;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.form-alert-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 25px;
  color: #ffffff;
  font-size: 0.9rem;
}

.form-alert-error-title {
  color: #ef4444;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-alert-error ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-dim);
}

.form-alert-error li {
  margin-bottom: 4px;
}

/* Form Fields */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #d1d5db;
  letter-spacing: 0.3px;
}

.form-label span.req {
  color: var(--gold);
}

.form-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input-icon {
  position: absolute;
  left: 16px;
  color: var(--text-dim-2);
  font-size: 0.95rem;
  pointer-events: none;
  transition: color 0.3s;
}

.form-input-wrap input,
.form-input-wrap textarea,
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(10, 14, 23, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 18px 14px 44px;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.contact-form textarea {
  padding: 16px 18px;
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form-input-wrap input:focus,
.contact-form textarea:focus {
  border-color: var(--gold);
  background: rgba(15, 20, 32, 0.95);
  box-shadow: 0 0 15px rgba(244, 165, 42, 0.2);
}

.form-input-wrap input:focus + .form-input-icon,
.form-input-wrap:focus-within .form-input-icon {
  color: var(--gold);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #52525b;
}

.btn-contact-submit {
  width: 100%;
  padding: 16px 30px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #0a0a0a;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px rgba(244, 165, 42, 0.25);
  letter-spacing: 0.5px;
  margin-top: 10px;
}

.btn-contact-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px var(--gold-glow);
  color: #000000;
}

.btn-contact-submit i {
  transition: transform 0.3s ease;
}

.btn-contact-submit:hover i {
  transform: translateX(4px);
}

/* ===== CONTACT SIDEBAR (MAP + QUICK ACTIONS) ===== */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-map-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  position: relative;
  flex-grow: 1;
  min-height: 380px;
  display: flex;
}

.contact-map-card iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 380px;
  border: 0;
  display: block;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.quick-action-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.quick-action-card.whatsapp {
  border-left: 3px solid #25D366;
}

.quick-action-card.whatsapp:hover {
  background: rgba(37, 211, 102, 0.08);
  border-color: rgba(37, 211, 102, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(37, 211, 102, 0.15);
}

.quick-action-card.phone {
  border-left: 3px solid var(--gold);
}

.quick-action-card.phone:hover {
  background: rgba(244, 165, 42, 0.08);
  border-color: rgba(244, 165, 42, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(244, 165, 42, 0.15);
}

.quick-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.quick-action-card.whatsapp .quick-action-icon {
  background: rgba(37, 211, 102, 0.15);
  color: #25D366;
}

.quick-action-card.phone .quick-action-icon {
  background: rgba(244, 165, 42, 0.15);
  color: var(--gold);
}

.quick-action-text {
  overflow: hidden;
}

.quick-action-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.quick-action-val {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */
@media (max-width: 1200px) {
  .contact-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-main-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .page-hero-breadcrumb {
    padding: 7px 14px;
    font-size: 0.78rem;
    gap: 5px 8px;
    border-radius: 14px;
    margin-bottom: 16px;
    max-width: 100%;
    line-height: 1.6;
  }
  .contact-section-top {
    padding: 50px 0 30px;
  }
  .contact-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .contact-form-card {
    padding: 30px 20px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .quick-actions-grid {
    grid-template-columns: 1fr;
  }
  .contact-main-section {
    padding: 30px 0 70px;
  }
}
/* ===================================================
   🌟 PROJECT CARDS & META CHIPS STYLING & UTILITIES
   =================================================== */

/* Project Card Specific Enhancements */
.product-card.project-card {
  background: linear-gradient(165deg, rgba(28, 28, 28, 0.85) 0%, rgba(14, 14, 14, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-card.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 10%, var(--gold) 50%, transparent 90%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 5;
}

.product-card.project-card:hover {
  transform: translateY(-8px);
  border-color: rgba(246, 138, 36, 0.4);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(246, 138, 36, 0.12);
}

.product-card.project-card:hover::before {
  opacity: 1;
}

.product-card.project-card .product-card-body {
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Card Title - Clean Modern Typography */
.product-card.project-card .product-card-title,
.product-card-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.15rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.4;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  min-height: 48px;
  display: flex;
  align-items: flex-start;
}

.product-card.project-card .product-card-title a,
.product-card-title a {
  color: #f8fafc;
  text-decoration: none;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card.project-card:hover .product-card-title a,
.product-card:hover .product-card-title a {
  color: var(--gold);
}

/* Project Meta Specs Box - Professional Architectural Styling */
.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.product-card.project-card:hover .project-card-meta {
  background: rgba(246, 138, 36, 0.04);
  border-color: rgba(246, 138, 36, 0.18);
}

.project-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.3;
  white-space: nowrap;
}

.project-meta-chip i {
  color: var(--gold);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.project-meta-chip .meta-val {
  color: #e2e8f0;
  font-weight: 500;
}

.product-card.project-card:hover .project-meta-chip .meta-val {
  color: #ffffff;
}

/* ===================================================
   🌟 ALL PROJECTS GALLERY & TABS (hurmetalsite id="all-projects")
   =================================================== */
#all-projects, .all-projects-section {
  padding: 90px 0 100px;
  position: relative;
  background: var(--bg);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.project-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  transition: all .4s cubic-bezier(.16,1,.3,1);
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  border-color: rgba(244,165,42,.4);
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(0,0,0,.4), 0 0 40px rgba(244,165,42,.08);
}

/* 🌟 First Card Featured (Big 2x2 with 2 small cards next to it) */
.project-card.featured {
  grid-column: span 2;
  grid-row: span 2;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
}

.project-card.featured .project-img {
  height: 100%;
  aspect-ratio: auto;
  min-height: 480px;
}

.project-card.featured .project-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, 0.75) 25%, rgba(10, 10, 10, 0.98) 100%);
  padding: 30px 30px 25px;
  padding-top: 50px;
}

.project-card.featured .project-info h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
}

@media (max-width: 1024px) {
  .project-card.featured {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 768px) {
  .project-card.featured {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    display: flex !important;
  }
  .project-card.featured .project-img {
    position: relative !important;
    aspect-ratio: 16/10 !important;
    height: auto !important;
    min-height: auto !important;
  }
  .project-card.featured .project-info {
    position: relative !important;
    background: transparent !important;
    padding: 24px 26px 22px !important;
  }
}

.project-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #121212;
}

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .5s;
  filter: brightness(.85);
  display: block;
}

.project-card:hover .project-img img {
  transform: scale(1.08);
  filter: brightness(.6);
}

.project-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10,10,10,.85) 100%);
  z-index: 2;
  opacity: .7;
  transition: opacity .4s;
  pointer-events: none;
}

.project-card:hover .project-img-overlay {
  opacity: 1;
}

/* Project Hover Icons */
.project-hover-actions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 12px;
  z-index: 4;
  opacity: 0;
  transition: all .4s ease;
  pointer-events: auto;
}

.project-card:hover .project-hover-actions {
  opacity: 1;
}

.project-hover-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(244,165,42,.9);
  color: var(--bg) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s ease;
  border: none;
  text-decoration: none;
  font-size: 1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.project-hover-btn i {
  color: #0a0a0a !important;
  font-size: 1rem;
  transition: color .3s;
}

.project-hover-btn:hover {
  background: var(--gold);
  transform: scale(1.15);
  box-shadow: 0 8px 25px var(--gold-glow);
}

.project-hover-btn:hover i {
  color: #ffffff !important;
}

.project-info {
  padding: 24px 26px 22px;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(244,165,42,.12);
  border: 1px solid rgba(244,165,42,.25);
  border-radius: 20px;
  font-size: .7rem;
  color: var(--gold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 600;
  width: fit-content;
}

.project-category-dot {
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  display: inline-block;
}

.project-info h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 700;
  margin-bottom: 10px;
  transition: color .3s;
  line-height: 1.35;
  color: #ffffff;
  min-height: 48px;
}

.project-info h3 a {
  color: inherit;
  text-decoration: none;
  transition: color .3s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card:hover .project-info h3 a,
.project-card:hover .project-info h3 {
  color: var(--gold);
}

.project-info p {
  color: var(--text-dim);
  font-size: .88rem;
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.project-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim-2, #8a99ad);
  font-size: .78rem;
  letter-spacing: .5px;
}

.project-meta-item i {
  color: var(--gold);
  font-size: 0.82rem;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.project-card:hover .project-link {
  gap: 14px;
  color: #ffffff;
}

.project-link i {
  transition: transform .3s;
}

.project-card:hover .project-link i {
  transform: translateX(4px);
  color: var(--gold);
}

/* Project Number Badge */
.project-number {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(10,10,10,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(244,165,42,.25);
  letter-spacing: 2px;
}

@media(max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media(max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #all-projects, .all-projects-section {
    padding: 60px 0 70px;
  }
  /* Disable heavy transitions on mobile for smooth scrolling */
  .project-card {
    transition: none;
  }
  .project-card:hover {
    transform: none;
    box-shadow: none;
  }
  .project-img img {
    transition: none;
  }
  .project-hover-actions {
    display: none;
  }
}

/* Base Utility Classes */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-stretch { align-items: stretch !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }

.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 16px !important; }
.gap-4 { gap: 24px !important; }

.me-1 { margin-right: 4px !important; }
.me-2 { margin-right: 8px !important; }
.me-3 { margin-right: 16px !important; }
.ms-1 { margin-left: 4px !important; }
.ms-2 { margin-left: 8px !important; }
.ms-3 { margin-left: 16px !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }

.p-0 { padding: 0 !important; }
.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.px-3 { padding-left: 16px !important; padding-right: 16px !important; }
.px-4 { padding-left: 24px !important; padding-right: 24px !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }

.text-muted { color: var(--text-dim, #94a3b8) !important; }
.text-warning { color: var(--gold, #f68a24) !important; }
.text-secondary { color: #94a3b8 !important; }
.text-success { color: #22c55e !important; }
.text-light { color: #f8fafc !important; }
.text-white { color: #ffffff !important; }
.extra-small { font-size: 0.78rem !important; }

/* 🌟 Post Content Typography */
.post-body-content p {
  margin-bottom: 1.5rem;
  color: var(--text-dim, #cbd5e1);
}
.post-body-content h2, .post-body-content h3, .post-body-content h4 {
  color: #ffffff;
  font-family: 'Playfair Display', serif;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.post-body-content ul, .post-body-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  color: var(--text-dim, #cbd5e1);
}
.post-body-content li {
  margin-bottom: 0.5rem;
}
.post-body-content blockquote {
  border-left: 3px solid var(--gold);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(244, 165, 42, 0.06);
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: #f1f5f9;
}
.post-body-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5rem 0;
}

/* ===================================================
   🌟 NEWS & BLOG DETAIL LAYOUT (Two-column luxury grid)
   =================================================== */
.post-detail-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
}

@media (max-width: 1024px) {
  .post-detail-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }
}

.post-main-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 35px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .post-main-card {
    padding: 22px;
  }
}

.post-featured-img {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 25px;
  border: 1px solid var(--border);
  background: #0c101d;
  position: relative;
  aspect-ratio: 16/10;
}

.post-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.post-featured-img:hover img {
  transform: scale(1.03);
}

.post-share-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  padding-top: 25px;
  margin-top: 35px;
  border-top: 1px solid var(--border);
}

.share-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  text-decoration: none;
  transition: all .3s ease;
  font-size: 0.95rem;
}

.share-btn:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  color: #ffffff;
  background: var(--gold);
  box-shadow: 0 4px 15px var(--gold-glow);
}

.share-btn.whatsapp:hover { background: #25d366; border-color: #25d366; }
.share-btn.linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.share-btn.twitter:hover { background: #000000; border-color: #555555; }
.share-btn.facebook:hover { background: #1877f2; border-color: #1877f2; }

.post-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.sidebar-widget {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 25px;
}

.sidebar-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-title i {
  color: var(--gold);
}

.sidebar-recent-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-recent-item {
  display: flex;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: all .3s;
}

.sidebar-recent-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.recent-thumb {
  width: 75px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0c101d;
  border: 1px solid var(--border);
}

.recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}

.sidebar-recent-item:hover .recent-thumb img {
  transform: scale(1.1);
}

.recent-info {
  flex-grow: 1;
}

.recent-date {
  font-size: 0.75rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.recent-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .3s;
}

.sidebar-recent-item:hover .recent-title {
  color: var(--gold);
}

.sidebar-cta-widget {
  background: linear-gradient(145deg, rgba(244,165,42,0.08) 0%, rgba(10,10,10,0.95) 100%);
  border: 1px solid rgba(244,165,42,0.25);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
}

.sidebar-cta-widget .cta-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(244,165,42,0.15);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 15px;
}




.page-editor-content h3 {
    color: var(--gold);
}
.page-editor-content a {
    color: var(--text-dim, #94a3b8) !important;
}
.page-editor-content p {
    color: var(--text-dim, #94a3b8) !important;
}
.page-editor-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

.page-sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.page-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-dim, #a8a8a8);
    text-decoration: none !important;
    font-size: 0.92rem;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-sidebar-link:hover {
    background: rgba(246, 138, 36, 0.08);
    border-color: rgba(246, 138, 36, 0.3);
    color: #ffffff !important;
    transform: translateX(4px);
    text-decoration: none !important;
}
.page-sidebar-link .link-arrow {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.25s ease;
}
.page-sidebar-link:hover .link-arrow {
    color: var(--gold, #f68a24);
    transform: translateX(3px);
}
.page-sidebar-link.active {
    background: rgba(246, 138, 36, 0.12);
    border-color: rgba(246, 138, 36, 0.5);
    color: var(--gold, #f68a24) !important;
    font-weight: 600;
    text-decoration: none !important;
}
.page-sidebar-link.active .link-arrow {
    color: var(--gold, #f68a24);
}

.quote-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(8, 10, 14, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
    padding: 20px;
    box-sizing: border-box;
}

.quote-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.quote-modal-overlay.closing {
    opacity: 0;
    pointer-events: none;
}

.quote-modal-ambient {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(243, 146, 0, 0.18) 0%, rgba(243, 146, 0, 0) 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.quote-modal-dialog {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.quote-modal-card {
    position: relative;
    background: linear-gradient(145deg, #181c24 0%, #12151b 100%);
    border: 1px solid rgba(243, 146, 0, 0.28);
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8),
                0 0 40px rgba(243, 146, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.quote-modal-overlay.active .quote-modal-card {
    transform: scale(1) translateY(0);
}

.quote-modal-top-accent {
    height: 4px;
    background: linear-gradient(90deg, #f39200, #ffb347, #f39200);
    box-shadow: 0 0 15px rgba(243, 146, 0, 0.6);
}

.quote-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.25s ease;
    z-index: 10;
}

.quote-modal-close:hover {
    background: #f39200;
    color: #0b0d11;
    border-color: #f39200;
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 0 15px rgba(243, 146, 0, 0.4);
}

.quote-modal-body {
    padding: 32px 36px 28px 36px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(243, 146, 0, 0.3) transparent;
}

.quote-modal-body::-webkit-scrollbar {
    width: 6px;
}
.quote-modal-body::-webkit-scrollbar-thumb {
    background: rgba(243, 146, 0, 0.3);
    border-radius: 4px;
}

.quote-modal-header {
    margin-bottom: 22px;
    padding-right: 30px;
}

.quote-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    background: rgba(243, 146, 0, 0.12);
    border: 1px solid rgba(243, 146, 0, 0.35);
    border-radius: 20px;
    color: #f39200;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.quote-modal-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.25;
    font-family: inherit;
}

.quote-modal-title em {
    font-style: normal;
    color: #f39200;
    background: linear-gradient(135deg, #f39200 0%, #ffc067 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quote-modal-subtitle {
    font-size: 0.88rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}

.quote-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 576px) {
    .quote-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .quote-modal-body {
        padding: 24px 20px 20px 20px;
    }
    .quote-modal-title {
        font-size: 1.35rem;
    }
}

.quote-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quote-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: 0.3px;
}

.quote-req {
    color: #f39200;
}

.quote-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.quote-icon {
    position: absolute;
    left: 14px;
    color: #64748b;
    font-size: 0.85rem;
    pointer-events: none;
    transition: color 0.25s;
}

.quote-input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    background: rgba(15, 18, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.88rem;
    font-family: inherit;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.quote-input:focus {
    outline: none;
    border-color: #f39200;
    background: rgba(20, 24, 32, 0.95);
    box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.18);
}

.quote-input:focus + .quote-icon,
.quote-input-wrap:focus-within .quote-icon {
    color: #f39200;
}

.quote-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f39200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.quote-select option {
    background: #181c24;
    color: #ffffff;
    padding: 10px;
}

.quote-textarea {
    padding: 12px 14px;
    resize: vertical;
    min-height: 80px;
}

.quote-modal-alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 16px;
    line-height: 1.45;
}

.quote-modal-alert.alert-danger {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.quote-modal-actions {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quote-submit-btn {
    width: 100%;
    padding: 13px 24px;
    background: linear-gradient(135deg, #f39200 0%, #e08200 100%);
    border: none;
    border-radius: 12px;
    color: #0b0d11;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(243, 146, 0, 0.35);
}

.quote-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff9e1b 0%, #f39200 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(243, 146, 0, 0.48);
}

.quote-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.quote-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.quote-privacy-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
}

.quote-privacy-note i {
    color: #f39200;
}

.quote-modal-footer-link {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #94a3b8;
}

.quote-contact-link {
    color: #f39200;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s, transform 0.2s;
}

.quote-contact-link:hover {
    color: #ffb347;
    transform: translateX(3px);
}

.quote-success-body {
    text-align: center;
    padding: 48px 36px;
}

.quote-success-icon-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 22px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-success-icon-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(243, 146, 0, 0.2);
    animation: quotePulse 2s infinite ease-out;
}

@keyframes quotePulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(0.9); opacity: 0; }
}

.quote-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
    z-index: 2;
}

.quote-success-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
}

.quote-success-desc {
    font-size: 0.92rem;
    color: #94a3b8;
    max-width: 440px;
    margin: 0 auto 26px auto;
    line-height: 1.6;
}

.quote-success-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.quote-modal-btn-dismiss {
    padding: 11px 24px;
    background: #f39200;
    color: #0b0d11;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s;
}

.quote-modal-btn-dismiss:hover {
    background: #ff9e1b;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 146, 0, 0.4);
}

.quote-modal-btn-reset {
    padding: 11px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s;
}

.quote-modal-btn-reset:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

body.quote-modal-open {
    overflow: hidden !important;
}

.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(15, 15, 15, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #f3f4f6;
    box-shadow: 0 -8px 35px rgba(0, 0, 0, 0.75);
    z-index: 99998;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s ease;
    border-top: 1px solid rgba(246, 138, 36, 0.25);
    font-family: inherit;
}

.cookie-consent-banner.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.cookie-consent-inner {
    width: 100%;
    max-width: 100%;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-sizing: border-box;
}

.cookie-consent-text-wrap {
    flex: 1 1 auto;
    font-size: 13.5px;
    line-height: 1.6;
    color: #e5e7eb;
    letter-spacing: -0.01em;
}

.cookie-consent-text {
    display: inline;
}

.cookie-policy-link {
    color: var(--gold, #f68a24);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    margin-left: 4px;
    transition: color 0.2s ease;
}

.cookie-policy-link:hover {
    color: #fb923c;
    text-decoration: underline;
}

.cookie-consent-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    outline: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
    font-family: inherit;
}

.cookie-btn-settings {
    background-color: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.16);
}
.cookie-btn-settings:hover {
    background-color: rgba(246, 138, 36, 0.15);
    color: var(--gold, #f68a24);
    border-color: rgba(246, 138, 36, 0.45);
    transform: translateY(-2px);
}

.cookie-btn-reject {
    background-color: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.12);
}
.cookie-btn-reject:hover {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

.cookie-btn-accept {
    background: linear-gradient(135deg, var(--gold, #f68a24) 0%, var(--gold-2, #f57316) 100%);
    color: #0a0a0a !important;
    font-weight: 700;
    border: 1px solid rgba(246, 138, 36, 0.6);
    box-shadow: 0 4px 16px rgba(246, 138, 36, 0.35);
}
.cookie-btn-accept:hover {
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
    color: #000000 !important;
    box-shadow: 0 6px 24px rgba(246, 138, 36, 0.55);
    transform: translateY(-2px);
}

.cookie-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cookie-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.cookie-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cookie-modal-container {
    position: relative;
    width: 92%;
    max-width: 640px;
    max-height: 90vh;
    z-index: 2;
    transform: scale(0.94);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-modal-overlay.show .cookie-modal-container {
    transform: scale(1);
}

.cookie-modal-card {
    background: #111111;
    color: #f8fafc;
    border-radius: 16px;
    border: 1px solid rgba(246, 138, 36, 0.25);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(246, 138, 36, 0.1);
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.cookie-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: rgba(255, 255, 255, 0.02);
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.cookie-modal-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cookie-modal-icon {
    font-size: 26px;
    color: var(--gold, #f68a24);
    margin-top: 2px;
}

.cookie-modal-title {
    margin: 0 0 4px 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
}

.cookie-modal-desc {
    margin: 0;
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.5;
}

.cookie-modal-close {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.cookie-modal-close:hover {
    background: rgba(246, 138, 36, 0.2);
    color: var(--gold, #f68a24);
}

.cookie-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
}

.cookie-modal-body::-webkit-scrollbar {
    width: 6px;
}
.cookie-modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}
.cookie-modal-body::-webkit-scrollbar-thumb {
    background: rgba(246, 138, 36, 0.3);
    border-radius: 4px;
}
.cookie-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(246, 138, 36, 0.6);
}

.cookie-category-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 18px;
    transition: border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.cookie-category-item:hover {
    border-color: rgba(246, 138, 36, 0.2);
}

.cookie-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 12px;
}

.cookie-cat-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-cat-title {
    font-weight: 600;
    font-size: 14px;
    color: #f1f5f9;
}

.cookie-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cookie-badge-required {
    background: rgba(246, 138, 36, 0.15);
    color: var(--gold, #f68a24);
    border: 1px solid rgba(246, 138, 36, 0.35);
}

.cookie-cat-desc {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
}

.cookie-switch-label {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
    flex-shrink: 0;
}

.cookie-switch-label input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #334155;
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 24px;
}

.cookie-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
}

.cookie-switch-label input:checked + .cookie-switch-slider {
    background: linear-gradient(135deg, var(--gold, #f68a24), var(--gold-2, #f57316));
}

.cookie-switch-label input:checked + .cookie-switch-slider:before {
    transform: translateX(20px);
}

.cookie-switch-slider.disabled {
    cursor: not-allowed;
    background: linear-gradient(135deg, var(--gold, #f68a24), var(--gold-3, #d4881a));
    opacity: 0.9;
}

.cookie-modal-footer {
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.cookie-modal-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 768px) {
    .cookie-consent-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 18px;
        gap: 14px;
    }
    .cookie-consent-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .cookie-btn {
        width: 100%;
        text-align: center;
        padding: 10px 14px;
    }
    .cookie-modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .cookie-modal-footer-right {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
}

/* ==========================================================================
   REFERENCES SECTION (Moved from inline <style> in references.blade.php)
   ========================================================================== */
.references-section {
  background: var(--bg, #0a0a0a);
  position: relative;
  overflow: hidden;
  padding: 85px 0 80px;
  touch-action: pan-y;
}
.ref-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 35px;
  position: relative;
  z-index: 5;
}
.ref-nav-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.ref-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-dim, #9ca3af);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  outline: none;
}
.ref-nav-btn:hover {
  background: var(--gold, #f4a52a);
  color: #0b0c10;
  border-color: var(--gold, #f4a52a);
}
.ref-nav-btn.is-stopped {
  color: var(--gold, #f4a52a);
  border-color: var(--gold, #f4a52a);
  background: rgba(244, 165, 42, 0.12);
}
.ref-marquee-outer {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0 30px;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.ref-marquee-outer::before,
.ref-marquee-outer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 3;
  pointer-events: none;
}
.ref-marquee-outer::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg, #0a0a0a) 0%, transparent 100%);
}
.ref-marquee-outer::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg, #0a0a0a) 0%, transparent 100%);
}
.ref-marquee-inner {
  display: flex;
  width: max-content;
  touch-action: pan-y;
  transform: translate3d(0, 0, 0);
}
.ref-marquee-track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding-right: 20px;
  flex-shrink: 0;
  animation: refMarqueeLoop 32s linear infinite;
  touch-action: pan-y;
  transform: translate3d(0, 0, 0);
}
@media (hover: hover) and (pointer: fine) {
  .ref-marquee-outer:hover .ref-marquee-track {
    animation-play-state: paused;
  }
}
.ref-marquee-outer.is-paused .ref-marquee-track {
  animation-play-state: paused !important;
}
@keyframes refMarqueeLoop {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}
.ref-card-item {
  width: 270px;
  flex: 0 0 270px;
  display: flex;
  touch-action: pan-y;
}
.ref-slide-inner {
  position: relative;
  width: 100%;
  background: #141720;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  contain: content;
  touch-action: pan-y;
}
.ref-slide-inner.is-link { cursor: pointer; }
.ref-link-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-dim, #9ca3af);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
@media(hover: hover) and (pointer: fine) {
  .ref-slide-inner:hover {
    transform: translateY(-4px);
    border-color: var(--gold, #f4a52a);
    background: #181c27;
  }
  .ref-slide-inner:hover .ref-link-icon { opacity: 1; color: var(--gold, #f4a52a); }
  .ref-slide-inner:hover .ref-name { color: var(--gold, #f4a52a); }
}
.ref-slide-icon {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(244, 165, 42, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 8px;
  pointer-events: none;
}
.ref-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.ref-initials {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--gold, #f4a52a);
  letter-spacing: 1px;
  pointer-events: none;
}
.ref-slide-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  pointer-events: none;
}
.ref-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
  transition: color 0.2s ease;
  word-break: break-word;
}
.ref-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--text-dim-2, #8b92a2);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}
.ref-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold, #f4a52a);
  display: inline-block;
}
@media(max-width: 768px) {
  .references-section { padding: 45px 0 !important; }
  .ref-header-row { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
  .ref-nav-controls { align-self: flex-end; margin-bottom: 0; }
  .ref-marquee-track { gap: 10px; padding-right: 10px; animation-duration: 25s; will-change: auto; }
  .ref-card-item { width: 170px; flex: 0 0 170px; }
  .ref-slide-inner { padding: 14px 10px 12px; gap: 8px; border-radius: 12px; }
  .ref-slide-icon { width: 44px; height: 44px; border-radius: 10px; padding: 5px; }
  .ref-initials { font-size: 0.95rem; }
  .ref-name { font-size: 0.8rem; }
  .ref-badge { font-size: 0.58rem; letter-spacing: 0.5px; }
  .ref-nav-btn { width: 34px; height: 34px; }
  .ref-marquee-outer::before, .ref-marquee-outer::after { width: 25px; }
}