/* Grasklippning Malmo - Stilmall */
:root{--gras-prim:#2d5a27;--gras-sek:#4a7c43;--gras-accent:#d4a829;--gras-ljus:#f5f5dc;--gras-vit:#ffffff;--gras-mork:#1a1a1a;--gras-gra:#6b7280;--gras-ljusgron:#e8f5e8;--gras-beige:#faf8f0;--skugga:0 4px 20px rgba(45,90,39,0.15);--radius:12px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.7;color:var(--gras-mork);background:var(--gras-beige)}
/* Logotyp med CSS */
.graslogo{display:flex;align-items:center;gap:10px;text-decoration:none}
.graslogo-ikon{width:48px;height:48px;position:relative;background:linear-gradient(135deg,var(--gras-prim),var(--gras-sek));border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(45,90,39,0.3)}
.graslogo-ikon::before{content:'';position:absolute;width:24px;height:18px;background:repeating-linear-gradient(90deg,var(--gras-accent) 0px,var(--gras-accent) 2px,transparent 2px,transparent 6px);border-radius:2px;transform:rotate(-15deg)}
.graslogo-ikon::after{content:'';position:absolute;bottom:8px;width:20px;height:3px;background:var(--gras-ljus);border-radius:2px}
.graslogo-text{font-size:1.4rem;font-weight:700;color:var(--gras-prim);letter-spacing:-0.5px}
.graslogo-text span{color:var(--gras-accent);margin-left:0.3em}
/* Header */
.grasheader{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(10px);z-index:1000;box-shadow:0 2px 20px rgba(0,0,0,0.08);padding:0.8rem 0}
.grasheader-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center}
.grasnav{display:flex;gap:0.5rem;align-items:center}
.grasnav a{padding:0.6rem 1rem;color:var(--gras-mork);text-decoration:none;font-weight:500;border-radius:8px;transition:var(--transition)}
.grasnav a:hover{background:var(--gras-ljusgron);color:var(--gras-prim)}
.grasnav a.grasaktiv{background:var(--gras-ljusgron);color:var(--gras-prim)}
/* CTA-knappar */
.grascta{display:inline-flex;align-items:center;gap:8px;padding:0.9rem 1.8rem;background:linear-gradient(135deg,var(--gras-prim),var(--gras-sek));color:var(--gras-vit);text-decoration:none;font-weight:600;border-radius:50px;transition:var(--transition);box-shadow:0 4px 15px rgba(45,90,39,0.3);border:none;cursor:pointer;font-size:1rem}
.grascta:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(45,90,39,0.4)}
.grascta-sek{background:transparent;border:2px solid var(--gras-prim);color:var(--gras-prim)}
.grascta-sek:hover{background:var(--gras-prim);color:var(--gras-vit)}
.grascta-liten{padding:0.6rem 1.2rem;font-size:0.9rem}
/* Mobilmeny */
.grasmobil-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.grasmobil-toggle span{width:28px;height:3px;background:var(--gras-prim);border-radius:3px;transition:var(--transition)}
.grasmobil-meny{display:none}
/* Hero-sektion */
.grashero{min-height:100vh;display:flex;align-items:center;padding:120px 1.5rem 60px;background:linear-gradient(170deg,var(--gras-ljusgron) 0%,var(--gras-beige) 50%,var(--gras-vit) 100%);position:relative;overflow:hidden}
.grashero::before{content:'';position:absolute;top:0;right:0;width:60%;height:100%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 80 Q30 60 25 40 Q20 20 35 10' stroke='%232d5a27' fill='none' stroke-width='0.3' opacity='0.1'/%3E%3Cpath d='M40 90 Q50 70 45 50 Q40 30 55 15' stroke='%234a7c43' fill='none' stroke-width='0.3' opacity='0.1'/%3E%3Cpath d='M60 85 Q70 65 65 45 Q60 25 75 12' stroke='%232d5a27' fill='none' stroke-width='0.3' opacity='0.1'/%3E%3C/svg%3E") repeat;opacity:0.5}
.grashero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.grashero-text h1{font-size:3.2rem;font-weight:800;color:var(--gras-prim);line-height:1.15;margin-bottom:1.5rem}
.grashero-text h1 span{color:var(--gras-accent);display:block}
.grashero-text p{font-size:1.2rem;color:var(--gras-gra);margin-bottom:2rem;max-width:500px}
.grashero-knappar{display:flex;gap:1rem;flex-wrap:wrap}
.grashero-bild{position:relative}
.grashero-bild-inner{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,var(--gras-prim) 0%,var(--gras-sek) 100%);border-radius:var(--radius);position:relative;overflow:hidden;box-shadow:var(--skugga)}
.grashero-bild-inner::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 8px,rgba(255,255,255,0.03) 8px,rgba(255,255,255,0.03) 16px)}
.grashero-bild-inner::after{content:'Golfbanekvalitet för din trädgård';position:absolute;bottom:20px;left:20px;right:20px;padding:1rem;background:rgba(255,255,255,0.95);border-radius:8px;font-weight:600;color:var(--gras-prim);text-align:center}
/* Social proof */
.grassocial{display:flex;align-items:center;gap:1.5rem;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(45,90,39,0.1)}
.grassocial-stat{text-align:center}
.grassocial-stat strong{display:block;font-size:1.8rem;color:var(--gras-prim)}
.grassocial-stat span{font-size:0.85rem;color:var(--gras-gra)}
/* Sektioner */
.grassektion{padding:3rem 1.5rem}
.grassektion-kompakt{padding:1rem 1.5rem}
.grassektion-inner{max-width:1200px;margin:0 auto}
.grassektion-rubrik{text-align:center;margin-bottom:3rem}
.grassektion-rubrik h2{font-size:2.5rem;color:var(--gras-prim);margin-bottom:0.5rem}
.grassektion-rubrik p{color:var(--gras-gra);font-size:1.1rem}
.grassektion-alt{background:var(--gras-vit)}
.grassektion-gron{background:linear-gradient(135deg,var(--gras-prim),var(--gras-sek));color:var(--gras-vit)}
.grassektion-gron h2,.grassektion-gron h3{color:var(--gras-vit)}
.grassektion-gron p{color:rgba(255,255,255,0.9)}
/* Tjänstekort */
.grastjanster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
.grastjanst{background:var(--gras-vit);border-radius:var(--radius);padding:2rem;box-shadow:var(--skugga);transition:var(--transition);border:2px solid transparent}
.grastjanst:hover{transform:translateY(-5px);border-color:var(--gras-accent)}
.grastjanst-ikon{width:60px;height:60px;background:var(--gras-ljusgron);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}
.grastjanst-ikon svg{width:28px;height:28px;stroke:var(--gras-prim)}
.grastjanst h3{font-size:1.3rem;color:var(--gras-prim);margin-bottom:0.8rem}
.grastjanst p{color:var(--gras-gra);font-size:0.95rem;margin-bottom:1rem}
/* Inforutor */
.grasinfo{background:var(--gras-ljusgron);border-radius:var(--radius);padding:2rem;margin:2rem 0;border-left:4px solid var(--gras-prim)}
.grasinfo h4{color:var(--gras-prim);margin-bottom:0.5rem;font-size:1.1rem}
.grasinfo p{color:var(--gras-mork);margin:0}
.grasinfo-gul{background:linear-gradient(135deg,#fff9e6,#fff3cc);border-left-color:var(--gras-accent)}
.grasinfo-gul h4{color:#8b6914}
/* Citatruta */
.grascitat{background:var(--gras-vit);border-radius:var(--radius);padding:2rem;margin:2rem 0;box-shadow:var(--skugga);position:relative}
.grascitat::before{content:'"';position:absolute;top:10px;left:20px;font-size:4rem;color:var(--gras-accent);opacity:0.3;font-family:Georgia,serif;line-height:1}
.grascitat p{font-style:italic;color:var(--gras-mork);padding-left:2rem;font-size:1.1rem}
.grascitat cite{display:block;margin-top:1rem;padding-left:2rem;color:var(--gras-gra);font-size:0.9rem}
/* Tabeller */
.grastabell{width:100%;border-collapse:collapse;margin:2rem 0;background:var(--gras-vit);border-radius:var(--radius);overflow:hidden;box-shadow:var(--skugga)}
.grastabell th{background:var(--gras-prim);color:var(--gras-vit);padding:1rem;text-align:left;font-weight:600}
.grastabell td{padding:1rem;border-bottom:1px solid var(--gras-ljusgron)}
.grastabell tr:last-child td{border-bottom:none}
.grastabell tr:nth-child(even){background:var(--gras-ljusgron)}
.grastabell-gul th{background:var(--gras-accent);color:var(--gras-mork)}
/* Tidsbaserat meddelande - pulserande */
.grastid{background:linear-gradient(135deg,var(--gras-accent),#c49922);padding:0.8rem 1.2rem;border-radius:8px;text-align:center;margin:0.5rem 0;animation:graspuls 2s ease-in-out infinite;box-shadow:0 2px 12px rgba(212,168,41,0.3)}
@keyframes graspuls{0%,100%{transform:scale(1);box-shadow:0 2px 12px rgba(212,168,41,0.3)}50%{transform:scale(1.01);box-shadow:0 3px 16px rgba(212,168,41,0.5)}}
.grastid h3{color:var(--gras-mork);margin-bottom:0.2rem;font-size:1rem;font-weight:600}
.grastid p{color:var(--gras-mork);margin:0;font-size:0.9rem}
/* Säsongsektion */
.grassasong{background:linear-gradient(135deg,var(--gras-ljusgron),var(--gras-beige));border-radius:var(--radius);padding:2.5rem;margin:2rem 0;border:2px solid var(--gras-prim)}
.grassasong h3{color:var(--gras-prim);margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem}
.grassasong-badge{background:var(--gras-accent);color:var(--gras-mork);padding:0.3rem 0.8rem;border-radius:20px;font-size:0.8rem;font-weight:600}
/* FAQ Accordion */
.grasfaq{margin:2rem 0}
.grasfaq-item{background:var(--gras-vit);border-radius:var(--radius);margin-bottom:1rem;box-shadow:0 2px 10px rgba(0,0,0,0.05);overflow:hidden}
.grasfaq-fraga{width:100%;padding:1.2rem 1.5rem;background:none;border:none;text-align:left;font-size:1rem;font-weight:600;color:var(--gras-prim);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:var(--transition)}
.grasfaq-fraga:hover{background:var(--gras-ljusgron)}
.grasfaq-fraga::after{content:'+';font-size:1.5rem;color:var(--gras-accent);transition:var(--transition)}
.grasfaq-item.grasopen .grasfaq-fraga::after{transform:rotate(45deg)}
.grasfaq-svar{max-height:0;overflow:hidden;transition:max-height 0.3s ease;padding:0 1.5rem}
.grasfaq-item.grasopen .grasfaq-svar{max-height:500px;padding:0 1.5rem 1.5rem}
/* Formulär */
.grasform{background:var(--gras-vit);border-radius:var(--radius);padding:2.5rem;box-shadow:var(--skugga);max-width:600px;margin:0 auto}
.grasform-rubrik{text-align:center;margin-bottom:2rem}
.grasform-rubrik h2{color:var(--gras-prim);margin-bottom:0.5rem}
.grasform-grupp{margin-bottom:1.5rem}
.grasform-grupp label{display:block;margin-bottom:0.5rem;font-weight:600;color:var(--gras-mork)}
.grasform-grupp input,.grasform-grupp textarea,.grasform-grupp select{width:100%;padding:0.9rem 1rem;border:2px solid var(--gras-ljusgron);border-radius:8px;font-size:1rem;transition:var(--transition);font-family:inherit}
.grasform-grupp input:focus,.grasform-grupp textarea:focus,.grasform-grupp select:focus{outline:none;border-color:var(--gras-prim);box-shadow:0 0 0 3px rgba(45,90,39,0.1)}
.grasform-grupp textarea{min-height:120px;resize:vertical}
.grasform-info{background:var(--gras-ljusgron);border-radius:8px;padding:1rem;margin-bottom:1.5rem;font-size:0.9rem;color:var(--gras-prim)}
.grasform-valid{position:relative}
.grasform-valid.grasok input{border-color:var(--gras-prim)}
.grasform-valid.grasok::after{content:'✓';position:absolute;right:12px;top:38px;color:var(--gras-prim);font-weight:bold}
/* Spamskydd */
.grasspam{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;background:var(--gras-ljusgron);padding:1rem;border-radius:8px}
.grasspam-siffra{display:flex;align-items:center;gap:0.5rem}
.grasspam-btn{width:36px;height:36px;border:2px solid var(--gras-prim);background:var(--gras-vit);border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--gras-prim);transition:var(--transition)}
.grasspam-btn:hover{background:var(--gras-prim);color:var(--gras-vit)}
.grasspam-varde{font-size:1.5rem;font-weight:700;color:var(--gras-prim);min-width:40px;text-align:center}
.grasspam label{flex:1;font-weight:500;color:var(--gras-mork)}
/* Grid-layouts */
.grasgrid{display:grid;gap:2rem}
.grasgrid-2{grid-template-columns:repeat(2,1fr)}
.grasgrid-3{grid-template-columns:repeat(3,1fr)}
.grasgrid-4{grid-template-columns:repeat(4,1fr)}
/* Områdeskort */
.grasomrade{background:var(--gras-vit);border-radius:var(--radius);padding:1.5rem;text-align:center;transition:var(--transition);border:2px solid var(--gras-ljusgron)}
.grasomrade:hover{border-color:var(--gras-prim);transform:translateY(-3px)}
.grasomrade h4{color:var(--gras-prim);margin-bottom:0.5rem}
.grasomrade p{color:var(--gras-gra);font-size:0.9rem;margin-bottom:1rem}
/* Extern länk-ruta */
.grasextern{background:linear-gradient(135deg,#f0f7ff,#e6f0fa);border-radius:var(--radius);padding:1.5rem;margin:2rem 0;border:1px solid #cce0f5}
.grasextern h4{color:#2563eb;margin-bottom:0.5rem;font-size:1rem}
.grasextern p{color:var(--gras-gra);font-size:0.9rem;margin-bottom:0.5rem}
.grasextern a{color:#2563eb;text-decoration:none;font-weight:500}
.grasextern a:hover{text-decoration:underline}
.grasextern-nordisk{background:linear-gradient(135deg,#f5f0ff,#ebe5f7);border-color:#d4c5e8}
.grasextern-nordisk h4{color:#7c3aed}
/* Footer */
.grasfooter{background:var(--gras-mork);color:var(--gras-vit);padding:4rem 1.5rem 2rem}
.grasfooter-inner{max-width:1200px;margin:0 auto}
.grasfooter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:3rem}
.grasfooter h4{color:var(--gras-accent);margin-bottom:1rem;font-size:1.1rem}
.grasfooter ul{list-style:none}
.grasfooter li{margin-bottom:0.5rem}
.grasfooter a{color:rgba(255,255,255,0.8);text-decoration:none;transition:var(--transition)}
.grasfooter a:hover{color:var(--gras-accent)}
.grasfooter-botten{border-top:1px solid rgba(255,255,255,0.1);padding-top:2rem;text-align:center;color:rgba(255,255,255,0.6);font-size:0.9rem}
.grasfooter-tjanster{background:var(--gras-ljusgron);padding:3rem 1.5rem}
.grasfooter-tjanster-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.grasfooter-tjanster a{padding:0.6rem 1.2rem;background:var(--gras-vit);color:var(--gras-prim);text-decoration:none;border-radius:8px;font-weight:500;transition:var(--transition)}
.grasfooter-tjanster a:hover{background:var(--gras-prim);color:var(--gras-vit)}
/* Sticky CTA */
.grassticky{position:fixed;bottom:20px;right:20px;z-index:999;opacity:0;transform:translateY(20px);transition:var(--transition);pointer-events:none}
.grassticky.grasvis{opacity:1;transform:translateY(0);pointer-events:auto}
/* Innehållstyper */
.grastext-fet{font-weight:700}
.grastext-kursiv{font-style:italic}
.grastext-under{text-decoration:underline}
.grastext-mark{background:linear-gradient(transparent 60%,rgba(212,168,41,0.3) 60%)}
/* CSS-bilder/rubriker */
.grasbild-rubrik{height:200px;border-radius:var(--radius);display:flex;align-items:flex-end;padding:1.5rem;margin:2rem 0;position:relative;overflow:hidden}
.grasbild-rubrik h3{color:var(--gras-vit);font-size:1.5rem;position:relative;z-index:1;text-shadow:0 2px 4px rgba(0,0,0,0.3)}
.grasbild-1{background:linear-gradient(135deg,var(--gras-prim) 0%,var(--gras-sek) 50%,#3d7a35 100%)}
.grasbild-2{background:linear-gradient(45deg,#1a4a14,var(--gras-prim),#5a9a52)}
.grasbild-3{background:linear-gradient(180deg,var(--gras-accent),#b8941f,var(--gras-prim))}
.grasbild-4{background:linear-gradient(225deg,var(--gras-sek),#2a5a24,#1a3a14)}
.grasbild-5{background:linear-gradient(90deg,var(--gras-prim),var(--gras-accent),var(--gras-sek))}
.grasbild-6{background:linear-gradient(315deg,#3a6a34,var(--gras-prim),var(--gras-accent))}
/* Responsiv design */
@media(max-width:992px){.grashero-inner{grid-template-columns:1fr;text-align:center}.grashero-text h1{font-size:2.5rem}.grashero-knappar{justify-content:center}.grashero-bild{display:none}.grassocial{justify-content:center}.grasgrid-3,.grasgrid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.grasnav{display:none}.grasmobil-toggle{display:flex}.grasmobil-meny{position:fixed;top:70px;left:0;right:0;background:var(--gras-vit);padding:1rem;box-shadow:0 4px 20px rgba(0,0,0,0.1);transform:translateY(-100%);opacity:0;transition:var(--transition);pointer-events:none}.grasmobil-meny.grasopen{display:block;transform:translateY(0);opacity:1;pointer-events:auto}.grasmobil-meny a{display:block;padding:1rem;color:var(--gras-mork);text-decoration:none;border-bottom:1px solid var(--gras-ljusgron)}.grasmobil-meny .grascta{margin:1rem;display:block;text-align:center}.grashero{padding-top:100px}.grashero-text h1{font-size:2rem}.grassektion{padding:2rem 1rem}.grassektion-kompakt{padding:0.5rem 1rem}.grassektion-rubrik h2{font-size:1.8rem}.grasgrid-2,.grasgrid-3,.grasgrid-4{grid-template-columns:1fr}.grastabell{font-size:0.9rem}.grastabell th,.grastabell td{padding:0.7rem}.grasform{padding:1.5rem}.grasfooter-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.grasheader-inner{padding:0 1rem}.graslogo-text{font-size:1.1rem}.grashero-text h1{font-size:1.7rem}.grashero-text p{font-size:1rem}.grascta{padding:0.8rem 1.4rem;font-size:0.95rem}.grassocial{flex-direction:column;gap:1rem}.grasfooter-grid{grid-template-columns:1fr}}
/* Animationer */
@keyframes grasfadein{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.grasfadein{animation:grasfadein 0.6s ease forwards}
/* Utskrift */
@media print{.grasheader,.grassticky,.grasmobil-toggle{display:none}.grashero{min-height:auto;padding:2rem 0}.grassektion{padding:2rem 0}}