/* ============================================
   MARVEL SHOWROOM — SERVICE PAGES SHARED CSS
   3 Colors Only: #0a0a0a | #ffffff | #e00012
   Fonts: Bebas Neue | Rajdhani | Inter
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --black:       #0a0a0a;
  --black-soft:  #111111;
  --black-muted: #1a1a1a;
  --black-card:  #161616;
  --white:       #ffffff;
  --white-mid:   rgba(255,255,255,0.55);
  --white-dim:   rgba(255,255,255,0.07);
  --red:         #e00012;
  --red-dim:     rgba(224,0,18,0.10);
  --red-border:  rgba(224,0,18,0.28);
  --font-display:'Bebas Neue', sans-serif;
  --font-body:   'Rajdhani', sans-serif;
  --font-fine:   'Inter', sans-serif;
  --radius:      14px;
  --ease:        cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-fine);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--black);}
::-webkit-scrollbar-thumb{background:var(--red);border-radius:2px;}

/* ============ NAVBAR ============ */
.navbar{
  position:sticky;top:0;z-index:200;
  height:72px;
  padding:0 72px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.nav-logo{
  font-family:var(--font-display);
  font-size:24px;letter-spacing:5px;
  display:flex;align-items:center;gap:10px;
}
.nav-logo::before{
  content:'';width:9px;height:9px;
  background:var(--red);border-radius:50%;
  display:inline-block;
  box-shadow:0 0 10px var(--red);
}

.nav-links{
  display:flex;align-items:center;gap:36px;list-style:none;
}
.nav-links a{
  font-family:var(--font-body);font-size:12px;
  font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--white-mid);transition:color 0.3s;
  position:relative;padding-bottom:4px;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:1px;background:var(--red);
  transition:width 0.3s;
}
.nav-links a:hover,
.nav-links a.active{color:var(--white);}
.nav-links a:hover::after,
.nav-links a.active::after{width:100%;}

.nav-cta{
  background:var(--red);color:var(--white);
  font-family:var(--font-body);font-size:12px;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
  border:none;border-radius:30px;padding:12px 26px;
  cursor:pointer;
  transition:background 0.3s,transform 0.2s;
}
.nav-cta:hover{background:#c0000f;transform:scale(1.04);}

/* ============ PAGE HERO BANNER ============ */
.page-hero{
  background:var(--black-soft);
  border-bottom:1px solid rgba(255,255,255,0.05);
  padding:80px 72px 64px;
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:attr(data-bg);
  position:absolute;
  font-family:var(--font-display);
  font-size:180px;letter-spacing:10px;
  color:rgba(255,255,255,0.022);
  top:50%;right:-10px;
  transform:translateY(-50%);
  pointer-events:none;white-space:nowrap;line-height:1;
}
/* Diagonal red accent */
.page-hero::after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:4px;height:100%;
  background:linear-gradient(to bottom,var(--red),transparent);
}

.page-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--red-dim);border:1px solid var(--red-border);
  border-radius:30px;padding:6px 16px;
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--red);margin-bottom:20px;
  width:fit-content;
}
.page-tag::before{content:'';width:5px;height:5px;background:var(--red);border-radius:50%;}

.page-title{
  font-family:var(--font-display);
  font-size:clamp(48px,5.5vw,80px);
  letter-spacing:3px;line-height:1;
  color:var(--white);margin-bottom:8px;
}
.page-title em{font-style:normal;color:var(--red);}

.page-subtitle{
  font-size:14px;font-weight:300;
  color:var(--white-mid);line-height:1.8;
  max-width:540px;margin-top:14px;
}
.page-line{width:50px;height:3px;background:var(--red);border-radius:2px;margin-top:22px;}

/* Breadcrumb */
.breadcrumb{
  padding:14px 72px;
  background:var(--black-muted);
  border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--white-mid);
  font-family:var(--font-fine);
}
.breadcrumb a{color:var(--white-mid);transition:color 0.2s;}
.breadcrumb a:hover{color:var(--red);}
.breadcrumb .sep{color:rgba(255,255,255,0.2);}
.breadcrumb .cur{color:var(--white);}

/* ============ SECTION HEADER ============ */
.sec-header{text-align:center;margin-bottom:60px;}
.sec-tag{
  display:inline-block;font-size:10px;letter-spacing:4px;
  text-transform:uppercase;color:var(--red);
  font-family:var(--font-fine);margin-bottom:12px;
}
.sec-title{
  font-family:var(--font-display);
  font-size:clamp(36px,4vw,62px);
  letter-spacing:3px;color:var(--white);line-height:1;
}
.sec-title em{font-style:normal;color:var(--red);}
.sec-line{width:50px;height:2px;background:var(--red);margin:18px auto 0;border-radius:2px;}

/* ============ BUTTONS ============ */
.btn-red{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--red);color:var(--white);
  font-family:var(--font-body);font-size:12px;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
  border:none;border-radius:30px;padding:13px 26px;
  cursor:pointer;transition:background 0.3s,transform 0.2s;
  text-decoration:none;
}
.btn-red:hover{background:#c0000f;transform:translateY(-2px);}

.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--white);
  font-family:var(--font-body);font-size:12px;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.18);border-radius:30px;
  padding:13px 26px;cursor:pointer;transition:all 0.3s;
  text-decoration:none;
}
.btn-outline:hover{border-color:var(--white);}

