/* ========= Pusselstudion – Global styles ========= */
:root{
  /* Ljus, barnvänlig och proffsig palett (ej neon) */
  --ink:#213045; --muted:#5e708a; --line:#dfe5f2;
  --bg:#FAFBFD; --panel:#FFFFFF;
  --sky:#6CA8FF; --mint:#45C2A5; --sun:#FFC857; --coral:#FF7B7B; --lav:#A78BFA;
  --r:16px; --rx:20px; --max:1200px;
  --shadow:0 10px 40px rgba(33,48,69,.10), 0 1px 0 rgba(33,48,69,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto;
  background:
    radial-gradient(900px 600px at 0% -10%, rgba(167,139,250,.10), transparent 55%),
    radial-gradient(900px 600px at 100% 0%, rgba(108,168,255,.12), transparent 55%),
    var(--bg);
}

/* ====== Header / Nav ====== */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:rgba(250,251,253,.86); border-bottom:1px solid var(--line);
}
.navbar{max-width:var(--max); margin:auto; display:flex; gap:16px; align-items:center; padding:12px 16px}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none; color:inherit; font-weight:800}
.brand .logo{width:30px; height:30px; border-radius:10px; background:linear-gradient(180deg,#fff,#f3f5fb); border:1px solid var(--line)}
.nav{display:flex; gap:12px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px}
.nav a:hover{background:#ffffff; border:1px solid var(--line)}
.spacer{flex:1}
.btn{appearance:none; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); cursor:pointer}
.btn.primary{border:0; background:linear-gradient(135deg,var(--sky),var(--mint)); color:#042b2b; font-weight:800}
.btn.ghost{background:#fff}

/* ====== Layout ====== */
.wrap{max-width:var(--max); margin:24px auto; padding:0 16px; display:grid; gap:16px}
.grid{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:1000px){ .grid{ grid-template-columns: 520px 1fr } }
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px}
h1{margin:0 0 8px; font-size:28px}
h2{margin:0 0 10px; font-size:20px; color:var(--muted)}
p.lead{color:var(--muted); margin:6px 0 16px}

/* ====== Hero ====== */
.hero{background:linear-gradient(180deg,#ffffff, #f7f9ff); border-bottom:1px solid var(--line)}
.hero-inner{max-width:var(--max); margin:auto; padding:32px 16px; display:grid; gap:22px; align-items:center}
@media(min-width:1000px){ .hero-inner{grid-template-columns: 1.1fr 1fr} }
.hero h1{font-size:38px; line-height:1.15; margin:0}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap}
.hero-img{width:100%; aspect-ratio:4/3; object-fit:contain; filter:drop-shadow(0 12px 24px rgba(0,0,0,.12));}

/* ====== Small helpers ====== */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
input[type="text"], select, textarea, input[type="file"]{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--ink)
}
textarea{min-height:92px; resize:vertical}
.small{font-size:12px; color:var(--muted)}
.list{display:grid; gap:10px}
.item{display:grid; grid-template-columns:70px 1fr auto; gap:12px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:8px}
.thumb{width:70px; height:70px; border-radius:10px; object-fit:cover; border:1px solid var(--line)}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{font-size:12px; border:1px solid var(--line); border-radius:999px; padding:4px 8px; background:#fff}

/* ====== Feature cards ====== */
.features{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:900px){ .features{ grid-template-columns: repeat(3, 1fr) } }
.feature{background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; display:grid; gap:8px}
.feature img{width:56px; height:56px; object-fit:contain}

/* ====== Footer ====== */
.site-footer{background:#ffffff; border-top:1px solid var(--line); color:var(--muted)}
.footer-inner{max-width:var(--max); margin:auto; padding:20px 16px; display:grid; gap:8px}
.footer-links{display:flex; gap:14px; flex-wrap:wrap}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{text-decoration:underline}