:root{
  --bg1:#0b0b0b; /* near black */
  --bg2:#141414; /* dark gray */
  --card:#171717; /* card dark surface */
  --muted:#bdbdbd; /* light muted text */
  --accent:#e53935; /* brand red */
  --gold:#d4af37; /* site text color */
  --hero-blue:#1e88e5; /* hero subtitle background */
  --topbar-height:48px;
  --navbar-height:72px;
}
*{box-sizing:border-box}
body{
  min-height:100vh;
  margin:0;
  font-family:Inter,system-ui,Arial,sans-serif;
  color:var(--gold);
  background:#0a0a0a;
  position:relative;
}
body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#1a1a1a;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(212,175,55,0.03) 50px, rgba(212,175,55,0.03) 51px),
    repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(212,175,55,0.03) 50px, rgba(212,175,55,0.03) 51px),
    repeating-linear-gradient(45deg, transparent, transparent 70px, rgba(212,175,55,0.02) 70px, rgba(212,175,55,0.02) 71px),
    repeating-linear-gradient(-45deg, transparent, transparent 70px, rgba(212,175,55,0.02) 70px, rgba(212,175,55,0.02) 71px);
  opacity:0.5;
  z-index:-1;
  pointer-events:none;
}
html{height:100%;min-height:100vh}

/* Preloader */
.preloader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  transition:opacity 0.5s ease, visibility 0.5s ease;
}
.preloader.hidden{
  opacity:0;
  visibility:hidden;
}
.preloader-logo{
  width:280px;
  max-width:80vw;
  height:auto;
  animation:zoomInOut 1.5s ease-in-out infinite;
}
@keyframes zoomInOut{
  0%, 100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.2);opacity:0.8}
}

/* Navbar Logo */
.navbar-logo{
  height:auto !important;
  width:200px !important;
  max-width:200px !important;
  transition:transform 0.25s ease;
  will-change:transform;
}

@keyframes logo-buzz-pop{
  0%{transform:scale(1) translateX(0) rotate(0)}
  20%{transform:scale(1.04) translateX(-1px) rotate(-1deg)}
  40%{transform:scale(1.07) translateX(1px) rotate(1deg)}
  60%{transform:scale(1.09) translateX(-1px) rotate(-1deg)}
  80%{transform:scale(1.05) translateX(1px) rotate(1deg)}
  100%{transform:scale(1) translateX(0) rotate(0)}
}

@media (hover: hover) and (pointer: fine){
  .navbar-logo:hover{
    animation:logo-buzz-pop 0.45s cubic-bezier(.22,.61,.36,1);
  }
}

@media (prefers-reduced-motion: reduce){
  .navbar-logo{transition:none}
}

/* Paragraphs and most text use gold for readability on dark backgrounds */
p{color:var(--gold);}

/* Hero subtitle: blue pill with gold text for emphasis */
.hero-sub{background:var(--hero-blue);color:var(--gold);display:inline-block;padding:0.45rem 0.9rem;border-radius:12px;font-weight:600}

