/* Blixtflow – AI-receptionistens sida.
   Telefonen ligger i en kolumn som följer med (sticky). ai.js sätter --air-p (0 i hjälten, 1 när
   samtalet börjar) så att telefonen krymper, och data-step så att skärmen visar rätt steg. */

/* ==========================================================================
   1–2. Hjälten och samtalet
   ========================================================================== */
.air-top {
  --air-p: 0;
  position: relative; isolation: isolate; overflow: clip;
  padding: calc(var(--header-h) + env(safe-area-inset-top) + 26px) 0 calc(var(--sheet-r) + 40px);
  color: #fff; background: var(--natt);
}
.air-top__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.air-top__bg i { position: absolute; border-radius: 50%; }
.air-top__bg i:nth-child(1) { width: 900px; height: 900px; right: -320px; top: -380px; background: radial-gradient(closest-side, rgba(155, 93, 229, .55), transparent); }
.air-top__bg i:nth-child(2) { width: 640px; height: 640px; left: -340px; top: 40%; background: radial-gradient(closest-side, rgba(126, 69, 201, .32), transparent); }
.air-top__bg i:nth-child(3) { width: 520px; height: 520px; right: -200px; bottom: 6%; background: radial-gradient(closest-side, rgba(242, 250, 163, .08), transparent); }
.motion .air-top__bg i:nth-child(1) { animation: drift-a 24s ease-in-out infinite alternate; }
.motion .air-top__bg i:nth-child(2) { animation: drift-b 20s ease-in-out infinite alternate; }

.air-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 64svh auto; }
.air-copy { grid-row: 1; position: relative; z-index: 3; padding-bottom: 24px; }
.air-copy > .eyebrow, .air-copy > .air-scrollhint { align-self: flex-start; }
.air-phonecol { grid-row: 2 / 4; grid-column: 1; position: relative; z-index: 1; }
.air-story { grid-row: 3; grid-column: 1; position: relative; z-index: 2; }

.air-title { max-width: 820px; margin-bottom: 20px; font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.2rem); font-weight: 800; letter-spacing: -.047em; line-height: .96; text-wrap: balance; }
.air-title::after { content: ""; display: block; width: 84px; height: 6px; margin-top: 22px; border-radius: 6px; background: linear-gradient(90deg, var(--gnista), var(--primar)); }
.air-lead { max-width: 600px; color: var(--on-dark-muted); }
.air-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.air-cta .btn--ghost .ic { margin-right: -2px; color: var(--gnista); }
.air-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 30px; font-size: .9375rem; color: var(--on-dark-2); }
.air-trust li { display: flex; align-items: center; gap: 9px; }
.air-trust .ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; stroke-width: 3; color: var(--natt); background: var(--gnista); }
.air-scrollhint { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; font-size: .875rem; font-weight: 650; color: var(--ton); }
.air-scrollhint i { position: relative; width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(200, 168, 242, .5); }
.air-scrollhint i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--gnista); }
.motion .air-scrollhint i::after { animation: air-wheel 1.6s ease-in-out infinite; }

