:root {
  --bg: #f6f5fb;
  --panel: #fff;
  --ink: #14132b;
  --muted: #5b5f73;
  --indigo: #4e46e5;
  --violet: #7c6ff0;
  --line: rgba(20, 19, 43, .1);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.site-header { border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .9); }
.site-header .wrap { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { display: block; width: 164px; height: auto; }
.back { color: var(--indigo); font-weight: 700; text-decoration: none; }
.hero { padding: 72px 0 48px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.eyebrow { color: var(--indigo); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2 { line-height: 1.14; letter-spacing: -.035em; }
h1 { margin: 14px 0 20px; font-size: clamp(2.35rem, 5vw, 4.6rem); }
h2 { margin: 0 0 22px; font-size: clamp(1.75rem, 3vw, 2.55rem); }
.lead { max-width: 68ch; color: var(--muted); font-size: 1.12rem; }
.chat-preview { min-width: 0; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: 0 28px 70px rgba(33, 25, 94, .18); }
.chat-preview-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.chat-preview-avatar { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--indigo), var(--violet)); color: #fff; font-weight: 850; }
.chat-preview-business { min-width: 0; font-weight: 800; overflow-wrap: anywhere; }
.chat-preview-messages { display: grid; gap: 16px; padding: clamp(24px, 5vw, 42px); background: linear-gradient(155deg, #fafaff, #f0eeff); border-radius: 0 0 28px 28px; }
.chat-preview-message { max-width: 88%; margin: 0; padding: 14px 17px; border: 1px solid var(--line); border-radius: 18px 18px 18px 5px; background: var(--panel); overflow-wrap: anywhere; }
.chat-preview-message.customer { justify-self: start; }
.chat-preview-message.assistant { justify-self: end; border-radius: 18px 18px 5px; background: #ddd9ff; }
.section { padding: 58px 0; }
.section.alt { background: var(--panel); border-block: 1px solid var(--line); }
.situations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0; margin: 0; list-style: none; counter-reset: situation; }
.situations li { counter-increment: situation; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 14px 38px rgba(33, 25, 94, .06); }
.situations li::before { content: counter(situation, decimal-leading-zero); display: block; margin-bottom: 18px; color: var(--indigo); font-weight: 800; }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; align-items: start; }
.conversation { display: grid; gap: 12px; }
.message { max-width: 88%; margin: 0; padding: 15px 18px; border: 1px solid var(--line); border-radius: 18px 18px 18px 5px; background: var(--panel); }
.message.assistant { justify-self: end; border-radius: 18px 18px 5px; background: #eeecff; }
.sector-faq { display: grid; gap: 12px; }
.sector-faq details { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.sector-faq summary { padding: 16px 18px; cursor: pointer; font-weight: 750; }
.sector-faq p { margin: 0; padding: 0 18px 18px; color: var(--muted); }
.plan-card { display: grid; grid-template-columns: minmax(180px, .35fr) 1fr; gap: 30px; padding: 34px; border-radius: 24px; background: linear-gradient(135deg, #201a55, #4e46e5); color: #fff; }
.plan-name { margin: 8px 0 0; font-size: 2rem; font-weight: 800; }
.plan-copy p { margin: 0 0 24px; color: rgba(255, 255, 255, .86); }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; background: #fff; color: #312e81; font-weight: 800; text-decoration: none; }
.cta-note { display: block; margin-top: 12px; color: rgba(255, 255, 255, .72); font-size: .86rem; }
.language-section { padding-block: 34px; }
.language-picker-wrap { display: flex; justify-content: center; }
.language-picker { position: relative; }
.language-picker summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 88px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--indigo);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker summary::after { content: "⌄"; margin-left: auto; font-size: 1rem; line-height: 1; }
.language-picker summary:focus-visible { outline: 3px solid rgba(78, 70, 229, .18); outline-offset: 2px; }
.language-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  min-width: 112px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(33, 25, 94, .18);
}
.language-menu a { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; text-decoration: none; font-weight: 700; }
.language-menu a:hover, .language-menu a[aria-current="page"] { color: #fff; background: var(--indigo); }
.flag { position: relative; display: inline-block; flex: 0 0 20px; width: 20px; height: 14px; overflow: hidden; border: 1px solid rgba(20, 19, 43, .16); border-radius: 2px; background: #fff; box-shadow: 0 1px 2px rgba(20, 19, 43, .08); }
.flag-es { background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); }
.flag-pt { background: linear-gradient(90deg, #046a38 0 40%, #da291c 40%); }
.flag-fr { background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66%); }
.flag-de { background: linear-gradient(#000 0 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66%); }
.flag-en { background: #21468b; }
.flag-en::before, .flag-en::after, .flag-sv::before, .flag-sv::after, .flag-fi::before, .flag-fi::after { content: ""; position: absolute; }
.flag-en::before { inset: 5px 0; background: #fff; box-shadow: 0 -2px 0 #cf142b, 0 2px 0 #cf142b; }
.flag-en::after { inset: 0 7px; background: #fff; box-shadow: -2px 0 0 #cf142b, 2px 0 0 #cf142b; }
.flag-sv { background: #006aa7; }
.flag-sv::before { inset: 5px 0; background: #fecc00; }
.flag-sv::after { inset: 0 12px 0 6px; background: #fecc00; }
.flag-zh { background: #de2910; }
.flag-zh::after { content: "★"; position: absolute; top: -4px; left: 2px; color: #ffde00; font-size: 9px; }
.flag-fi { background: #fff; }
.flag-fi::before { inset: 5px 0; background: #003580; }
.flag-fi::after { inset: 0 12px 0 6px; background: #003580; }
.site-footer { padding: 38px 0; border-top: 1px solid var(--line); color: var(--muted); }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

@media (max-width: 760px) {
  .wrap { width: min(100% - 28px, 1120px); }
  .site-header .wrap, .site-footer .wrap { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 18px; }
  .hero { padding-top: 44px; }
  .hero-grid, .content-grid, .plan-card { grid-template-columns: 1fr; }
  .chat-preview-message { max-width: 94%; }
  .situations { grid-template-columns: 1fr; }
}