/* Make muted utility use gold-tinged color to keep hierarchy while following request */
.muted{color:color-mix(in srgb, var(--gold) 70%, #ffffff 30%)}
.container{max-width:1100px;margin:28px auto;padding:16px}
.hero{color:#fff;text-align:center;margin-bottom:20px}
.hero-bg{background-size:cover;background-position:center;border-bottom-left-radius:18px;border-bottom-right-radius:18px}
/* backdrop image for header (menu + hero content) */
.hero-bg{
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../assets/1.jpeg');
  background-repeat:no-repeat;
}
.card{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,0.6);color:#eee;will-change:transform,box-shadow}

/* Card hover animation for pointer devices */
@media (hover: hover) and (pointer: fine) {
  .card{transition:transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease}
  .card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,0.7);z-index:3}
}

/* Respect user reduced motion setting */
@media (prefers-reduced-motion: reduce){
  .card{transition:none}
  .card:hover{transform:none;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
}
.muted{color:var(--muted)}

/* Forms overrides to match brand */
.form-control:focus,.form-select:focus{box-shadow:0 6px 20px rgba(229,57,53,0.12);border-color:var(--accent)}

/* Buttons */
.btn-primary{background:var(--accent);border-color:var(--accent);box-shadow:0 8px 20px rgba(229,57,53,0.12)}

/* Validation */
.field-error{color:#d63031;font-size:13px;margin-top:6px}
.input-error{border-color:rgba(214,48,49,0.9);box-shadow:0 4px 12px rgba(214,48,49,0.06) inset}

/* Responsive tweaks */
@media (max-width:640px){
  .container{margin:18px;padding:14px}
}

/* Carousel image sizing */
.carousel-img{height:320px;object-fit:cover}
@media (max-width:576px){
  .carousel-img{height:200px}
}

/* Topbar and header styling */
.topbar{font-size:0.85rem;padding:6px 0;background:transparent;position:fixed;top:0;left:0;width:100%;z-index:60;height:var(--topbar-height);display:flex;align-items:center}
.topbar .container{padding-left:16px;padding-right:16px}
.topbar a{text-decoration:none;color:var(--muted)}

/* Make the contact line in the topbar use the brand red for emphasis */
.topbar .contact-inline,
.topbar .contact-inline a{
  color:var(--accent);
}
.hero-headline{letter-spacing:0.2px}
.hero-sub{opacity:0.9}

/* Desktop: fix navbar under topbar */
@media (min-width:769px){
  .navbar{backdrop-filter: blur(6px);position:fixed;top:var(--topbar-height);left:0;width:100%;z-index:55;background:rgba(11,11,11,0.86);box-shadow:0 6px 20px rgba(0,0,0,0.6)}
  .navbar .container{height:var(--navbar-height);display:flex;align-items:center}
  .navbar .navbar-brand{margin-right:1rem}
  .hero{padding-top:calc(var(--topbar-height) + var(--navbar-height) + 24px)}
}

/* Mobile: hide compact topbar and show app-like bottom nav */
@media (max-width:768px){
  .topbar{display:none;position:relative;height:auto}
  .navbar{position:fixed;bottom:0;left:0;width:100%;z-index:60;background:rgba(11,11,11,0.96);padding:8px 10px;border-top-left-radius:12px;border-top-right-radius:12px;box-shadow:0 -10px 40px rgba(0,0,0,0.6)}
  .navbar .container{display:flex;align-items:center;justify-content:space-between;padding:0}
  .navbar .navbar-brand{font-size:1rem}
  .navbar .navbar-toggler{border:0;background:transparent}
  .navbar .navbar-nav{display:flex;gap:8px}
  .navbar .nav-link{padding:8px 12px;border-radius:10px;display:flex;align-items:center;gap:8px;font-weight:600}
  .hero{padding-top:24px;padding-bottom:84px}
  .carousel-img{height:200px}
}

/* Mobile app-style bottom nav (separate from bootstrap navbar) */
.mobile-bottom-nav{position:fixed;bottom:12px;left:12px;right:12px;z-index:70;background:linear-gradient(180deg, rgba(20,20,20,0.98), rgba(10,10,10,0.98));border-radius:14px;padding:8px 12px;display:flex;justify-content:space-around;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,0.6)}
.mobile-bottom-nav a{flex:1;text-align:center;color:var(--gold);text-decoration:none;padding:8px 6px;border-radius:10px;display:flex;flex-direction:column;gap:6px;align-items:center;font-weight:600}
.mobile-bottom-nav a .mb-icon{font-size:20px}
.mobile-bottom-nav a .mb-label{font-size:12px}
.mobile-bottom-nav a.active{background:rgba(229,57,53,0.08);box-shadow:inset 0 0 0 1px rgba(229,57,53,0.06)}

@media (min-width:769px){
  .mobile-bottom-nav{display:none}
}

/* Flying tool artwork */
.flying-tools{position:fixed;inset:0;pointer-events:none;z-index:25;overflow:visible}
.flying-tool{position:absolute;width:48px;height:48px;opacity:0.95;will-change:transform,opacity;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.5));transform-origin:center}

/* Floating place-name labels */
.flying-place{position:absolute;opacity:0.95;pointer-events:none;color:var(--gold);background:rgba(255,255,255,0.04);padding:6px 10px;border-radius:10px;font-weight:700;will-change:transform,opacity;backdrop-filter: blur(2px)}

/* sample keyframes: float across and rotate */
@keyframes float-right {
  0%{transform:translateX(-10vw) translateY(0) rotate(0deg);opacity:0}
  10%{opacity:1}
  50%{transform:translateX(40vw) translateY(-10vh) rotate(180deg)}
  100%{transform:translateX(110vw) translateY(0) rotate(360deg);opacity:0}
}
@keyframes float-left {
  0%{transform:translateX(110vw) translateY(0) rotate(0deg);opacity:0}
  10%{opacity:1}
  50%{transform:translateX(40vw) translateY(-8vh) rotate(-180deg)}
  100%{transform:translateX(-10vw) translateY(0) rotate(-360deg);opacity:0}
}