/* Telefonen */
.air-sticky { position: sticky; top: calc(var(--header-h) + 6px); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; height: calc(100svh - var(--header-h) - 6px); padding-top: 8px; }
.air-phonewrap {
  --s0: .96; --ds: .34;
  position: relative; transform-origin: 50% 0;
  transform: scale(calc(var(--s0) - var(--air-p) * var(--ds)));
  transition: transform .5s var(--ease-out);
}
.motion .air-phonewrap { animation: air-phone-in 1.4s .2s var(--ease-out) backwards; }
.air-phone {
  position: relative; z-index: 2; width: 290px; aspect-ratio: 9 / 19; padding: 11px; border-radius: 54px;
  background: linear-gradient(150deg, #6a3d8c, #1c0827 38%, #120417 62%, #4d2a6a);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 5px #0b0310, 0 70px 110px -50px rgba(0, 0, 0, .95), 0 40px 120px -40px rgba(155, 93, 229, .75);
}
.air-phone::before, .air-phone::after { content: ""; position: absolute; right: -3px; width: 4px; border-radius: 0 3px 3px 0; background: #2a1036; }
.air-phone::before { top: 22%; height: 64px; }
.air-phone::after { top: 36%; height: 40px; }
.air-phone__screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 44px; color: #fff;
  background: radial-gradient(130% 70% at 50% 0%, #52227a, #1b0726 62%, #12041a);
}
.air-phone__status { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 24px; font-size: .7rem; font-weight: 650; }
.air-phone__island { width: 86px; height: 26px; border-radius: 16px; background: #050108; }

/* Skärmarna – en åt gången, beroende på steg */
.air-scr {
  position: absolute; inset: 46px 16px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(.97);
  transition: opacity .45s var(--ease), transform .7s var(--ease-out), visibility 0s .45s;
}
[data-step="h"] .air-scr--h, [data-step="0"] .air-scr--0, [data-step="1"] .air-scr--1, [data-step="2"] .air-scr--2,
[data-step="3"] .air-scr--3, [data-step="4"] .air-scr--4, [data-step="5"] .air-scr--5, [data-step="6"] .air-scr--6 {
  opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease) .12s, transform .8s var(--ease-out) .12s, visibility 0s;
}
.air-av { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-top: 34px; border-radius: 50%; font-size: 1.2rem; font-weight: 800; background: var(--c, #15803D); }
.air-av i { position: absolute; inset: -8px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(242, 250, 163, .55); }
.motion .air-av--ring i { animation: ring-out 2s ease-out infinite; }
.motion .air-av--ring i:nth-child(2) { animation-delay: 1s; }
.air-av--bf { background: #fff; }
.air-av--bf img { width: 52%; height: auto; }
.air-av--sm { width: 52px; height: 52px; margin: 0; font-size: 1rem; }
.air-scr__name { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.air-scr__sub { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ton); }
.air-scr__sub--ok { color: #7BE3AE; }
.air-scr__sub .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.air-keys { display: flex; gap: 54px; margin-top: auto; margin-bottom: 18px; }
.air-keys i { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; }
.air-keys .ic { width: 24px; height: 24px; }
.air-keys .is-no { background: #D6363F; }
.air-keys .is-no .ic { transform: rotate(135deg); }
.air-keys .is-yes { background: #22A45D; }
.motion .air-keys .is-yes { animation: air-buzz 1.2s ease-in-out infinite; }
.air-timer { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.air-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 44px; margin-top: auto; margin-bottom: 26px; }
.air-wave i { width: 3px; height: 6px; border-radius: 3px; background: var(--gnista); opacity: .85; }
.motion .air-wave i { animation: eq .5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.07s); }
.air-wave--talk { margin-bottom: 16px; }
.air-langchip { margin-top: 14px; padding: 5px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--natt); background: var(--gnista); }
.air-bub { max-width: 92%; padding: 10px 13px; border-radius: 16px; font-size: .8rem; line-height: 1.4; text-align: left; }
.air-bub small { display: block; margin-bottom: 2px; font-size: .64rem; font-weight: 650; opacity: .75; }
.air-bub--r { align-self: flex-start; background: rgba(255, 255, 255, .1); border-bottom-left-radius: 4px; }
.air-bub--c { align-self: flex-end; background: var(--primar-ink); border-bottom-right-radius: 4px; }
.air-bub--big { align-self: center; margin-top: 10px; padding: 16px 18px; font-size: 1rem; font-weight: 550; border-radius: 20px; transition: opacity .25s, filter .25s; }
.air-bub--big[dir="rtl"] { text-align: right; font-family: system-ui, "Segoe UI", Tahoma, sans-serif; }
.air-bub--big.is-swap { opacity: 0; filter: blur(6px); }
.air-scr--2 { align-items: stretch; padding-top: 18px; }
.air-scr--2 .air-bub { animation: none; }
[data-step="2"] .air-scr--2 .air-bub { animation: bub-in .5s var(--ease-out) backwards; }
[data-step="2"] .air-scr--2 .air-bub:nth-of-type(2) { animation-delay: .5s; }
.air-understood { align-self: center; display: inline-flex; align-items: center; gap: 7px; margin-top: auto; margin-bottom: 18px; padding: 9px 14px; border-radius: 999px; font-size: .76rem; font-weight: 650; color: var(--natt); background: var(--gnista); }
.air-understood .ic { width: 15px; height: 15px; }
.air-cal__h { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .82rem; font-weight: 650; }
.air-cal__h .ic { width: 16px; height: 16px; color: var(--gnista); }
.air-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-top: 6px; }
.air-cal__day { display: grid; gap: 5px; }
.air-cal__day b { font-size: .66rem; font-weight: 650; color: var(--ton); }
.air-cal__slot { padding: 7px 0; border-radius: 9px; font-size: .64rem; font-weight: 650; background: rgba(255, 255, 255, .08); }
.air-cal__slot.is-busy { color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .03); text-decoration: line-through; }
.air-cal__slot.is-pick { color: var(--natt); background: var(--gnista); box-shadow: 0 0 0 3px rgba(242, 250, 163, .25); }
[data-step="3"] .air-cal__slot.is-pick { animation: air-pick 1.1s .7s var(--spring) backwards; }
.air-picked { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; margin-bottom: 18px; padding: 10px 16px; border-radius: 14px; font-size: .86rem; font-weight: 800; color: #fff; background: #22A45D; }
.air-picked .ic { width: 16px; height: 16px; stroke-width: 3; }
.air-lock__time { margin-top: 26px; font-size: 3.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.air-sms { width: 100%; margin-top: 26px; padding: 12px 14px; border-radius: 18px; text-align: left; font-size: .8rem; color: var(--ink); background: rgba(255, 255, 255, .94); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); }
[data-step="4"] .air-sms { animation: air-drop .9s .25s var(--spring) backwards; }
.air-sms__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.air-sms__head b { font-size: .78rem; }
.air-sms__head small { margin-left: auto; font-size: .66rem; color: var(--muted); }
.air-sms__ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; background: #22A45D; }
.air-sms__ic .ic { width: 14px; height: 14px; }
.air-scr--5 { padding-top: 16px; }
.air-sum { width: 100%; padding: 14px; border-radius: 18px; text-align: left; font-size: .8rem; color: var(--ink); background: #fff; }
.air-sum__h { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primar-ink); }
.air-sum__h .ic { width: 14px; height: 14px; }
.air-sum ul { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.air-sum li { padding: 3px 8px; border-radius: 7px; font-size: .64rem; font-weight: 650; color: var(--primar-ink); background: var(--soft); }
.air-sum li:first-child { color: #B42318; background: #FDECEA; }
.air-rec { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); }
.air-rec__play { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--natt); background: var(--gnista); }
.air-rec__play .ic { width: 14px; height: 14px; }
.air-rec__bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .15); }
.air-rec__bar i { display: block; width: 38%; height: 100%; border-radius: 2px; background: var(--gnista); }
.air-rec small { font-size: .62rem; color: var(--ton); }
.air-ticket { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; margin-bottom: 18px; padding: 9px 14px; border-radius: 999px; font-size: .76rem; font-weight: 650; color: var(--natt); background: var(--gnista); }
.air-ticket .ic { width: 15px; height: 15px; }
.air-xfer { display: flex; align-items: center; gap: 8px; margin-top: 44px; }
.air-xfer__line { position: relative; width: 70px; height: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.air-xfer__line i { position: absolute; inset: 0; width: 40%; background: var(--gnista); }
.motion .air-xfer__line i { animation: air-flow 1.2s linear infinite; }

/* Runt telefonen: ringar, hälsningar på sju språk och Blixten */
.air-rings { position: absolute; left: 50%; top: 32%; z-index: 0; width: 0; height: 0; }
.air-rings i { position: absolute; left: -210px; top: -210px; width: 420px; height: 420px; border-radius: 50%; border: 1.5px solid rgba(200, 168, 242, .3); opacity: 0; }
.motion .air-rings i { animation: air-ring 3.6s ease-out infinite; }
.motion .air-rings i:nth-child(2) { animation-delay: 1.2s; }
.motion .air-rings i:nth-child(3) { animation-delay: 2.4s; }
.air-hellos { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.air-hello {
  position: absolute; padding: 8px 14px; border-radius: 16px 16px 16px 4px; font-size: .95rem; font-weight: 800; white-space: nowrap;
  color: var(--natt); background: #fff; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
}
.air-hello[dir="rtl"] { font-family: system-ui, "Segoe UI", Tahoma, sans-serif; border-radius: 16px 16px 4px 16px; }
.air-hello:nth-child(3n) { color: var(--natt); background: var(--gnista); }
.air-hello:nth-child(3n + 1) { color: #fff; background: var(--primar-ink); }
.air-hello--1 { left: -26%; top: 10%; }
.air-hello--2 { right: -24%; top: 18%; }
.air-hello--3 { left: -30%; top: 38%; }
.air-hello--4 { right: -28%; top: 46%; }
.air-hello--5 { left: -22%; top: 64%; }
.air-hello--6 { right: -20%; top: 72%; }
.air-hello--7 { left: 58%; top: -6%; }
.motion .air-hello { animation: air-hello 7s var(--ease-out) infinite backwards; animation-delay: calc(var(--n, 0) * 1s); }
.air-hello--1 { --n: 0; } .air-hello--2 { --n: 1; } .air-hello--3 { --n: 2; } .air-hello--4 { --n: 3; } .air-hello--5 { --n: 4; } .air-hello--6 { --n: 5; } .air-hello--7 { --n: 6; }
.air-bx { position: absolute; left: -34%; bottom: -2%; z-index: 3; width: 140px; }
.air-top:not(.is-start) .air-hellos { opacity: 1; }
.air-top.is-story .air-hellos, .air-top.is-story .air-rings { opacity: 0; transition: opacity .6s; }

/* Stegen i samtalet */
.air-story__head { padding: 18px 20px; border-radius: 24px; background: rgba(32, 10, 45, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.air-story__head .h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); }
.air-steps { display: grid; }
.air-step { display: flex; align-items: flex-end; min-height: 78svh; padding: 24px 0; }
.air-step:last-child { min-height: 70svh; }
.air-step__card {
  width: 100%; padding: 22px 22px 24px; border-radius: 26px;
  background: rgba(32, 10, 45, .84); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(200, 168, 242, .2), 0 30px 60px -30px rgba(0, 0, 0, .8);
  transition: opacity .5s var(--ease), transform .7s var(--ease-out), box-shadow .5s;
}
.air-step__k { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gnista); }
.air-step__k span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-size: .85rem; letter-spacing: 0; color: var(--natt); background: var(--gnista); }
.air-step .h3 { margin-bottom: 8px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; }
.air-step p:last-child { font-size: 1rem; line-height: 1.6; color: var(--on-dark-muted); }
@media (min-width: 1024px) { .js .air-step:not(.is-active) .air-step__card { opacity: .38; transform: scale(.97); } }
.air-step.is-active .air-step__card { box-shadow: inset 0 0 0 1.5px rgba(242, 250, 163, .45), 0 30px 70px -30px rgba(155, 93, 229, .7); }

@media (min-width: 640px) {
  .air-trust { display: flex; flex-wrap: wrap; }
  .air-phone { width: 310px; }
}
@media (min-width: 1024px) {
  .air-top { padding-bottom: calc(var(--sheet-r) + 80px); }
  .air-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); grid-template-rows: auto auto; column-gap: clamp(40px, 6vw, 96px); }
  .air-copy { grid-column: 1; grid-row: 1; min-height: calc(100svh - var(--header-h) - 60px); display: flex; flex-direction: column; justify-content: center; padding-bottom: 60px; }
  .air-phonecol { grid-column: 2; grid-row: 1 / 3; }
  .air-story { grid-column: 1; grid-row: 2; }
  .air-sticky { align-content: center; padding-top: 0; }
  .air-phonewrap { --s0: 1.08; --ds: .2; transform-origin: 50% 50%; }
  .air-phone { width: 320px; }
  .air-story__head { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .air-step { align-items: center; min-height: 82vh; }
  .air-step__card { padding: 30px 32px 32px; }
  .air-bx { left: -42%; width: 170px; }
}
@media (max-width: 1023px) {
  .air-hello { font-size: .8rem; padding: 6px 11px; }
  .air-hello--1 { left: -14%; } .air-hello--3 { left: -18%; } .air-hello--5 { left: -12%; }
  .air-hello--2 { right: -14%; } .air-hello--4 { right: -16%; } .air-hello--6 { right: -10%; }
  .air-bx { left: -22%; width: 110px; }
}

/* ==========================================================================
   3. Vad är en AI-receptionist?
   ========================================================================== */
.air-def { padding-top: clamp(70px, 9vw, 120px); }
.air-def__grid { display: grid; gap: 34px; align-items: start; }
.air-def__answer { margin-top: 18px; font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); line-height: 1.6; color: var(--ink-2); }
.air-def__answer::first-line { font-weight: 650; color: var(--ink); }
.air-updated { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: .875rem; color: var(--muted); }
.air-updated .ic { width: 16px; height: 16px; }
.air-facts { padding: 26px 24px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.air-facts__h { margin-bottom: 10px; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primar-ink); }
.air-fact { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.air-fact:first-child { border-top: 0; }
.air-fact dt { font-size: .8125rem; font-weight: 650; color: var(--muted); }
.air-fact dd { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.45; }
.air-price { font-weight: 800; color: var(--primar-ink); }
.reveal-on .air-facts .air-fact { opacity: 0; transform: translateX(16px); }
.reveal-on .air-facts.is-in .air-fact { opacity: 1; transform: none; transition: opacity .5s, transform .7s var(--ease-out); transition-delay: calc(.2s + var(--i) * 80ms); }
@media (min-width: 900px) {
  .air-def__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; }
  .air-fact { grid-template-columns: 130px 1fr; gap: 16px; align-items: baseline; }
}

/* ==========================================================================
   4. Lyssna
   ========================================================================== */
.air-listen { overflow: clip; background: radial-gradient(70% 60% at 50% 40%, #3e1659, var(--natt) 70%); }
.air-listen__glow { position: absolute; inset: 0; pointer-events: none; background: url("/_webbplats/b4/assets/brand/flode-natt-ruta.svg") 0 0 / 220px; opacity: .18; -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); }
.air-studio { --focus: var(--gnista); position: relative; display: grid; gap: 30px; }
.air-studio__langs { display: flex; gap: 8px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.air-studio__langs::-webkit-scrollbar { display: none; }
.air-studio__langs li { flex: none; scroll-snap-align: start; }
.air-lang {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  min-width: 170px; padding: 10px 16px 10px 10px; border: 0; border-radius: 18px; cursor: pointer; text-align: left; color: #fff;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(200, 168, 242, .22);
  transition: background-color .3s, box-shadow .3s, transform .35s var(--spring);
}
.air-lang b { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font-size: .78rem; font-weight: 800; color: var(--gnista); background: rgba(242, 250, 163, .1); }
.air-lang span { font-size: 1.05rem; font-weight: 650; }
.air-lang span[lang="ar"] { font-family: system-ui, "Segoe UI", Tahoma, sans-serif; }
.air-lang small { font-size: .75rem; color: var(--ton); }
.air-lang:active { transform: scale(.96); }
.air-lang[aria-pressed="true"] { color: var(--natt); background: var(--gnista); box-shadow: 0 16px 40px -14px rgba(242, 250, 163, .65); }
.air-lang[aria-pressed="true"] b { color: var(--gnista); background: var(--natt); }
.air-lang[aria-pressed="true"] small { color: var(--ink-2); }
@media (hover: hover) { .air-lang[aria-pressed="false"]:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); } }
.air-studio__stage { display: grid; justify-items: center; gap: 16px; text-align: center; }
.air-orb { position: relative; display: grid; place-items: center; width: 260px; height: 260px; }
.air-orb__ring { position: absolute; inset: 30px; border-radius: 50%; border: 1.5px solid rgba(242, 250, 163, .35); opacity: 0; }
.is-speaking .air-orb__ring { animation: air-ring 2.4s ease-out infinite; }
.is-speaking .air-orb__ring:nth-child(2) { animation-delay: .8s; }
.is-speaking .air-orb__ring:nth-child(3) { animation-delay: 1.6s; }
.air-orb__btn {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 150px; height: 150px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--natt);
  background: radial-gradient(circle at 35% 30%, #fbffd2, var(--gnista) 45%, #c9d36a);
  box-shadow: 0 0 0 10px rgba(242, 250, 163, .1), 0 30px 70px -20px rgba(242, 250, 163, .6), inset 0 -6px 0 rgba(44, 14, 61, .1);
  transition: transform .4s var(--spring);
}
.air-orb__btn:hover { transform: scale(1.05); }
.air-orb__btn:active { transform: scale(.96); }
.air-orb__icon { display: grid; place-items: center; height: 46px; }
.air-orb__icon svg { width: 46px; height: 46px; fill: currentColor; }
.air-orb__icon .i-play { transform: translateX(3px); } /* optiskt mitt i cirkeln */
.air-orb__icon .i-stop, .is-speaking .air-orb__icon .i-play { display: none; }
.is-speaking .air-orb__icon .i-stop { display: block; }
.air-orb__label { font-size: .8rem; font-weight: 800; }
.air-orb__eq { position: absolute; inset: 0; z-index: 1; }
.air-orb__eq i { position: absolute; left: 50%; top: 50%; width: 3px; height: 14px; margin: -7px 0 0 -1.5px; border-radius: 3px; background: var(--ton); opacity: .5; transform: rotate(calc(var(--i) * 9deg)) translateY(-104px); transform-origin: 50% 50%; }
.motion .is-speaking .air-orb__eq i { animation: air-eq .45s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.05s); background: var(--gnista); opacity: 1; }
.air-studio__bubble {
  max-width: 560px; min-height: 3.4em; padding: 18px 22px; border-radius: 24px 24px 24px 8px;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight: 650; line-height: 1.35; letter-spacing: -.01em; color: var(--natt); background: #fff;
  transition: opacity .25s, filter .25s, transform .45s var(--ease-out);
}
.air-studio__bubble[dir="rtl"] { border-radius: 24px 24px 8px 24px; font-family: system-ui, "Segoe UI", Tahoma, sans-serif; letter-spacing: 0; }
.air-studio__bubble.is-swap { opacity: 0; filter: blur(8px); transform: translateY(10px); }
.air-studio__lang { font-size: .9375rem; font-weight: 650; color: var(--ton); }
.air-studio__msg { min-height: 1.4em; font-size: .875rem; color: var(--gnista); }
.air-studio__voices { display: grid; gap: 10px; justify-items: center; }
.air-studio__voices > p { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ton); }
.air-studio__voices ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.air-studio__voices li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: .8125rem; font-weight: 650; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(200, 168, 242, .2); }
.air-studio__voices li.is-more { padding-left: 12px; color: var(--gnista); }
.air-vav { width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(from calc(var(--h) * 80deg), var(--primar), var(--ton), var(--gnista), var(--primar)); }
.air-studio__bx { display: none; }
.air-studio__note { display: flex; justify-content: center; gap: 10px; max-width: 640px; margin: 34px auto 0; font-size: .875rem; line-height: 1.5; color: var(--ton); text-align: center; }
.air-studio__note .ic { flex: none; width: 18px; height: 18px; color: var(--gnista); }
@media (min-width: 1024px) {
  .air-studio { grid-template-columns: 250px minmax(0, 1fr) 200px; align-items: center; gap: 40px; }
  .air-studio__langs { flex-direction: column; margin: 0; padding: 0; overflow: visible; }
  .air-lang { width: 100%; }
  .air-orb { width: 300px; height: 300px; }
  .air-orb__eq i { transform: rotate(calc(var(--i) * 9deg)) translateY(-122px); }
  .air-studio__bx { display: block; align-self: end; }
}

