:root{
  --paper: #F5F3EE;
  --paper-dim: #ECE8DF;
  --paper-line: #DAD5C9;
  --ink: #191B22;
  --ink-soft: #565B6B;
  --ink-faint: #8A8F9E;
  --blueprint: #2C3E66;
  --blueprint-deep: #1D2A47;
  --blueprint-tint: #E7EBF3;
  --brass: #B8863E;
  --brass-deep: #8F6526;
  --brass-tint: #F3E7D2;
  --success: #4F7A5C;
  --success-tint: #E5EEE7;
  --white: #FFFFFF;
  --radius: 10px;
  --radius-lg: 16px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--blueprint); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.container{ max-width: 1180px; margin: 0 auto; padding: 0 1.6rem; }

/* ---------- Typografi ---------- */
.eyebrow{
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brass-deep); font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.eyebrow::before{ content:""; width: 18px; height: 1px; background: var(--brass-deep); display:inline-block; }
h1, h2, h3{ font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--ink); }
h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.01em; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }
h3{ font-size: 1.15rem; }
.lede{ font-size: 1.1rem; color: var(--ink-soft); max-width: 46ch; margin: 1.1rem 0 0; }
.mono{ font-family: var(--font-mono); }

/* ---------- Header ---------- */
.site-header{ padding: 0.6rem 0; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.brandmark{ text-decoration:none; display:inline-flex; align-items:center; }
.header-cta{
  font-family: var(--font-mono); font-size: 0.82rem; text-decoration:none; color: var(--blueprint);
  border: 1px solid var(--blueprint); border-radius: 999px; padding: 0.5rem 1.1rem;
  transition: background .2s ease, color .2s ease;
}
.header-cta:hover{ background: var(--blueprint); color: var(--white); }
.header-nav{ display:flex; align-items:center; gap: 1rem; }
.header-nav > a:not(.header-cta){ font-size: 0.9rem; text-decoration:none; color: var(--ink-soft); white-space:nowrap; }
.header-nav > a:not(.header-cta):hover{ color: var(--ink); }
@media (max-width: 560px){
  .header-nav{ gap: 0.7rem; }
  .header-nav > a:not(.header-cta){ font-size: 0.8rem; }
  .header-cta{ padding: 0.4rem 0.8rem; font-size: 0.74rem; }
}

/* ---------- Hero ---------- */
.hero{ padding: 3.2rem 0 2.4rem; position: relative; }
.hero-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: end; }
.hero-diagram{ position: relative; }
/* Signaturelementet - ett litet schema-diagram, KÄRNAN som en fast
   platta med tunna "ledningar" ut till några exempel-tillägg. Rent
   dekorativt i hero:n (den RIKTIGA, interaktiva byggaren kommer
   längre ner) - etablerar visuellt språket (ritningslinjer,
   lödpunkter) som resten av sidan sedan bygger vidare på. */
.hero-diagram svg{ width:100%; height:auto; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

/* ---------- Sektion: allmänt ---------- */
.section{ padding: 3.6rem 0; }
.section-head{ margin-bottom: 2.2rem; max-width: 60ch; }
.section-head p{ color: var(--ink-soft); margin: 0.6rem 0 0; }
.divider{ height:1px; background: var(--paper-line); border:none; margin:0; }

/* ---------- Byggaren: tvåkolumns-layout ---------- */
.builder-grid{ display:grid; grid-template-columns: 1fr 380px; gap: 2.4rem; align-items:start; }
@media (max-width: 980px){ .builder-grid{ grid-template-columns: 1fr; } }

/* Kärnpaket-kortet */
.core-card{
  background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
  padding: 1.8rem 2rem; margin-bottom: 2rem; position: relative; overflow: hidden;
}
.core-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background: var(--brass);
}
.core-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1.2rem; flex-wrap:wrap; margin-bottom: 0.4rem; }
.core-card-head h3{ font-size: 1.3rem; }
.core-price{
  font-family: var(--font-mono); font-weight:600; font-size: 1.05rem; color: var(--brass-deep);
  background: var(--brass-tint); padding: 0.35rem 0.8rem; border-radius: 999px; white-space:nowrap;
}
.core-card p.desc{ color: var(--ink-soft); margin: 0.3rem 0 1.3rem; font-size: 0.95rem; }
.core-module-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.2rem; }
@media (max-width: 560px){ .core-module-list{ grid-template-columns: 1fr; } }
.core-module-list li{
  display:flex; align-items:center; gap: 0.6rem; font-size: 0.92rem; color: var(--ink);
}
.core-module-list .check{
  width:18px; height:18px; border-radius:50%; background: var(--success-tint); color: var(--success);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size: 0.7rem;
}