@keyframes float-right-text {
  0%{transform:translateX(-10vw) translateY(0);opacity:0}
  10%{opacity:1}
  50%{transform:translateX(40vw) translateY(-6vh)}
  100%{transform:translateX(110vw) translateY(0);opacity:0}
}
@keyframes float-left-text {
  0%{transform:translateX(110vw) translateY(0);opacity:0}
  10%{opacity:1}
  50%{transform:translateX(40vw) translateY(-6vh)}
  100%{transform:translateX(-10vw) translateY(0);opacity:0}
}

@keyframes float-bottom-text {
  0%{transform:translateY(-10vh) translateX(0);opacity:0}
  10%{opacity:1}
  50%{transform:translateY(60vh) translateX(-6vw)}
  100%{transform:translateY(120vh) translateX(0);opacity:0}
}

@keyframes float-top-text {
  0%{transform:translateY(10vh) translateX(0);opacity:0}
  10%{opacity:1}
  50%{transform:translateY(-60vh) translateX(6vw)}
  100%{transform:translateY(-120vh) translateX(0);opacity:0}
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .flying-tool,.flying-place{display:none}
}

/* Rotating headline animation */
.hero-headline #heroRotate{display:inline-block;position:relative;opacity:1;transition:opacity 400ms ease, transform 400ms ease}
.hero-headline .fade-out{opacity:0;transform:translateY(-8px)}
.hero-headline .fade-in{opacity:1;transform:translateY(0)}

/* Carousel caption overlay for professional look */
.carousel-caption{position:absolute;left:3rem;bottom:2.5rem;text-align:left;max-width:56%}
.carousel-caption .caption-box{background:rgba(0,0,0,0.45);padding:18px;border-radius:10px}
.carousel-caption h5{color:var(--gold);font-weight:700;font-size:1.05rem}
.carousel-caption p{color:var(--gold);opacity:0.95;margin-top:6px}

@media (max-width:768px){
  .carousel-caption{left:1rem;right:1rem;max-width:none;bottom:1rem}
  .carousel-caption .caption-box{padding:12px}
}

/* Services grid styles */
.service-card{background:linear-gradient(180deg, rgba(30,30,30,0.9), rgba(15,15,15,0.9));border-radius:12px}
.service-icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,0.03);}
.service-tags .badge{background:rgba(255,255,255,0.03);color:var(--muted);border-radius:6px;padding:.25rem .45rem}
.service-card .card-title{color:var(--gold)}

@media (max-width:576px){
  #servicesGrid .col{min-height:110px}
}

/* WhatsApp floating button */
.whatsapp-float{position:fixed;right:18px;bottom:92px;z-index:120;background:#25D366;color:#fff;padding:10px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(37,211,102,0.14);transition:transform .18s ease, box-shadow .18s}
.whatsapp-float .wa-icon{font-size:18px;line-height:1}
.whatsapp-float .wa-text{font-size:14px}
.whatsapp-float:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(37,211,102,0.18)}

@media (max-width:768px){
  /* keep the button above mobile bottom nav */
  .whatsapp-float{right:12px;bottom:96px;padding:10px 12px}
  .mobile-bottom-nav ~ .whatsapp-float{bottom:96px}
}

@media (prefers-reduced-motion: reduce){
  .whatsapp-float{transition:none}
}

/* Floating Request Repair CTA */
.float-cta{position:fixed;left:18px;bottom:18px;z-index:130;background:var(--accent);color:#fff;padding:12px 18px;border-radius:999px;border:0;font-weight:800;font-size:16px;box-shadow:0 14px 36px rgba(229,57,53,0.18);cursor:pointer}
.float-cta{display:inline-flex;align-items:center;gap:10px}
.float-cta:hover{transform:translateY(-4px);filter:brightness(.98)}
.float-cta-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.float-cta-icon svg{display:block;width:18px;height:18px}
.float-cta-text{line-height:1}

@media (max-width:768px){
  .float-cta{left:12px;bottom:96px}
}

@media (prefers-reduced-motion: reduce){
  .float-cta{transition:none}
}