/* ==========================================================================
   5. Räkna själv
   ========================================================================== */
.air-save { padding-bottom: clamp(56px, 7vw, 96px); }
.air-calc { display: grid; overflow: hidden; border-radius: 32px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.air-calc__in { display: grid; gap: 24px; padding: 26px 22px; }
.air-range { display: grid; gap: 12px; }
.air-range__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .9375rem; font-weight: 650; color: var(--ink-2); }
.air-range output { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.air-range input { width: 100%; height: 28px; margin: 0; background: transparent; accent-color: var(--primar-ink); cursor: pointer; -webkit-appearance: none; appearance: none; }
.air-range input::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--primar-ink) var(--fill, 33%), var(--line) var(--fill, 33%)); }
.air-range input::-moz-range-track { height: 8px; border-radius: 4px; background: var(--line); }
.air-range input::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--primar-ink); }
.air-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border: 4px solid #fff; border-radius: 50%; background: var(--primar-ink); box-shadow: 0 4px 14px rgba(126, 69, 201, .5); }
.air-range input::-moz-range-thumb { width: 18px; height: 18px; border: 4px solid #fff; border-radius: 50%; background: var(--primar-ink); box-shadow: 0 4px 14px rgba(126, 69, 201, .5); }
.air-plans { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.air-plans legend { width: 100%; margin-bottom: 10px; font-size: .9375rem; font-weight: 650; color: var(--ink-2); }
.air-plan { position: relative; flex: 1; min-width: 90px; cursor: pointer; }
.air-plan input { position: absolute; opacity: 0; }
.air-plan span { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; text-align: center; background: var(--ljus); box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .25s, box-shadow .25s, color .25s; }
.air-plan b { font-size: 1rem; }
.air-plan small { font-size: .8rem; color: var(--muted); }
.air-plan input:checked + span { color: #fff; background: var(--natt); box-shadow: 0 14px 30px -14px rgba(44, 14, 61, .7); }
.air-plan input:checked + span small { color: var(--ton); }
.air-plan input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.air-calc__note { font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.air-calc__out { --focus: var(--gnista); display: grid; gap: 24px; padding: 26px 22px 28px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, #4d1f6c, var(--natt) 62%); }
.air-bars { display: grid; gap: 18px; }
.air-bar p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--on-dark-2); }
.air-bar p b { font-size: 1.15rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.air-bar i { display: block; height: 14px; margin: 8px 0 6px; border-radius: 7px; transform: scaleX(var(--w)); transform-origin: left; transition: transform .8s var(--ease-out); }
.air-bar--human i { background: linear-gradient(90deg, #8f7aa3, #b9a7cb); }
.air-bar--ai i { min-width: 10px; background: linear-gradient(90deg, var(--gnista), #d6e26e); box-shadow: 0 0 20px rgba(242, 250, 163, .5); }
.air-bar small { font-size: .78rem; color: var(--ton); }
.air-save__big { display: grid; gap: 12px; padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(242, 250, 163, .25); }
.air-save__big p { display: grid; gap: 2px; }
.air-save__big span { font-size: .875rem; color: var(--ton); }
.air-save__big b { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: var(--gnista); font-variant-numeric: tabular-nums; }
.air-save__big .is-year b { font-size: 1.5rem; color: #fff; }
.air-hours > p { margin-bottom: 10px; font-size: .875rem; color: var(--ton); }
.air-hours__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 6px 0; font-size: .8125rem; }
.air-hours__row b { min-width: 42px; text-align: right; }
.air-week { display: flex; gap: 3px; }
.air-week i { width: 16px; height: 22px; border-radius: 5px; background: rgba(255, 255, 255, .08); }
.air-week--human i:nth-child(-n + 5) { background: linear-gradient(transparent 33%, #b9a7cb 33%, #b9a7cb 67%, transparent 67%), rgba(255, 255, 255, .08); }
.air-week--ai i { background: var(--gnista); box-shadow: 0 0 10px rgba(242, 250, 163, .35); }
.air-after { display: flex; align-items: center; gap: 14px; font-size: .875rem; line-height: 1.45; color: var(--on-dark-2); }
.air-after b { flex: none; font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; color: var(--gnista); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .air-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .air-calc__in, .air-calc__out { padding: 40px 38px; }
}

/* ==========================================================================
   6. Vad den kan göra
   ========================================================================== */
.air-can { padding-top: clamp(40px, 6vw, 80px); }
.air-can__grid { display: grid; gap: 14px; }
.air-job {
  position: relative; isolation: isolate; overflow: hidden; padding: 28px 24px 26px; border-radius: 26px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
}
.air-job::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(155, 93, 229, .16), transparent 62%); }
.air-job__ic { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 18px; color: var(--gnista); background: radial-gradient(circle at 30% 25%, #5b2a80, var(--natt)); box-shadow: 0 16px 30px -14px rgba(44, 14, 61, .8); transition: transform .6s var(--spring); }
.air-job__ic .ic { width: 25px; height: 25px; }
.air-job .h3 { margin-bottom: 6px; }
.air-job p { font-size: .96875rem; line-height: 1.6; color: var(--muted); }
@media (hover: hover) {
  .air-job:hover::before { opacity: 1; }
  .air-job:hover .air-job__ic { transform: rotate(-10deg) scale(1.1); }
  .reveal-on .air-job.is-in:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(155, 93, 229, .35), var(--shadow-2); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
}
.air-extras { margin-top: 36px; text-align: center; }
.air-extras__h { margin-bottom: 14px; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--primar-ink); }
.air-extras ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.air-extras li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 11px; border-radius: 999px; font-size: .9rem; font-weight: 650; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.air-extras .ic { width: 16px; height: 16px; color: var(--primar-ink); }
.reveal-on .air-extras li { opacity: 0; transform: translateY(14px) scale(.9); }
.reveal-on .air-extras.is-in li { opacity: 1; transform: none; transition: opacity .4s, transform .6s var(--spring); transition-delay: calc(.2s + var(--i) * 60ms); }
@media (min-width: 720px) { .air-can__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .air-can__grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   7. Jämförelse och kom igång
   ========================================================================== */
.air-cmp { padding-bottom: calc(clamp(76px, 10vw, 136px) + var(--sheet-r)); background: linear-gradient(180deg, var(--natt), #321147); }
.air-table { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scrollbar-width: thin; }
.air-table table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: .9375rem; }
.air-table th, .air-table td { padding: 16px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--on-dark-line); }
.air-table thead th { font-size: .875rem; font-weight: 800; color: var(--ton); }
.air-table thead th.is-ai { display: table-cell; color: var(--natt); background: var(--gnista); border-radius: 18px 18px 0 0; }
.air-table thead th.is-ai img { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -5px; }
.air-table tbody th { font-weight: 650; color: #fff; }
.air-table tbody td { color: var(--on-dark-muted); }
.air-table td.is-ai { font-weight: 650; color: #fff; background: rgba(242, 250, 163, .07); box-shadow: inset 1.5px 0 0 rgba(242, 250, 163, .35), inset -1.5px 0 0 rgba(242, 250, 163, .35); }
.air-table tbody tr:last-child td.is-ai { border-radius: 0 0 18px 18px; box-shadow: inset 1.5px 0 0 rgba(242, 250, 163, .35), inset -1.5px 0 0 rgba(242, 250, 163, .35), inset 0 -1.5px 0 rgba(242, 250, 163, .35); }
.air-table .air-price { color: var(--gnista); }
.reveal-on .air-table tbody tr { opacity: 0; transform: translateY(10px); }
.reveal-on .air-table.is-in tbody tr { opacity: 1; transform: none; transition: opacity .45s, transform .6s var(--ease-out); transition-delay: calc(.15s + var(--i) * 70ms); }
.air-howto { margin-top: clamp(64px, 8vw, 104px); }
.air-howto__h { margin-bottom: 30px; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; text-align: center; }
.air-howto .steps ol { display: grid; gap: 16px; }
.air-howto__cta { margin-top: 40px; text-align: center; }


/* ==========================================================================
   8. Frågor
   ========================================================================== */
.air-faq { padding-top: clamp(64px, 8vw, 110px); }

@keyframes air-phone-in { from { opacity: 0; translate: 0 120px; rotate: 6deg; } }
@keyframes air-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes air-buzz { 0%, 100% { transform: none; } 10%, 30% { transform: rotate(-10deg) scale(1.06); } 20%, 40% { transform: rotate(10deg) scale(1.06); } 50% { transform: none; box-shadow: 0 0 0 0 rgba(34, 164, 93, .5); } 80% { box-shadow: 0 0 0 16px rgba(34, 164, 93, 0); } }
@keyframes air-ring { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes air-hello { 0% { opacity: 0; transform: translateY(16px) scale(.8); } 8%, 30% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; transform: translateY(-14px) scale(.95); } }
@keyframes air-pick { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes air-drop { from { opacity: 0; transform: translateY(-60px) scale(.9); } }
@keyframes air-flow { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes air-eq { from { height: 10px; } to { height: 34px; } }

/* Gemensamt för de långa sidorna: hjältens ram och sista sektionen före frågorna */
.lp-hero { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--header-h) + env(safe-area-inset-top) + 26px) 0 calc(var(--sheet-r) + 60px); color: #fff; background: var(--natt); }
.lp-hero__grid { display: grid; gap: 46px; align-items: center; }
@media (min-width: 1024px) { .lp-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.lp-go { padding-bottom: calc(clamp(76px, 10vw, 136px) + var(--sheet-r)); }
.lp-pin { position: relative; z-index: 1; margin-top: calc(var(--sheet-r) * -1); border-radius: var(--sheet-r) var(--sheet-r) 0 0; }
.lp-pin__sticky { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 22px; padding: clamp(70px, 9vw, 110px) 0 calc(var(--sheet-r) + 40px); }
.lp-pin.is-pinned .lp-pin__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: calc(var(--header-h) + 16px); padding-bottom: 24px; overflow: hidden; }
.lp-pin__head { text-align: center; }
.lp-pin__head .lead { max-width: 620px; margin: 12px auto 0; }
.lp-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .lp-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; } .lp-split--rev > :first-child { order: 2; } }
/* Gemensamma rörelser för de långa sidorna (samma som på chattsidan). */
@keyframes chp-rise { from { opacity: 0; translate: 0 140px; } }
@keyframes chp-pop { from { opacity: 0; scale: .6; } }
@keyframes chp-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 6px 0; } }
@keyframes chp-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -12px; rotate: -1deg; } }