/* =========================================================
   7H Engineering & Prototyping — landningssida för annonser
   Bygger vidare på style.css. Bara det som är unikt för
   /offert.html ligger här.
   ========================================================= */

/* ---------- Avskalat sidhuvud ----------
   Ingen meny: annonstrafiken ska göra en sak — höra av sig. */
.lp-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; }
.lp-tel { display: flex; align-items: center; gap: 9px; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
.lp-tel svg { width: 18px; height: 18px; color: var(--accent); }
.lp-tel:hover { color: var(--accent-dark); }

/* ---------- Hero med formulär bredvid ---------- */
.lp-hero { background: var(--bg-deep); color: #dbe4ec; padding: 60px 0 70px; }
.lp-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 2.9rem); max-width: 18ch; }
.lp-hero .eyebrow { color: #7ab5e8; }
.lp-hero__lead { font-size: 1.1rem; color: #b9c7d4; max-width: 46ch; }
.lp-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: start; }

.lp-usp { list-style: none; padding: 0; margin: 30px 0 0; }
.lp-usp li { position: relative; padding-left: 31px; margin-bottom: 13px; color: #c3d0dc; }
.lp-usp li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 17px;
  height: 9px;
  border-left: 2px solid #7ab5e8;
  border-bottom: 2px solid #7ab5e8;
  transform: rotate(-45deg);
}

/* ---------- Formulärkortet ---------- */
.lp-form {
  background: #fff;
  color: var(--ink);
  border-radius: 14px;
  padding: 30px 28px 26px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.lp-form h2 { font-size: 1.3rem; margin-bottom: .35em; }
.lp-form__hint { color: var(--ink-soft); font-size: .93rem; margin-bottom: 22px; }
.lp-form .btn { width: 100%; text-align: center; }
.lp-form .form-note { text-align: center; }
.lp-form__integritet { font-size: .82rem; color: var(--ink-soft); text-align: center; margin: 14px 0 0; }

/* ---------- Förtroendeknippe under hero ---------- */
.lp-band { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 26px 0; }
.lp-band__inner { display: flex; flex-wrap: wrap; gap: 14px 42px; justify-content: center; text-align: center; }
.lp-band span { font-size: .93rem; color: var(--ink-soft); }
.lp-band b { color: var(--ink); }

/* ---------- Frågor och svar ---------- */
.lp-faq { max-width: 780px; margin: 42px auto 0; }
.lp-faq details { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 12px; }
.lp-faq summary { cursor: pointer; padding: 17px 22px; font-weight: 600; list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 700; }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq details p { padding: 0 22px 18px; margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* ---------- Avskalad sidfot ---------- */
.lp-footer { background: var(--bg-deep); color: #93a5b4; padding: 34px 0; margin-top: 0; font-size: .92rem; }
.lp-footer a { color: #cfdae4; }
.lp-footer__inner { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center; }

@media (max-width: 900px) {
  .lp-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .lp-hero h1, .lp-hero__lead { max-width: none; }
}
@media (max-width: 520px) {
  /* Numret, logotypen och språkväxeln får inte plats bredvid varandra på
     smala skärmar. Ikonen blir kvar som ringknapp, med aria-label. */
  .lp-tel__nr { display: none; }
}
@media (max-width: 560px) {
  .lp-hero { padding: 40px 0 50px; }
  .lp-form { padding: 24px 20px 22px; }
  .lp-band__inner { gap: 10px 24px; }
}