/* Takrengöring Malmö - Stilmall 2008 stil med modern twist */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Verdana,Arial,sans-serif;font-size:14px;line-height:1.6;color:#333;background:#f5f5f5}
.container{max-width:980px;margin:0 auto;padding:0 15px}

/* Taklogotyp med CSS */
.logo{display:inline-block;position:relative;font-size:24px;font-weight:bold;color:#fff;text-decoration:none;background:linear-gradient(135deg,#9b59b6,#8e44ad);padding:10px 20px;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.2)}
.logo:before{content:"▲";position:absolute;top:-8px;left:50%;transform:translateX(-50%);color:#ffeb3b;font-size:20px}

/* Huvudnavigation */
header{background:linear-gradient(to bottom,#fff,#f9f9f9);border-bottom:3px solid #ffeb3b;box-shadow:0 2px 10px rgba(0,0,0,0.1);position:sticky;top:0;z-index:1000}
.nav-wrapper{display:flex;justify-content:space-between;align-items:center;padding:15px 0}
nav ul{list-style:none;display:flex;gap:20px}
nav a{color:#555;text-decoration:none;font-weight:500;padding:8px 12px;border-radius:3px;transition:all 0.3s}
nav a:hover{background:#f0e6ff;color:#8e44ad}

/* Glödande CTA-knappar */
.cta-btn{display:inline-block;background:linear-gradient(135deg,#90EE90,#7FDD7F);color:#fff;padding:12px 30px;text-decoration:none;border-radius:25px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;box-shadow:0 0 20px rgba(144,238,144,0.5);animation:glow 2s infinite;transition:all 0.3s}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 5px 30px rgba(144,238,144,0.7)}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(144,238,144,0.5)}50%{box-shadow:0 0 30px rgba(144,238,144,0.8)}}

/* Hjältesektionen */
.hero{background:linear-gradient(135deg,#f5f3ff,#fff);padding:60px 0;text-align:center}
.hero h1{font-size:36px;color:#8e44ad;margin-bottom:20px;text-shadow:1px 1px 2px rgba(0,0,0,0.1)}
.hero p{font-size:18px;color:#666;margin-bottom:30px}

/* Takpaneler och inforutor */
.info-box{background:#fff;padding:25px;margin:20px 0;border-left:4px solid #ffeb3b;box-shadow:0 2px 8px rgba(0,0,0,0.1);border-radius:5px}
.info-box h3{color:#8e44ad;margin-bottom:10px}
.takpanel{background:linear-gradient(to right,#f9f9f9,#fff);padding:20px;margin:15px 0;border-radius:8px;box-shadow:0 1px 5px rgba(0,0,0,0.1)}

/* Tjänsterutor */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:30px 0}
.service-card{background:#fff;padding:20px;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,0.1);transition:transform 0.3s}
.service-card:hover{transform:translateY(-5px);box-shadow:0 5px 20px rgba(0,0,0,0.15)}

/* Formulär för offertförfrågan */
.offert-form{background:#fff;padding:30px;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,0.1);max-width:500px;margin:0 auto}
.form-group{margin-bottom:20px}
.form-group label{display:block;color:#555;margin-bottom:5px;font-weight:500}
.form-group input,.form-group textarea{width:100%;padding:10px;border:2px solid #e0e0e0;border-radius:5px;font-size:14px;transition:border-color 0.3s}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#9b59b6}
.submit-btn{background:linear-gradient(135deg,#90EE90,#7FDD7F);color:#fff;padding:15px 40px;border:none;border-radius:25px;font-size:16px;font-weight:bold;cursor:pointer;width:100%;box-shadow:0 0 20px rgba(144,238,144,0.5);animation:glow 2s infinite}

/* Tabeller */
table{width:100%;background:#fff;border-collapse:collapse;margin:20px 0;box-shadow:0 2px 5px rgba(0,0,0,0.1)}
th{background:#9b59b6;color:#fff;padding:12px;text-align:left}
td{padding:10px;border-bottom:1px solid #e0e0e0}
tr:hover{background:#f9f9f9}

/* Expanderbara sektioner */
details{background:#fff;margin:15px 0;padding:15px;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.1)}
summary{cursor:pointer;font-weight:bold;color:#8e44ad;padding:5px 0}
summary:hover{color:#ffeb3b}

/* Mobilmeny */
.mobile-menu-toggle{display:none;background:#9b59b6;color:#fff;border:none;padding:10px;border-radius:5px;cursor:pointer}

/* Footer */
footer{background:#333;color:#fff;padding:40px 0 20px;margin-top:50px}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-bottom:20px}
.footer-section h4{color:#ffeb3b;margin-bottom:15px}
.footer-section a{color:#ccc;text-decoration:none;display:block;padding:5px 0}
.footer-section a:hover{color:#90EE90}

/* Månadsinforuta */
.month-info{background:linear-gradient(135deg,#fff,#f5f3ff);padding:20px;border-radius:10px;margin:30px 0;border:2px solid #9b59b6}

/* Citat och specialelement */
blockquote{background:#f9f9f9;border-left:4px solid #ffeb3b;padding:15px 20px;margin:20px 0;font-style:italic}
cite{color:#8e44ad;font-weight:500}
aside{background:#f5f3ff;padding:20px;border-radius:5px;margin:20px 0}
article{background:#fff;padding:20px;margin:20px 0;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}

/* Responsiv design */
@media(max-width:768px){
.nav-wrapper{flex-direction:column}
.mobile-menu-toggle{display:block;margin:10px 0}
nav ul{display:none;flex-direction:column;width:100%}
nav ul.active{display:flex}
.hero h1{font-size:28px}
.services-grid{grid-template-columns:1fr}
.cta-btn{display:block;text-align:center;margin:10px 0}
}