/* ============ CTA STRIP ============ */
.cta-strip{
  background:var(--red);padding:64px 72px;
  position:relative;overflow:hidden;
}
.cta-strip::before{
  content:'MARVEL';
  position:absolute;font-family:var(--font-display);
  font-size:180px;letter-spacing:15px;
  color:rgba(255,255,255,0.06);
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;white-space:nowrap;
}
.cta-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  max-width:1300px;margin:auto;
}
.cta-strip h2{
  font-family:var(--font-display);
  font-size:clamp(28px,3.5vw,52px);letter-spacing:3px;
  color:var(--white);line-height:1.1;
}
.cta-strip p{
  font-size:13px;font-weight:300;
  color:rgba(255,255,255,0.75);margin-top:8px;
}
.btn-white{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);color:var(--red);
  font-family:var(--font-body);font-size:12px;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
  border:none;border-radius:30px;padding:15px 32px;
  cursor:pointer;transition:transform 0.2s;text-decoration:none;
  white-space:nowrap;
}
.btn-white:hover{transform:scale(1.04);}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--black-soft);
  border-top:1px solid rgba(255,255,255,0.06);
  margin-top:auto;
}

/* Top bar */
.footer-bar{
  background:var(--red);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.fb-item{
  padding:26px 40px;
  display:flex;align-items:center;gap:14px;
  border-right:1px solid rgba(255,255,255,0.15);
}
.fb-item:last-child{border-right:none;}
.fb-icon{font-size:20px;flex-shrink:0;}
.fb-text strong{
  display:block;font-family:var(--font-body);
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,0.65);margin-bottom:3px;
}
.fb-text span{
  font-family:var(--font-body);font-size:15px;
  font-weight:700;color:var(--white);
}

/* Main footer */
.footer-main{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:56px;padding:64px 72px;
}
.footer-logo{
  font-family:var(--font-display);font-size:34px;
  letter-spacing:6px;display:flex;align-items:center;gap:8px;
  margin-bottom:14px;
}
.footer-logo::before{
  content:'';width:9px;height:9px;
  background:var(--red);border-radius:50%;
  box-shadow:0 0 8px var(--red);
}
.footer-tagline{
  font-size:13px;font-weight:300;
  color:var(--white-mid);line-height:1.75;margin-bottom:24px;
}
.socials{display:flex;gap:10px;}
.soc-btn{
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.1);
  background:transparent;color:var(--white);font-size:15px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.3s;text-decoration:none;
}
.soc-btn:hover{background:var(--red);border-color:var(--red);}

.fcol h4{
  font-family:var(--font-body);font-size:11px;
  font-weight:600;letter-spacing:3px;text-transform:uppercase;
  color:var(--white);margin-bottom:22px;
  position:relative;padding-bottom:14px;
}
.fcol h4::after{
  content:'';position:absolute;bottom:0;left:0;
  width:28px;height:2px;background:var(--red);
}
.fcol ul{list-style:none;}
.fcol ul li{margin-bottom:10px;}
.fcol ul li a{
  font-size:13px;font-weight:300;
  color:var(--white-mid);transition:color 0.2s;
}
.fcol ul li a:hover{color:var(--white);}

.map-embed{
  background:var(--black-muted);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;overflow:hidden;
  height:150px;transition:border-color 0.3s;
}
.map-embed:hover{border-color:var(--red-border);}
.map-embed iframe{
  width:100%;height:100%;border:0;
  filter:grayscale(100%) invert(88%) contrast(90%);
  transition:filter 0.4s;
}
.map-embed:hover iframe{filter:grayscale(20%) invert(0%) contrast(100%);}
.map-addr{
  font-size:12px;font-weight:300;
  color:var(--white-mid);margin-top:10px;line-height:1.6;
}
.map-btns{display:flex;gap:8px;margin-top:10px;}
.mbtn{
  flex:1;display:flex;align-items:center;justify-content:center;
  gap:5px;padding:8px;border-radius:20px;
  font-size:10px;font-weight:500;letter-spacing:0.5px;
  transition:all 0.25s;text-decoration:none;
}
.mbtn.open{
  border:1px solid rgba(255,255,255,0.12);
  color:var(--white-mid);
}
.mbtn.open:hover{border-color:var(--white);color:var(--white);}
.mbtn.dir{background:var(--red);border:1px solid var(--red);color:var(--white);}
.mbtn.dir:hover{background:#c0000f;}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.05);
  padding:18px 72px;
  display:flex;align-items:center;justify-content:space-between;
}
.footer-bottom p{
  font-size:12px;font-weight:300;color:var(--white-mid);
}
.footer-bottom span{color:var(--red);}
.footer-links{display:flex;gap:22px;}
.footer-links a{
  font-size:12px;color:var(--white-mid);
  transition:color 0.2s;
}
.footer-links a:hover{color:var(--white);}

/* ============ ANIMATIONS ============ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}
.fade-up{animation:fadeUp 0.65s var(--ease) both;}
.d1{animation-delay:0.1s;} .d2{animation-delay:0.2s;}
.d3{animation-delay:0.3s;} .d4{animation-delay:0.4s;}
.d5{animation-delay:0.5s;} .d6{animation-delay:0.6s;}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .navbar{padding:0 32px;}
  .page-hero{padding:60px 32px 48px;}
  .breadcrumb{padding:12px 32px;}
  .footer-main{grid-template-columns:1fr 1fr;gap:36px;padding:48px 32px;}
  .footer-bottom{padding:16px 32px;}
  .cta-strip{padding:48px 32px;}
}
@media(max-width:768px){
  .nav-links{display:none;}
  .footer-bar{grid-template-columns:1fr;}
  .fb-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.1);}
  .footer-main{grid-template-columns:1fr;padding:36px 24px;}
}