:root {
  color-scheme: light;
  --paper: #fbf8f1;
  --ink: #292544;
  --muted: #706c81;
  --pink: #f4608b;
  --purple: #8465dc;
  --purple-deep: #6746cb;
  --lime: #d9f387;
  --yellow: #ffdf70;
  --blue: #a9dcf4;
  --orange: #ff9d70;
  --edge: #e7e1e9;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  background: var(--paper);
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
.page-shell { position: relative; isolation: isolate; display: grid; min-height: 100svh; overflow: hidden; }
.page-shell::after {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(#51467524 1px, transparent 1px);
  background-size: 25px 25px; opacity: .27;
  mask-image: linear-gradient(to bottom, transparent 22%, #000 100%);
}
.ambient { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(2px); }
.ambient--yellow { width: clamp(440px, 57vw, 820px); aspect-ratio: 1; left: min(-37vw,-240px); top: -26%; background: radial-gradient(circle, #ffe691ba 0%, #ffe6916e 35%, transparent 72%); }
.ambient--pink { width: clamp(440px, 56vw, 850px); aspect-ratio: 1; right: min(-33vw,-180px); top: 1%; background: radial-gradient(circle, #ffb2c8a8 0%, #ffd4dfa4 36%, transparent 72%); }
.ambient--blue { width: clamp(360px, 52vw, 750px); aspect-ratio: 1; left: 33%; bottom: -62%; background: radial-gradient(circle, #abdcf5a1 0%, #ccebf784 35%, transparent 70%); }
.site { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 60px 26px; }
.hero { width: min(100%, 1100px); text-align: center; position: relative; transform: none; }
.sale-tag {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 33px;
  padding: 9px 17px; border-radius: 999px; border: 1px solid #dcd2dc;
  background: #fffdf7d9; box-shadow: 0 5px 16px #2e27420a;
  color: #635574; font-size: 11px; font-weight: 800; letter-spacing: .105em; text-transform: uppercase;
}
.tag-dot { width: 8px; height: 8px; border-radius: 50%; background: #78c68e; box-shadow: 0 0 0 3px #78c68e20; }
.title-wrap { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
h1 {
  margin: 0; white-space: nowrap; line-height: .95;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Avenir Next", "Segoe UI", sans-serif;
  font-size: clamp(6rem, 15vw, 12.6rem); font-weight: 900; letter-spacing: -.092em;
}
.domain-word { color: var(--ink); }
.domain-ending { color: var(--purple); letter-spacing: -.10em; }
.title-star {
  position: absolute; right: -9%; top: -25%; color: var(--pink); font-size: clamp(38px, 5.8vw, 72px);
  line-height: 1; transform: rotate(-18deg); transform-origin: center;
  animation: twinkle 6s ease-in-out infinite;
}
.hero-line {
  margin: 31px 0 0; font-size: clamp(1.55rem, 3.15vw, 2.45rem);
  font-weight: 800; letter-spacing: -.046em; line-height: 1.28;
}
.hero-line em { font-style: normal; color: var(--pink); }
.subtitle { color: var(--muted); font-size: clamp(14px, 1.4vw, 16px); font-weight: 400; line-height: 1.72; margin: 17px 0 0; }
.contact-link {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 39px;
  background: var(--purple); color: white; border: 2px solid var(--purple); border-radius: 999px;
  text-decoration: none; font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  padding: 8px 9px 8px 25px; margin-top: 34px; min-height: 56px;
  box-shadow: 0 9px 0 #49328822, 0 17px 35px #6149b329;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.contact-link:hover { transform: translateY(-3px); background: var(--purple-deep); box-shadow: 0 12px 0 #49328822, 0 20px 35px #6149b329; }
.button-arrow { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 auto; border-radius: 50%; background: white; color: var(--purple); font-size: 23px; font-weight: 400; line-height: 1; }
.contact-hint { margin: 21px 0 0; color: #868194; font-size: 12px; line-height: 1.5; }
.decoration { position: absolute; z-index: -1; pointer-events: none; }
.decoration--squiggle { width: clamp(120px, 15vw, 205px); top: 10%; left: 12%; color: var(--orange); transform: rotate(-14deg); }
.decoration--spark { width: clamp(47px, 6vw, 85px); top: 25%; right: 14%; color: var(--yellow); transform: rotate(-9deg); }
.decoration--flower { width: clamp(73px, 9vw, 124px); bottom: 10%; left: 13%; color: var(--lime); transform: rotate(12deg); }
.decoration--circle { width: clamp(60px, 7vw, 95px); bottom: 14%; right: 12%; color: var(--blue); transform: rotate(19deg); }
@keyframes twinkle { 0%, 100% { transform: rotate(-18deg) scale(1); } 50% { transform: rotate(4deg) scale(1.10); } }
/* Kontaktformulär */
.contact-dialog {
  width: min(590px, calc(100% - 32px)); max-width: none;
  max-height: min(850px, calc(100dvh - 28px)); overflow-y: auto;
  margin: auto; padding: 35px 39px 37px; border: 1px solid #ded4df; border-radius: 23px;
  color: var(--ink); background: #fffdf8;
  box-shadow: 0 28px 120px #241c3e4a;
}
.contact-dialog[open]:not(:modal) { position: fixed; inset: 0; z-index: 10; }
.contact-dialog::backdrop { background: #241b3c73; backdrop-filter: blur(6px); }
.dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.dialog-eyebrow { margin: 0 0 8px; color: var(--purple); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2rem); font-weight: 900; line-height: 1.2; letter-spacing: -.045em; }
.dialog-description { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.close-dialog { display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 auto; color: var(--ink); background: #f3eef7; border-radius: 50%; border: 0; text-decoration: none; font: 300 24px/1 Arial,sans-serif; }
.close-dialog:hover { background: #e6dcf5; }
.field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 800; color: #514a69; }
.optional { color: #8b8798; font-weight: 400; }
.required { color: var(--pink); }
.field input, .field textarea { display: block; width: 100%; min-height: 45px; padding: 10px 12px; font-size: 16px; line-height: 1.45; color: var(--ink); background: #fff; border: 1px solid #ded7e4; border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
.field input::placeholder, .field textarea::placeholder { color: #aba7b4; font-size: 13px; }
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px #8465dc23; }
.form-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 2px; }
.privacy-details { flex: 1 1 190px; max-width: 260px; color: #807a8d; font-size: 11px; line-height: 1.6; }
.privacy-details summary { cursor: pointer; text-decoration: underline; text-underline-offset: 4px; list-style: none; }
.privacy-details summary::-webkit-details-marker { display: none; }
.privacy-details summary:hover { color: var(--purple); }
.privacy-details p { margin: 10px 0 0; }
.submit-button { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 45px; padding: 12px 15px; color: #fff; background: var(--purple); border: 1px solid var(--purple); border-radius: 10px; font-size: 12px; font-weight: 800; transition: background .2s ease; }
.submit-button:hover { background: var(--purple-deep); }
.submit-button span { font-size: 18px; font-weight: 400; line-height: 1; }
.message { padding: 17px; margin: 0 0 22px; color: #6a334b; background: #fff0f4; border: 1px solid #f9c6d5; border-radius: 12px; font-size: 13px; line-height: 1.55; }
.message.success { color: #37563b; background: #f0f8e7; border-color: #cfebbb; }
.message.success strong, .message.success span { display: block; }
.message.success strong { margin-bottom: 5px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 800px) {
  .decoration--squiggle { top: 12%; left: 7%; }
  .decoration--spark { top: 15%; right: 6%; }
  .decoration--flower { bottom: 9%; left: 7%; }
  .decoration--circle { bottom: 10%; right: 7%; }
  h1 { font-size: clamp(5.5rem, 14vw, 8.5rem); }
}
@media (max-width: 580px) {
  .site { padding: 48px 20px; }
  .hero { transform: none; }
  .sale-tag { margin-bottom: 28px; font-size: 10px; }
  h1 { font-size: clamp(3.8rem, 15.2vw, 5.75rem); letter-spacing: -.09em; }
  .title-star { right: -7%; top: -42%; font-size: clamp(32px, 7vw, 46px); }
  .hero-line { margin-top: 29px; font-size: clamp(1.5rem, 6vw, 2rem); }
  .subtitle { margin-top: 15px; font-size: 14px; }
  .desktop-break { display: none; }
  .contact-link { margin-top: 29px; }
  .decoration--squiggle { width: 118px; top: 12%; left: -5%; opacity: .6; }
  .decoration--spark { width: 51px; top: 18%; right: 5%; }
  .decoration--flower { width: 78px; bottom: 8%; left: -3%; }
  .decoration--circle { width: 58px; bottom: 9%; right: -2%; }
  .ambient--blue { bottom: -30%; }
  .contact-dialog { padding: 28px 22px; border-radius: 17px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field { margin-bottom: 15px; }
  .form-footer { gap: 19px; }
  .privacy-details { max-width: none; }
}
@media (max-width: 360px) {
  h1 { font-size: 14.8vw; }
  .contact-link { gap: 20px; padding-left: 19px; }
  .contact-dialog { padding: 22px 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Mjukare återkoppling och vertikal centrering även på mindre skärmar */
@media (max-height: 620px) and (min-width: 581px) {
  .site { padding-block: 48px; }
  .sale-tag { margin-bottom: 20px; }
  .hero-line { margin-top: 17px; }
  .contact-link { margin-top: 20px; }
}
@media (max-height: 630px) and (max-width: 580px) {
  .site { padding-block: 36px; }
  .sale-tag { margin-bottom: 16px; }
  .hero-line { margin-top: 18px; }
  .contact-link { margin-top: 19px; }
  .contact-hint { margin-top: 12px; }
}
.success-note { display: block; padding-top: 9px; font-size: 12px; color: #677960; }