/* Emergency Tow Service Design */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box;font-family:'Rubik',Arial,sans-serif;}
body{background:#0f172a;color:#e2e8f0;padding-top:80px;}
a{color:#fbbf24;text-decoration:none;transition:all .3s;}
a:hover{color:#f59e0b;}

/* Emergency Bar - FIXED TOP */
.emergency-bar{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    z-index:999;
    background:#111827;
    background-image:repeating-linear-gradient(45deg,#111827 0,#111827 20px,#1f2937 20px,#1f2937 40px);
    border-bottom:5px solid;
    border-image:repeating-linear-gradient(90deg,#fbbf24 0,#fbbf24 30px,#111827 30px,#111827 60px) 5;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    padding:15px;
    box-shadow:0 6px 20px rgba(251,191,36,.4);
}
.emergency-bar .phone{
    font-weight:900;
    font-size:28px;
    letter-spacing:1px;
    color:#fff;
    text-shadow:0 0 10px rgba(251,191,36,.8),0 0 20px rgba(251,191,36,.6);
    animation:glow 1.5s ease-in-out infinite alternate;
}
.emergency-bar .tag{
    background:#fbbf24;
    color:#111827;
    font-weight:900;
    font-size:16px;
    padding:8px 16px;
    border-radius:4px;
    text-transform:uppercase;
    box-shadow:0 4px 10px rgba(251,191,36,.5);
    letter-spacing:1px;
}
.emergency-bar .pulse{
    background:#dc2626;
    color:#fff;
    font-weight:700;
    padding:8px 16px;
    border-radius:4px;
    animation:pulse 1.5s ease-in-out infinite;
    text-transform:uppercase;
    font-size:14px;
    box-shadow:0 4px 10px rgba(220,38,38,.5);
}
@keyframes glow{0%{text-shadow:0 0 10px rgba(251,191,36,.8),0 0 20px rgba(251,191,36,.6);}100%{text-shadow:0 0 20px rgba(251,191,36,1),0 0 30px rgba(251,191,36,.8),0 0 40px rgba(251,191,36,.6);}}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

/* Header */
header{
    background:#1f2937;
    border-bottom:4px solid #fbbf24;
    padding:15px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:80px;
    z-index:99;
    box-shadow:0 4px 12px rgba(0,0,0,.5);
}
header h1{font-size:24px;color:#fbbf24;text-transform:uppercase;letter-spacing:1px;font-weight:900;}
nav a{
    margin-left:20px;
    font-weight:700;
    text-transform:uppercase;
    font-size:14px;
    padding:8px 12px;
    border-radius:4px;
    transition:all .3s;
}
nav a:hover{background:#fbbf24;color:#111827;}

/* Hero Section */
.hero{
    background:linear-gradient(135deg,#dc2626 0%,#991b1b 100%);
    position:relative;
    padding:80px 30px;
    overflow:hidden;
}
.hero::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:repeating-linear-gradient(45deg,transparent 0,transparent 50px,rgba(0,0,0,.1) 50px,rgba(0,0,0,.1) 100px);
    pointer-events:none;
}
.hero .inner{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:50px;
    align-items:center;
    position:relative;
    z-index:1;
}
.hero h1{
    font-size:56px;
    line-height:1.1;
    font-weight:900;
    color:#fff;
    text-shadow:3px 3px 0 rgba(0,0,0,.3);
    margin-bottom:20px;
    text-transform:uppercase;
}
.hero p{
    font-size:20px;
    color:#fef3c7;
    margin-bottom:30px;
    font-weight:600;
}
.hero .cta{display:flex;gap:15px;flex-wrap:wrap;}
.hero .cta .btn{
    background:#fbbf24;
    color:#111827;
    padding:16px 32px;
    font-size:18px;
    font-weight:900;
    border-radius:6px;
    text-transform:uppercase;
    box-shadow:0 6px 20px rgba(251,191,36,.4);
    transition:all .3s;
    border:3px solid #111827;
}
.hero .cta .btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(251,191,36,.6);}
.hero img{
    width:100%;
    height:auto;
    border-radius:12px;
    border:5px solid #fbbf24;
    box-shadow:0 10px 40px rgba(0,0,0,.5);
}

/* Container */
.container{max-width:1200px;margin:60px auto;padding:0 30px;}

/* Sections */
section{
    background:#1e293b;
    border:3px solid #334155;
    border-radius:12px;
    padding:40px;
    margin-bottom:40px;
    box-shadow:0 8px 25px rgba(0,0,0,.3);
}
section h2{
    font-size:36px;
    color:#fbbf24;
    margin-bottom:20px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
    border-bottom:4px solid #fbbf24;
    padding-bottom:10px;
}

/* Service Cards */
.cards{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:30px;
}
.card{
    background:#111827;
    border:3px solid #fbbf24;
    border-radius:12px;
    padding:30px;
    box-shadow:0 8px 20px rgba(0,0,0,.4);
    transition:all .3s;
    position:relative;
    overflow:hidden;
}
.card::before{
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    background:linear-gradient(45deg,#fbbf24,#f59e0b,#fbbf24);
    border-radius:12px;
    opacity:0;
    transition:opacity .3s;
    z-index:-1;
}
.card:hover{transform:translateY(-10px);box-shadow:0 15px 40px rgba(251,191,36,.5);}
.card:hover::before{opacity:1;}
.card img{
    width:100%;
    height:160px;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:20px;
    border:2px solid #334155;
}
.card h3{
    font-size:22px;
    color:#fbbf24;
    margin-bottom:12px;
    font-weight:900;
}
.card p{color:#cbd5e1;font-size:15px;line-height:1.6;}

/* Gallery Grid */
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:20px;
    margin-top:20px;
}
.gallery-grid img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:8px;
    border:3px solid #334155;
    transition:all .3s;
}
.gallery-grid img:hover{
    transform:scale(1.05);
    border-color:#fbbf24;
    box-shadow:0 10px 30px rgba(251,191,36,.4);
}

/* Buttons */
.btn{
    display:inline-block;
    padding:12px 24px;
    background:#fbbf24;
    color:#111827;
    border-radius:6px;
    font-size:16px;
    font-weight:900;
    border:3px solid #111827;
    text-transform:uppercase;
    transition:all .3s;
    box-shadow:0 4px 12px rgba(251,191,36,.3);
}
.btn:hover{
    background:#f59e0b;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(251,191,36,.5);
}
.btn-danger{background:#dc2626;color:#fff;border-color:#991b1b;}
.btn-danger:hover{background:#b91c1c;}

/* Tables */
table{width:100%;border-collapse:collapse;margin-top:20px;background:#1e293b;}
table th,table td{padding:12px;border:2px solid #334155;text-align:left;}
table th{background:#111827;color:#fbbf24;font-weight:900;text-transform:uppercase;}

/* Login page */
.login-container{
    width:400px;
    margin:100px auto;
    background:#1e293b;
    padding:40px;
    border:3px solid #fbbf24;
    border-radius:12px;
    box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.login-container h2{text-align:center;margin-bottom:30px;color:#fbbf24;font-size:32px;font-weight:900;}
.login-container label{display:block;margin-bottom:15px;font-size:16px;color:#fbbf24;font-weight:700;}
.login-container input{
    width:100%;
    padding:12px;
    margin-top:8px;
    border:2px solid #334155;
    border-radius:6px;
    background:#111827;
    color:#fff;
    font-size:16px;
}
.login-container button{
    width:100%;
    padding:15px;
    background:#fbbf24;
    color:#111827;
    border:none;
    border-radius:6px;
    cursor:pointer;
    margin-top:20px;
    font-weight:900;
    font-size:18px;
    text-transform:uppercase;
}
.login-container button:hover{background:#f59e0b;}
.error{color:#fca5a5;margin-bottom:15px;text-align:center;font-weight:700;}

/* Footer */
footer{
    color:#94a3b8;
    text-align:center;
    margin:60px 0 40px;
    padding:20px;
    border-top:3px solid #334155;
}

/* Responsive */
@media(max-width:900px){
    .hero .inner{grid-template-columns:1fr;}
    .hero h1{font-size:40px;}
    .emergency-bar{flex-direction:column;gap:10px;padding:12px;}
    .emergency-bar .phone{font-size:24px;}
    section > div[style*="grid-template-columns"]{grid-template-columns:1fr !important;}
}