/* Tillägg-grupper */
.addon-group{ margin-bottom: 1.9rem; }
.addon-group-head{ display:flex; align-items:baseline; gap: 0.7rem; margin-bottom: 0.7rem; flex-wrap:wrap; }
.addon-group-head h3{ font-size: 1.05rem; }
.addon-group-tag{
  font-family: var(--font-mono); font-size: 0.72rem; text-transform:uppercase; letter-spacing: 0.06em;
  color: var(--blueprint); background: var(--blueprint-tint); padding: 0.2rem 0.55rem; border-radius: 999px;
}
.addon-group-help{ font-size: 0.85rem; color: var(--ink-faint); margin: -0.2rem 0 0.8rem; }
.addon-options{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.7rem; }
.addon-option{
  display:flex; align-items:center; justify-content:space-between; gap: 0.5rem; background: var(--white);
  border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 0.75rem 0.9rem;
  transition: border-color .15s ease, background .15s ease;
}
.addon-option label{ display:flex; align-items:center; gap: 0.7rem; cursor:pointer; font-size: 0.92rem; flex:1; }
.addon-option:hover{ border-color: var(--blueprint); }
.addon-option input{ accent-color: var(--blueprint); width:16px; height:16px; flex-shrink:0; }
.addon-option.is-checked{ border-color: var(--blueprint); background: var(--blueprint-tint); }
.addon-info-link{
  color: var(--ink-faint); text-decoration:none; font-size: 1rem; flex-shrink:0; line-height:1;
  padding: 0.1rem; border-radius:50%; transition: color .15s ease;
}
.addon-info-link:hover{ color: var(--blueprint); }

/* ---------- Sammanfattningspanelen (sticky) ---------- */
.summary-panel{
  position: sticky; top: 1.6rem; background: var(--white); border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg); padding: 1.6rem 1.7rem; font-family: var(--font-mono);
}
.summary-panel h3{ font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.2rem; }
.summary-sub{ font-size: 0.78rem; color: var(--ink-faint); margin: 0 0 1.1rem; }
.summary-list{ list-style:none; margin:0; padding:0; position:relative; }
/* "Lödpunkt"-linjen - signaturelementet i den interaktiva delen.
   En tunn vertikal ritningslinje till vänster om varje rad, med en
   liten rund "lödpunkt" per modul - växer helt enkelt med listan i
   takt med att fler moduler väljs, ren CSS, ingen SVG-beräkning
   behövs. */
.summary-list{ padding-left: 1.1rem; border-left: 1px solid var(--paper-line); }
.summary-item{
  font-size: 0.82rem; padding: 0.4rem 0; position:relative; color: var(--ink);
  display:flex; justify-content:space-between; gap:0.6rem;
}
.summary-item::before{
  content:""; position:absolute; left:-1.36rem; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background: var(--brass);
}
.summary-item .grp{ color: var(--ink-faint); font-size: 0.72rem; }
.summary-empty{ font-size: 0.82rem; color: var(--ink-faint); padding: 0.5rem 0 0.5rem 1.1rem; font-style: italic; }
.summary-core-line{
  font-size: 0.82rem; color: var(--brass-deep); font-weight:600; padding: 0 0 0.6rem 1.1rem;
  border-bottom: 1px dashed var(--paper-line); margin-bottom: 0.5rem;
}
.summary-cta{
  display:block; width:100%; text-align:center; margin-top: 1.4rem; padding: 0.85rem;
  background: var(--blueprint); color: var(--white); border:none; border-radius: var(--radius);
  font-family: var(--font-body); font-weight:600; font-size: 0.95rem; cursor:pointer;
  text-decoration:none; transition: background .15s ease;
}
.summary-cta:hover{ background: var(--blueprint-deep); }

/* ---------- Offertformulär ---------- */
.quote-section{ background: var(--paper-dim); }
.quote-form{ max-width: 640px; margin: 0 auto; background: var(--white); border-radius: var(--radius-lg); padding: 2.2rem; border: 1px solid var(--paper-line); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; } }
.field{ margin-bottom: 1.1rem; }
.field label{ display:block; font-size: 0.84rem; font-weight:600; margin-bottom: 0.35rem; color: var(--ink); }
.field input, .field textarea{
  width:100%; border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 0.65rem 0.8rem;
  font-family: var(--font-body); font-size: 0.95rem; background: var(--paper);
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--blueprint); background: var(--white); }
.form-submit{
  width:100%; padding: 0.9rem; background: var(--brass); color: var(--white); border:none;
  border-radius: var(--radius); font-weight:600; font-size: 1rem; cursor:pointer; font-family: var(--font-body);
  transition: background .15s ease;
}
.form-submit:hover{ background: var(--brass-deep); }
.form-note{ font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.9rem; text-align:center; }
.form-success{
  background: var(--success-tint); color: var(--success); border-radius: var(--radius);
  padding: 1.4rem; text-align:center; font-weight:600;
}
.form-error{
  background: #F7E6E6; color: #B23A3A; border-radius: var(--radius); padding: 0.9rem 1.1rem;
  font-size: 0.9rem; margin-bottom: 1.1rem;
}

/* ---------- FAQ ---------- */
.faq-list{ max-width: 68ch; display:flex; flex-direction:column; gap: 0.7rem; }
.faq-item{
  background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius);
  padding: 0.2rem 1.2rem;
}
.faq-item summary{
  padding: 1rem 0; cursor:pointer; font-weight:600; font-size: 0.98rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family: var(--font-mono); font-size:1.1rem; color: var(--blueprint);
  flex-shrink:0; transition: transform .15s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 1.1rem; padding-top: 0.2rem; }

/* ---------- Footer ---------- */
.site-footer{ padding: 2.4rem 0; border-top: 1px solid var(--paper-line); }
.site-footer .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem; font-size: 0.85rem; color: var(--ink-faint); }