/* Förstasidan: länkkolumnen och delen som öppnas när man scrollar, i samma tema som undersidorna (sidtema-film.css).
   Allt är avgränsat hit, loggan och filmen rörs inte. */
.info-link-item { opacity: 0.92; }
.info-link-item h3 { font-size: 17px; color: #23272a; }
.info-link-item li { font-size: 16px; margin: 6px 0; }
.info-link-item li a { color: #2c3033; }
@media (max-width: 768px) {
  .info-link-item h3 { font-size: 14px; }
  .info-link-item li { font-size: 13px; }
}

.info-section {
  --panel: rgba(10, 14, 16, 0.56);
  --kant: rgba(255, 255, 255, 0.13);
  --rubrik: #f5f7f6;
  --text: #dfe4e2;
  --dampad: #bcc5c8;
  --amber: #efbb8c;
  --holo: #96e0ec;
  --glans: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 44px rgba(150, 224, 236, 0.035);
  background: linear-gradient(180deg, rgba(7, 10, 12, 0.6), rgba(7, 10, 12, 0.86)), url('/static/images/sidbakgrund-dalen.jpg') center top / cover no-repeat;
  color: var(--text);
  border-radius: 28px 28px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 -20px 60px rgba(0, 0, 0, 0.35);
}

/* Rubriker och löptext */
.info-section .info-content h2 {
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.16;
  background: linear-gradient(100deg, #ffffff 8%, var(--amber) 60%, var(--holo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.info-section .section-title { color: var(--rubrik); font-size: 26px; }
.info-section .company-intro { color: var(--text); font-size: 20px; }
.info-section .projects-intro { color: var(--text); font-size: 18px; opacity: 1; }
.info-section .cta-section { border-top-color: var(--kant); }
.info-section .cta-text { color: var(--text); font-size: 20px; }

/* Flytande glas */
.info-section .project-card, .info-section .tech-item, .info-section .contact-section, .info-section .contact-form-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 38%, rgba(150, 224, 236, 0.035)), var(--panel);
  border: 1px solid var(--kant);
  border-radius: 24px;
  box-shadow: var(--glans), 0 22px 60px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
}
.info-section .project-card.special {
  background: linear-gradient(135deg, rgba(239, 187, 140, 0.2), rgba(10, 14, 16, 0.66));
}

/* Kort */
.info-section .project-card h4 { color: var(--rubrik); font-size: 21px; }
.info-section .project-card p { color: var(--text); font-size: 17px; line-height: 1.6; }
.info-section .project-link { color: var(--holo); font-size: 16px; }
.info-section .project-link:hover { color: var(--rubrik); }
.info-section .tech-item h3 { color: var(--amber); }
.info-section .tech-item p { color: var(--text); font-size: 17px; }

/* Kontakt och formulär */
.info-section .contact-section h3, .info-section .contact-form-section h2 { color: var(--rubrik); }
.info-section .contact-item { color: var(--text); }
.info-section .contact-form-section a { color: var(--holo) !important; }
.info-section .contact-form-section label { color: var(--text) !important; }
.info-section .form-input, .info-section .form-textarea {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--kant);
  color: var(--rubrik);
}
.info-section .form-input::placeholder, .info-section .form-textarea::placeholder { color: var(--dampad); }
.info-section .form-input:focus, .info-section .form-textarea:focus { border-color: var(--holo); box-shadow: 0 0 0 3px rgba(150, 224, 236, 0.2); }
.info-section .form-submit {
  background: var(--amber);
  color: #1c1a17;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 26px rgba(0, 0, 0, 0.4);
}
.info-section .form-submit:hover { background: #f5c9a1; }
.info-section .form-thanks { color: #9be0b9; }