/* --- Reset & Base --- */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Poppins',system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color:#1a1a1a;
  background:#e9e9e9;
  line-height:1.7;
}
.container{width:90%;max-width:1100px;margin:0 auto}

/* --- Colors --- */
:root{
  --primary-red:#e50914;
  --light-red:#ff4d5a;
  --dark-gray:#1a1a1a;
  --gray-bg:#e9e9e9;
}

/* --- Header --- */
header{background:var(--dark-gray);color:#fff;padding:1rem 0;border-bottom:3px solid var(--primary-red);position:sticky;top:0;z-index:1000}
header .container{display:flex;justify-content:space-between;align-items:center}
.logo-container{display:flex;align-items:center;gap:.5rem}
.logo-img{width:45px;height:45px;object-fit:contain;filter:brightness(0) saturate(100%) invert(19%) sepia(93%) saturate(5771%) hue-rotate(353deg) brightness(97%) contrast(101%)}
.logo-text{font-size:1.5rem;color:#fff}
nav ul{list-style:none;display:flex;gap:1.5rem}
nav a{color:#fff;text-decoration:none;font-weight:500;position:relative}
nav a::after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--primary-red);transition:.3s}
nav a:hover::after{width:100%}
.header-right{display:flex;align-items:center;gap:1rem}
.phone-link{display:inline-flex;align-items:center;gap:.4rem;background:var(--primary-red);color:#fff;text-decoration:none;font-weight:700;padding:.55rem .9rem;border-radius:.5rem;box-shadow:0 2px 8px rgba(0,0,0,.25);white-space:nowrap;transition:background .2s ease, transform .05s ease}
.phone-link:hover{background:#c70711}
.phone-link:active{transform:translateY(1px)}

@media (max-width:900px){nav ul{gap:1rem}.phone-link{padding:.5rem .7rem}}
@media (max-width:768px){.phone-link{display:none}}

/* --- Hero --- */
.hero{position:relative;height:80vh;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(50%)}
.hero-content{position:relative;z-index:1;max-width:800px;padding:1rem}
.hero-content h1{font-size:3rem;margin-bottom:1rem}
.hero-content p{font-size:1.2rem;margin-bottom:2rem}
.btn{background:var(--primary-red);color:#fff;padding:.75rem 1.5rem;border:none;border-radius:4px;text-decoration:none;font-weight:600;transition:.3s}
.btn:hover{background:var(--light-red)}

/* --- Particles Layer Helpers --- */
.has-particles{position:relative;overflow:hidden;background:var(--gray-bg)}
.bg-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.content-layer{position:relative;z-index:1}

/* --- Services --- */
.services{padding:3rem 0;text-align:center}
.services h2{color:var(--dark-gray);margin-bottom:1rem}
.services .intro-text{max-width:800px;margin:0 auto 2rem;color:#555}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.service-card{background:#fff;border:1px solid #ddd;border-top:4px solid var(--primary-red);padding:1.75rem;border-radius:6px;transition:transform .3s, box-shadow .3s}
.service-card:hover{transform:translateY(-5px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.service-card h3{color:var(--primary-red);margin-bottom:.5rem}
.service-card p{color:#333;font-size:.95rem;line-height:1.5}

/* --- About --- */
.about{padding:3rem 0;text-align:center}
.about h2{color:var(--dark-gray);margin-bottom:1.5rem}
.about p{max-width:850px;margin:.75rem auto;color:#444;font-size:1rem}

/* --- Contact --- */
.contact{padding:3rem 0;text-align:center}
.contact h2{color:var(--dark-gray);margin-bottom:1rem}
.contact p{max-width:700px;margin:0 auto 1.5rem;color:#444}
form{display:flex;flex-direction:column;gap:1rem;max-width:500px;margin:2rem auto}
input,textarea{padding:.75rem;border:1px solid #ccc;border-radius:4px;font-size:1rem;background:#fff}
button.btn{cursor:pointer}

/* --- Footer --- */
footer{background:var(--dark-gray);color:#fff;text-align:center;padding:1.5rem 0;border-top:3px solid var(--primary-red)}

/* Floating call button for mobile */
.mobile-call-btn{display:none;position:fixed;bottom:20px;right:20px;background:var(--primary-red);color:#fff;font-weight:700;text-decoration:none;padding:12px 20px;border-radius:50px;box-shadow:0 4px 15px rgba(0,0,0,.25);z-index:9999;transition:background .2s ease}
.mobile-call-btn:hover{background:var(--light-red)}
@media (max-width:768px){.mobile-call-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}}

/* Shiny hover shared */
.phone-link, form button, button[type="submit"]{position:relative;overflow:hidden}
.phone-link::after, form button::after, button[type="submit"]::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:rgba(255,255,255,.3);transform:skewX(-20deg);transition:.5s}
.phone-link:hover::after, form button:hover::after, button[type="submit"]:hover::after{left:125%}
form button, button[type="submit"]{background:var(--primary-red);color:#fff;border:none;font-weight:700;padding:.8rem 1.5rem;border-radius:6px;cursor:pointer;transition:background .3s ease, transform .2s ease}
form button:hover, button[type="submit"]:hover{background:#b80000;transform:translateY(-2px)}