:root{
  --bg:#0b1020;
  --bg-2:#0e1427;
  --card:#111831;
  --stroke:rgba(255,255,255,.08);
  --text:#eaf2ff;
  --muted:#b8c4df;
  --brand:#08c5ff;
  --brand-2:#25d07a;
  --shadow:0 12px 30px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.65;
}

.container{width:min(1180px,92%);margin:auto}

/* HEADER */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,14,30,.9);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--stroke)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{font-weight:800;letter-spacing:.2px;color:#fff}
.brand small{display:block;font-weight:600;opacity:.7;font-size:12px;margin-top:-2px}
.nav{display:flex;align-items:center;gap:18px}
.nav a{color:var(--text);opacity:.9;font-weight:600}
.nav a:hover{opacity:1}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:800}
.btn-primary{background:linear-gradient(135deg,var(--brand),#4bd5ff);color:#011a2b;box-shadow:var(--shadow)}
.btn-ghost{border:1px solid var(--stroke);color:var(--text)}

.nav-toggle{display:none;width:40px;height:36px;border:0;border-radius:10px;background:linear-gradient(#fff,#fff) center/60% 2px no-repeat}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{position:absolute;inset:64px 0 auto 0;background:var(--bg-2);display:none;flex-direction:column;gap:10px;padding:16px 20px;border-bottom:1px solid var(--stroke)}
  .nav.open{display:flex}
}

/* HERO */
.hero{
  min-height:66vh;display:grid;place-items:center;text-align:center;
  background:linear-gradient(to bottom, rgba(7,10,25,.5), rgba(7,10,25,.8)), var(--hero) center/cover no-repeat;
}
.hero-inner{padding:86px 8px 74px;max-width:960px}
.h1{font-size:clamp(28px,4vw,46px);margin:0 0 12px}
.lead{color:var(--muted);font-size:18px;margin:0 auto 16px;max-width:880px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* SECTIONS / CARDS */
.section{padding:66px 0;background:var(--bg)}
.section.alt{background:var(--bg-2)}
.h2{font-size:clamp(24px,3vw,34px);margin:0 0 12px}
.h3{font-size:22px;margin:0 0 10px}
.section-intro{color:var(--muted);max-width:800px}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:18px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.card img{width:100%;height:230px;object-fit:cover}
.card-body{padding:16px 16px 18px}
.card-body p{color:var(--muted);margin:6px 0 0}
.card .link{display:inline-flex;align-items:center;gap:8px;color:#a7eaff;font-weight:700;margin-top:10px;text-decoration:underline}

/* CHECKLIST – snyggare */
ul.check{list-style:none;padding:0;margin:10px 0 0}
ul.check li{display:flex;gap:10px;align-items:flex-start;margin:6px 0;color:#d7e4ff}
ul.check li::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;
  background:conic-gradient(from 0deg at 50% 50%, #6ef0a0 0 75%, transparent 75% 100%), #163; box-shadow:0 0 0 2px #163 inset}
ul.check.compact li{margin:4px 0}

/* GRID TILES */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
.tile{background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:16px}

/* CONTENT PAGES */
.page-hero{min-height:42vh;display:grid;place-items:center;text-align:center;background:linear-gradient(to bottom, rgba(7,10,25,.45), rgba(7,10,25,.85)), var(--hero) center/cover no-repeat}
.page-hero .hero-inner{padding:64px 8px 56px}
.content{padding:40px 0}
.prose{background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.prose img.article-img{width:100%;height:260px;object-fit:cover;border-radius:10px;margin-bottom:14px;opacity:.95}

/* CONTACT */
.contact-wrap{display:grid;grid-template-columns:1fr;gap:18px}
.contact-card{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:18px}
.contact-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;border:2px solid var(--stroke)}
.form{background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:18px}
.form label{display:block;font-weight:700;margin:10px 0 6px}
.form input,.form textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--stroke);background:#0b1328;color:var(--text);font-size:16px}
.form input::placeholder,.form textarea::placeholder{color:#9fb1d6;font-size:16px;opacity:.9}
.form button{margin-top:12px}

/* FOOTER */
.site-footer{background:#0a0f1f;border-top:1px solid var(--stroke)}
.footer-inner{padding:16px 0;text-align:center;color:#b8c6e1;font-size:14px}
.footer-logo{height:28px;opacity:.9;margin:0 auto 8px}

/* ==== PATCH: snyggt kontaktformulär utan att röra övrig design ==== */
#kontakt form{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
}

#kontakt form input,
#kontakt form textarea{
  width: 100%;
  background: #0b1328;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.4;
  margin: 0 0 12px;
  outline: none;
  transition: border .15s ease, box-shadow .15s ease, background .2s ease;
}

#kontakt form input::placeholder,
#kontakt form textarea::placeholder{
  color: #9fb1d6;
  opacity: .95;
}

#kontakt form input:focus,
#kontakt form textarea:focus{
  border-color: rgba(8,197,255,.6);
  box-shadow: 0 0 0 3px rgba(8,197,255,.18);
  background: #0d1731;
}

#kontakt form textarea{
  min-height: 140px;
  resize: vertical;
}

#kontakt form button[type="submit"]{
  display: inline-block;
  width: 100%;
  min-height: 50px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 16px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg,var(--brand),#4bd5ff);
  color: #011a2b;
  box-shadow: var(--shadow);
  transition: filter .2s ease, transform .06s ease;
}
#kontakt form button[type="submit"]:hover{ filter: brightness(1.06) }
#kontakt form button[type="submit"]:active{ transform: translateY(1px) }

/* Mobil: lite större text/padding för lättare ifyllnad */
@media (max-width: 600px){
  #kontakt form input,
  #kontakt form textarea{ font-size:17px; padding: 15px 16px }
}