/* Däckgubben brand – speglar https://dackgubben-demo.pages.dev */
:root{
  --blue:#2e3e80; --blue-dark:#232f61; --yellow:#fae53a; --yellow-dark:#eccf1c;
  --ink:#232323; --muted:#5c6069; --line:#e4e7ef; --bg:#f7f8fb; --white:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.55;font-size:16px;padding-top:32px}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* Testversion banner – samma gula som textdemot */
#dgDemoBanner{position:fixed;top:0;left:0;right:0;z-index:100001;background:var(--yellow);color:var(--blue-dark);text-align:center;padding:7px 38px;font-size:13px;font-weight:600}
#dgDemoBanner .x{position:absolute;right:10px;top:3px;background:none;border:none;color:var(--blue-dark);font-size:16px;cursor:pointer}
body.banner-hidden{padding-top:0}

/* Header */
header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:32px;z-index:90}
body.banner-hidden header{top:0}
.hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1360px;margin:0 auto}
.hdr .logo img{height:62px;width:auto}
.hdr nav{display:flex;align-items:center;gap:18px}
.hdr nav a{font-size:14px;font-weight:600;color:var(--ink)}
.hdr nav a:hover{color:var(--blue)}
.btn{display:inline-block;background:var(--blue);color:#fff!important;font-weight:700;padding:11px 20px;border-radius:8px;font-size:15px;transition:background .15s;font-family:inherit;cursor:pointer}
.btn:hover{background:var(--blue-dark)}
.btn.ghost{background:transparent;color:var(--blue)!important;border:1.5px solid var(--blue)}
.btn.ghost:hover{background:var(--blue);color:#fff!important}
.btn.yellow{background:var(--yellow);color:var(--blue-dark)!important;border:1.5px solid var(--yellow-dark)}
.btn.yellow:hover{background:var(--yellow-dark)}
.btn.outline{background:transparent;color:#fff!important;border:1.5px solid rgba(255,255,255,.7)}
.btn.outline:hover{background:rgba(255,255,255,.14)}

/* Hero */
.hero{position:relative;background:var(--blue);color:#fff;overflow:hidden;display:flex;align-items:center}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.hero .inner{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:48px 20px;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.hero h1{font-size:54px;line-height:1.12;margin:14px 0 12px;letter-spacing:-.5px}
.hero .sub{font-size:24px;opacity:.92;max-width:700px}
.hero .since{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:7px 16px;border-radius:24px;font-size:18px;font-weight:600}
.hero .ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero .ctas .btn{font-size:18px;padding:15px 26px}
.hero .note{font-size:16px;opacity:.75;margin-top:16px;max-width:820px}
.hero-right{display:flex;flex-direction:column;align-items:center;gap:14px}
.hero .maskot{width:280px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}

/* Voice card */
.voice-card{background:#fff;color:var(--ink);border-radius:12px;padding:20px;width:min(430px,100%);box-shadow:0 12px 36px rgba(0,0,0,.25);text-align:center}
.voice-card-head{margin-bottom:12px}
.voice-card-head strong{font-size:17px;color:var(--blue);display:block}
.voice-card-head small{font-size:13px;color:var(--muted)}
elevenlabs-convai{display:block;margin:0 auto}
.voice-badge{display:inline-block;background:#eef1f8;border:1px solid #d9dfef;color:var(--blue);border-radius:20px;padding:6px 14px;font-size:13.5px;font-weight:600;margin:2px 0 10px}
.voice-badge a{color:var(--blue);text-decoration:underline}
.voice-steps{text-align:left;font-size:13.5px;color:var(--ink);margin:12px 0 0;padding-left:22px;line-height:1.55}
.voice-steps li + li{margin-top:6px}
.voice-card .notice{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5}
.cards.steps .card .ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:16px}

/* Sections */
main{display:block}
section{padding:56px 0}
section.alt{background:var(--bg)}
h2.sec{font-size:28px;color:var(--blue);margin-bottom:8px;letter-spacing:-.3px}
p.secsub{color:var(--muted);margin-bottom:24px;max-width:640px}
.hero h2.sec{color:#fff}

/* Chips */
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chips span{background:#eef1f8;color:var(--blue);border:1px solid #d9dfef;border-radius:16px;padding:8px 14px;font-size:14px;font-weight:600}

/* Services */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:0 2px 10px rgba(30,40,80,.05)}
.card .ic{font-size:26px}
.card h3{font-size:17px;color:var(--blue);margin:10px 0 6px}
.card p{font-size:14px;color:var(--muted)}

/* Two-col */
.two{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.mini-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:26px;box-shadow:0 2px 10px rgba(30,40,80,.05)}
.mini-card h2.sec{font-size:22px}
.mini-card ul{padding-left:20px;margin-top:10px;color:var(--ink);font-size:15px}
.mini-card li + li{margin-top:8px}
.hours table{width:100%;border-collapse:collapse;font-size:15px}
.hours td{padding:8px 6px;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-weight:600}
.hours .note{font-size:13px;color:var(--muted);margin-top:12px}
.contact ul{list-style:none;margin-top:6px}
.contact li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;align-items:baseline}
.contact .k{font-weight:700;color:var(--blue);min-width:86px}
.map-link{margin-top:16px}

.test-box p{margin-bottom:14px;max-width:640px}
.test-box p:last-child{margin-bottom:0}

footer{background:var(--blue-dark);color:#dfe3f2;padding:34px 0}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
footer a{color:#fff}

a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:.25rem}

@media (max-width:760px){
  .hero .inner{grid-template-columns:1fr;padding:40px 20px}
  .hero h1{font-size:40px}
  .hero .sub{font-size:20px}
  .hero .ctas .btn{font-size:16px;padding:13px 20px}
  .hero .maskot{width:210px}
  .two{grid-template-columns:1fr}
  .hdr nav a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}