/* Blixtflow – kampanjsidan: kampanjen som studsar in med konfetti, besöket som spelas upp när man skrollar
   (camp.js sätter --jp och .is-on), byggaren, villkoren och statistiken. Bygger på ai.css. */

.cmp-site { overflow: hidden; border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 110px -40px rgba(0, 0, 0, .95); }
.cmp-site__bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; background: #FBF8FE; border-bottom: 1px solid var(--line-2); }
.cmp-site__bar > i { width: 9px; height: 9px; border-radius: 50%; background: #E3D7F0; }
.cmp-site__bar span { margin: 0 auto; padding: 3px 14px; border-radius: 999px; font-size: .74rem; color: var(--muted); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cmp-site__body { padding: 24px; height: 330px; background: linear-gradient(180deg, #FFF8F4, #fff); }
.cmp-site__h { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: #3B2A26; }
.cmp-lines { display: grid; gap: 8px; margin-top: 12px; }
.cmp-lines i { width: var(--w); height: 10px; border-radius: 5px; background: #F2E6E1; }
.cmp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.cmp-cards i { height: 90px; border-radius: 14px; background: linear-gradient(135deg, #F8D9CC, #EBC2B3); }

/* Kampanjkortet */
.cmp-pop { overflow: hidden; width: 260px; border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(44, 14, 61, .06), 0 40px 80px -24px rgba(12, 2, 20, .7); }
.cmp-pop__art { position: relative; display: grid; place-items: center; height: 96px; background: radial-gradient(120% 120% at 20% 0%, var(--primar), var(--natt) 75%); }
.cmp-pop__art b { font-size: 2.8rem; font-weight: 800; color: var(--gnista); }
.cmp-pop__body { display: grid; gap: 8px; padding: 16px; }
.cmp-pop__body > b { font-size: 1.1rem; font-weight: 800; }
.cmp-pop__body p { font-size: .86rem; color: var(--muted); }
.cmp-pop__body .cmp-code { display: flex; justify-content: center; padding: 9px; border: 1.5px dashed var(--primar); border-radius: 12px; background: var(--soft); }
.cmp-code span { font-size: 1rem; font-weight: 800; letter-spacing: .14em; color: var(--primar-ink); }
.cmp-btn { display: grid; place-items: center; height: 40px; border-radius: 12px; font-size: .88rem; font-weight: 700; color: #fff; background: var(--natt); }
.cmp-field { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; font-size: .86rem; color: var(--muted) !important; background: var(--ljus); box-shadow: inset 0 0 0 1.5px var(--line); }
.cmp-field .ic { width: 16px; height: 16px; }
.cmp-confetti { position: absolute; inset: 0; pointer-events: none; }
.cmp-confetti i { position: absolute; left: 50%; top: 50%; width: 7px; height: 11px; border-radius: 2px; background: hsl(calc(60 + var(--i) * 25) 90% 70%); opacity: 0; }
.motion .cmp-confetti i { animation: cmp-burst 2.4s 1.4s var(--ease-out) infinite; }

/* ==========================================================================
   1. Hjälten
   ========================================================================== */
.cmp-show { position: relative; padding: 10px 0 40px; }
.motion .cmp-site { animation: chp-rise 1.2s .2s var(--ease-out) backwards; }
.cmp-show .cmp-pop { position: absolute; right: 16px; bottom: 30px; z-index: 3; transform-origin: 100% 100%; }
.motion .cmp-show .cmp-pop { animation: cmp-pop 1s 1s var(--spring) backwards; }
.motion .cmp-show .cmp-code { animation: glow-ring 2.2s 2s ease-in-out infinite; }
.cmp-fab { position: absolute; right: 24px; bottom: -6px; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: var(--primar-ink); box-shadow: 0 0 0 4px var(--natt); }
.cmp-fab .ic { width: 22px; height: 22px; }
.cmp-confetti i { --a: calc(var(--i) * 25.7deg); }
.cmp-trig { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 14px; font-size: .82rem; font-weight: 700; color: var(--natt); background: var(--gnista); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7); }
.cmp-trig .ic { width: 15px; height: 15px; }
.cmp-trig--1 { left: -14px; top: 14%; }
.cmp-trig--2 { left: 6%; top: 52%; color: #fff; background: var(--primar-ink); }
.cmp-trig--2 .ic { transform: rotate(90deg); }
.cmp-trig--3 { right: 30%; top: -6px; color: var(--ink); background: #fff; }
.motion .cmp-trig { animation: chp-pop .7s var(--spring) backwards, bob 5s ease-in-out infinite; }
.motion .cmp-trig--1 { animation-delay: 1.5s, -1s; }
.motion .cmp-trig--2 { animation-delay: 1.7s, -2.2s; }
.motion .cmp-trig--3 { animation-delay: 1.9s, -3.4s; }
.cmp-bx { position: absolute; left: -30px; bottom: -30px; z-index: 4; width: 120px; }
@media (max-width: 599px) {
  .cmp-show .cmp-pop { right: 6px; bottom: 20px; width: 210px; }
  .cmp-pop__body p { font-size: .78rem; }
  .cmp-site__body { height: 360px; }
  .cmp-bx { width: 90px; left: -8px; bottom: -40px; }
  .cmp-trig--3 { display: none; }
}

/* ==========================================================================
   2. Besökets resa
   ========================================================================== */
.cmp-journey { --jp: 1; background: var(--ljus); }
.cmp-j { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .cmp-j { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; } }
.cmp-j__site { position: relative; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.cmp-j__view { height: 340px; overflow: hidden; }
.cmp-j__page { transform: translateY(calc(var(--jp) * -62%)); }
.cmp-j__block { padding: 22px 24px; border-bottom: 1px solid #F6EEEA; }
.cmp-j__pops { position: absolute; right: 14px; bottom: 14px; display: grid; gap: 8px; width: min(270px, 70%); }
.cmp-j__pop { padding: 12px 14px; border-radius: 16px; font-size: .86rem; line-height: 1.4; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(44, 14, 61, .06), 0 24px 50px -18px rgba(12, 2, 20, .6); opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .35s, transform .6s var(--spring); }
.cmp-j__pop small { display: block; margin-bottom: 3px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--primar-ink); }
.cmp-j__pop--2 { color: #fff; background: var(--primar-ink); }
.cmp-j__pop--2 small { color: var(--gnista); }
.cmp-j__pop--3 { color: var(--natt); background: var(--gnista); }
.cmp-j__pop--3 small { color: var(--natt); }
.cmp-j__pop.is-on { opacity: 1; transform: none; }
.cmp-j__cursor { position: absolute; left: 55%; top: calc(40% + var(--jp) * 30%); z-index: 3; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.2 1.6L10 19z' fill='%23fff' stroke='%232C0E3D' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: left .4s, top .4s; }
.cmp-journey.is-exit .cmp-j__cursor { left: 50%; top: -10px; }
.cmp-j__side { display: grid; gap: 12px; }
.cmp-meter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.cmp-meter span { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 650; color: var(--muted); }
.cmp-meter span .ic { width: 17px; height: 17px; color: var(--primar-ink); }
.cmp-meter > b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cmp-meter__bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--line-2); }
.cmp-meter__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primar), var(--gnista)); transform: scaleX(var(--jp)); transform-origin: left; }
.cmp-marks { display: grid; gap: 8px; }
.cmp-marks li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); opacity: .5; transition: opacity .3s, box-shadow .3s, transform .5s var(--spring); }
.cmp-marks span { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-weight: 800; color: var(--primar-ink); background: var(--soft); }
.cmp-marks small { font-size: .8rem; color: var(--muted); }
.cmp-marks li.is-on { opacity: 1; box-shadow: 0 0 0 1.5px var(--primar), var(--shadow-1); transform: translateX(-4px); }
.cmp-marks li.is-on span { color: var(--natt); background: var(--gnista); }
@media (max-width: 899px) { .cmp-j__view { height: 300px; } .cmp-marks { grid-template-columns: repeat(3, 1fr); } .cmp-marks li { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 10px 6px; } .cmp-marks small { display: none; } .cmp-marks b { font-size: .74rem; line-height: 1.3; } .cmp-marks span { grid-row: auto; margin-bottom: 4px; } }

/* ==========================================================================
   3. Byggaren
   ========================================================================== */
.cmp-build { background: linear-gradient(180deg, var(--natt), #321147); }
.cmp-tpls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cmp-tpl { --focus: var(--gnista); display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 0; border-radius: 999px; cursor: pointer; font-size: .9rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(200, 168, 242, .22); transition: background-color .25s, color .25s, transform .3s var(--spring); }
.cmp-tpl .ic { width: 16px; height: 16px; }
.cmp-tpl:hover { transform: translateY(-2px); }
.cmp-tpl[aria-pressed="true"] { color: var(--natt); background: var(--gnista); box-shadow: none; }
.cmp-blocks__h { margin-top: 26px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ton); }
.cmp-blocks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cmp-blocks li { padding: 6px 12px; border-radius: 10px; font-size: .82rem; font-weight: 650; color: var(--on-dark-2); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.cmp-preview { display: grid; place-items: center; min-height: 440px; border-radius: 30px; background: radial-gradient(60% 60% at 50% 50%, rgba(242, 250, 163, .12), transparent 70%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 28px); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.cmp-pv { width: 300px; overflow: hidden; border-radius: 22px; color: var(--ink); background: #fff; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .9); }
.cmp-pv.is-swap { animation: cmp-swap .6s var(--spring); }
.cmp-pv__art[data-kind="hello"] { background: radial-gradient(120% 120% at 20% 0%, #15803D, var(--natt) 75%); }
.cmp-pv__art[data-kind="news"] { background: radial-gradient(120% 120% at 20% 0%, #1D4ED8, var(--natt) 75%); }
.cmp-pv__art[data-kind="banner"] { height: 60px; background: linear-gradient(90deg, var(--gnista), #d6e26e); }
.cmp-pv__art[data-kind="banner"] b { font-size: 1.6rem; color: var(--natt); }

/* ==========================================================================
   4. Villkoren
   ========================================================================== */
.cmp-rb { max-width: 900px; margin-inline: auto; padding: 30px; border-radius: 30px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.cmp-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cmp-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; cursor: pointer; font-size: .92rem; font-weight: 700; text-align: left; color: var(--ink); background: var(--ljus); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s, color .25s, box-shadow .25s; }
.cmp-toggle i { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: #D9CCE6; transition: background-color .25s; }
.cmp-toggle i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .3s var(--spring); }
.cmp-toggle[aria-pressed="true"] { color: #fff; background: var(--natt); box-shadow: none; }
.cmp-toggle[aria-pressed="true"] i { background: var(--gnista); }
.cmp-toggle[aria-pressed="true"] i::after { left: 16px; }
.cmp-sentence { margin-top: 24px; padding: 18px 20px; border-radius: 18px; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 650; line-height: 1.45; background: var(--soft); }
.cmp-sentence b { color: var(--primar-ink); }
.cmp-sentence em { font-style: normal; padding: 1px 7px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(155, 93, 229, .3); animation: pop-in .35s var(--spring) both; }
.cmp-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: .9rem; color: var(--muted); }
.cmp-consent .ic { flex: none; width: 18px; height: 18px; color: var(--primar-ink); }

/* ==========================================================================
   5. Statistiken
   ========================================================================== */
.cmp-stats { padding-top: 0; }
.cmp-nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 900px; margin-inline: auto; padding: 28px 24px; border-radius: 30px; color: #fff; background: radial-gradient(120% 100% at 100% 0%, #5b2a80, var(--natt) 60%); box-shadow: var(--shadow-3); }
.cmp-nums li { display: grid; justify-items: center; gap: 6px; text-align: center; }
.cmp-nums__bar { position: relative; display: block; width: 46px; height: 160px; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.cmp-nums__bar i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h) * 100%); border-radius: 12px; background: linear-gradient(var(--gnista), var(--primar)); transform-origin: bottom; }
.reveal-on .cmp-nums .cmp-nums__bar i { transform: scaleY(0); }
.reveal-on .cmp-nums.is-in .cmp-nums__bar i { transform: none; transition: transform 1.2s var(--ease-out); transition-delay: calc(.2s + var(--i) * .12s); }
.cmp-nums b { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-nums small { font-size: .78rem; color: var(--ton); }
.cmp-nums__note { margin-top: 12px; text-align: center; font-size: .85rem; color: var(--muted); }
@media (max-width: 599px) { .cmp-nums { gap: 4px; padding: 20px 10px; } .cmp-nums__bar { width: 30px; height: 120px; } .cmp-nums b { font-size: 1rem; } .cmp-nums small { font-size: .66rem; } }
.cmp-def { padding-bottom: calc(clamp(76px, 10vw, 136px) + var(--sheet-r)); }

@keyframes cmp-pop { 0% { opacity: 0; transform: scale(.4) translateY(40px); } 100% { opacity: 1; transform: none; } }
@keyframes cmp-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0); } 60% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-90px) rotate(360deg); } }
@keyframes cmp-swap { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(.9); } 100% { transform: none; } }