/* ==========================================================================
   3SA Dialer – hero produktvisning (#ha). Alt er prefixed ha-.
   Vinduet tegnes i fast stoerrelse (desktop 820px, kompakt 380px paa mobil)
   og skaleres med transform af hero-app.js. Trin styres med klasserne st-1..st-8
   paa #ha (alle trin <= nuvaerende er sat). Uden bevaegelse vises slutbilledet.
   ========================================================================== */
.ha{position:relative;z-index:1;margin:0 auto;max-width:820px}
.ha-scale{position:relative;width:100%}
.ha-win{position:absolute;left:0;top:0;width:820px;transform-origin:0 0;border-radius:18px;overflow:hidden;background:#fff;border:1px solid rgba(26,20,16,.1);box-shadow:0 2px 4px rgba(26,20,16,.06),0 30px 70px -28px rgba(26,20,16,.45),0 60px 120px -50px rgba(180,80,26,.35)}
.ha-chrome{height:36px;display:flex;align-items:center;gap:12px;padding:0 14px;background:#16171d;color:rgba(255,255,255,.7);font:500 12px 'Inter',system-ui,sans-serif}
.ha-dots{display:flex;gap:6px}.ha-dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.ha-dots i:nth-child(2){background:#febc2e}.ha-dots i:nth-child(3){background:#28c840}
.ha-url{flex:1;max-width:340px;margin:0 auto;height:22px;border-radius:7px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;gap:6px}
.ha-url i{width:11px;height:11px;display:inline-flex}
.ha-live{display:flex;align-items:center;gap:6px;font:500 10px 'Geist Mono',ui-monospace,monospace;letter-spacing:.1em}
.ha-live b{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:haPing 1.8s infinite}
.ha [data-hi]{display:inline-flex;align-items:center;justify-content:center;flex:none}
.ha [data-hi] svg{width:100%;height:100%}

.ha-app{position:relative;display:flex;height:524px;font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:12.5px;line-height:1.4;color:#222639;text-align:left;-webkit-font-smoothing:antialiased;background:#fafafa}
.ha-sb{width:54px;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;background-color:#1a1b23;background-image:radial-gradient(140% 55% at 50% 105%,rgba(249,115,22,.55),transparent 65%),linear-gradient(180deg,#1a1b23 0%,#1f1d22 55%,#3a1d0e 100%)}
.ha-sb-logo{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;margin-bottom:8px;overflow:hidden}
.ha-sb-logo img{width:30px;height:auto}
.ha-sb-it{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.62)}
.ha-sb-it i{width:17px;height:17px}
.ha-sb-it.on{background:#f97316;color:#fff;box-shadow:0 6px 16px -6px rgba(249,115,22,.9)}
.ha-sb-sp{flex:1}

.ha-main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.ha-bar{height:58px;flex:none;display:flex;align-items:center;gap:10px;padding:0 16px;background:#fff;border-bottom:1px solid #eceef2}
.ha-num{display:flex;align-items:center;gap:8px;height:38px;padding:0 4px 0 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.ha-num>i{width:14px;height:14px;color:#6b7280}
.ha-num b{font-weight:600;font-size:14px;letter-spacing:.01em;white-space:nowrap}
.ha-timer{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;margin-left:4px;border-radius:7px;background:#f3f4f6;color:#6b7280;font:500 12px 'Geist Mono',ui-monospace,monospace;white-space:nowrap;transition:background .4s,color .4s}
.ha-timer em{width:6px;height:6px;border-radius:50%;background:#9ca3af;animation:haBlink 1s infinite}
.st-1 .ha-timer{background:#ecfdf3;color:#15803d}.st-1 .ha-timer em{background:#16a34a;animation:none}
.st-8 .ha-timer{background:#f3f4f6;color:#6b7280}.st-8 .ha-timer em{background:#9ca3af}
.ha-callbtn{position:relative;width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;background:#16a34a;box-shadow:0 0 0 5px rgba(22,163,74,.16);transition:background .4s,box-shadow .4s}
.ha-callbtn::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(22,163,74,.5);animation:haRing 1.2s ease-out infinite}
.ha-callbtn i{width:18px;height:18px;position:absolute;transition:opacity .3s,transform .3s}
.ha-callbtn .c-off{opacity:0;transform:rotate(-90deg)}
.st-1 .ha-callbtn{background:#ef4444;box-shadow:0 0 0 5px rgba(239,68,68,.15)}
.st-1 .ha-callbtn::after{display:none}
.st-1 .ha-callbtn .c-on{opacity:0;transform:rotate(90deg)}.st-1 .ha-callbtn .c-off{opacity:1;transform:none}
.st-8 .ha-callbtn{background:#16a34a;box-shadow:0 0 0 5px rgba(22,163,74,.16)}
.st-8 .ha-callbtn .c-on{opacity:1;transform:none}.st-8 .ha-callbtn .c-off{opacity:0}
.ha-tools{display:flex;gap:2px;padding:4px;border:1px solid #e5e7eb;border-radius:10px;color:#4b5563}
.ha-tools i{width:30px;height:28px;padding:6px}
.ha-prof{display:flex;flex-direction:column;padding:4px 10px;border:1px solid #e5e7eb;border-radius:10px;line-height:1.15}
.ha-prof small{font-size:9.5px;color:#9ca3af}.ha-prof b{font-size:12px;font-weight:600}
.ha-stats{margin-left:auto;display:flex;gap:6px}
.ha-stats>span{display:flex;flex-direction:column;align-items:center;min-width:54px;padding:4px 8px;border-radius:10px;background:#fff7ed;border:1px solid #fed7aa;line-height:1.1}
.ha-stats small{font-size:9.5px;color:#9a3412}.ha-stats b{font:700 15px 'Inter',sans-serif;color:#c2410c}
.ha-stats b.bump{animation:haBump .6s cubic-bezier(.2,.7,.2,1)}

.ha-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;padding:14px 16px 16px}
.ha-lead{min-width:0;display:flex;flex-direction:column;gap:10px}
.ha-crumb{display:flex;align-items:center;gap:6px;color:#6b7280;font-size:11.5px}
.ha-crumb i{width:12px;height:12px}.ha-crumb span{color:#222639}
.ha-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ha-title h4{margin:0;font:700 20px/1.15 'Inter',sans-serif;letter-spacing:-.02em;color:#1f2233}
.ha-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:#fff1e6;color:#ea580c;font-size:11px;font-weight:500}
.ha-tag i{width:11px;height:11px}
.ha-data{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #e5e7eb;border-radius:12px;background:#fff;overflow:hidden}
.ha-data>div{padding:9px 11px;border-right:1px solid #eef0f3;min-width:0}
.ha-data>div:last-child{border-right:0}
.ha-data small{display:block;font-size:10px;color:#9ca3af;margin-bottom:2px}
.ha-data b{display:block;font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-res{position:relative;flex:1;display:flex;flex-direction:column;gap:7px;padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.ha-res-h{display:flex;align-items:center;justify-content:space-between}
.ha-res-h b{font-size:12px;font-weight:600}
.ha-saved{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#16a34a;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
.ha-saved i{width:12px;height:12px}
.st-7 .ha-saved{opacity:1;transform:none}
.ha-note{min-height:74px;padding:9px 11px;border:1px solid #e5e7eb;border-radius:9px;background:#fff;font-size:12.5px;line-height:1.5;color:#374151;transition:border-color .3s,box-shadow .3s}
.st-6 .ha-note{border-color:#fdba74;box-shadow:0 0 0 3px rgba(249,115,22,.12)}
.st-7 .ha-note{border-color:#e5e7eb;box-shadow:none}
.ha-caret{display:none;width:1.5px;height:14px;margin-left:1px;background:#f97316;vertical-align:-2px;animation:haBlink .8s steps(1) infinite}
.st-6 .ha-caret{display:inline-block}.st-7 .ha-caret{display:none}
.ha-chips{display:flex;flex-wrap:wrap;gap:6px}
.ha-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;font-size:11.5px;font-weight:500;color:#374151;transition:all .35s cubic-bezier(.2,.7,.2,1)}
.ha-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,#999)}
.ha-chip i{display:none !important;width:12px;height:12px}
.st-7 .ha-win-chip{background:#16a34a;border-color:#16a34a;color:#fff;transform:scale(1.04);box-shadow:0 8px 18px -8px rgba(22,163,74,.8)}
.st-7 .ha-win-chip::before{display:none}
.st-7 .ha-win-chip i{display:inline-flex !important}

.ha-side{min-width:0;display:flex;flex-direction:column;gap:12px}
.ha-aura{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:12px;background:linear-gradient(180deg,#fff 0%,#fff8f2 100%);border:1px solid #fde0c8;overflow:hidden}
.ha-aura-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #fde8d6}
.ha-aura-h b{font-size:12.5px;font-weight:600}
.ha-orb{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#fb923c,#ea580c);box-shadow:0 4px 10px -4px rgba(234,88,12,.8)}
.ha-orb i{width:13px;height:13px}
.st-3 .ha-orb{animation:haGlow 1.6s ease-in-out 2}
.ha-pill{margin-left:auto;padding:2px 7px;border-radius:999px;background:#ecfdf3;color:#15803d;font:600 9.5px 'Geist Mono',monospace;letter-spacing:.08em;opacity:.4;transition:opacity .4s}
.st-1 .ha-pill{opacity:1}.st-8 .ha-pill{opacity:.4}
.ha-tx{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px 12px 12px;overflow:hidden}
.ha-tx>[data-step]{display:none}
.st-2 .ha-tx>[data-step="2"],.st-3 .ha-tx>[data-step="3"],.st-4 .ha-tx>[data-step="4"],.st-5 .ha-tx>[data-step="5"]{display:block;animation:haIn .5s cubic-bezier(.2,.7,.2,1) both}
.ha-b{max-width:88%;padding:7px 10px;border-radius:11px;font-size:11.5px;line-height:1.4}
.ha-b small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.02em;margin-bottom:1px;opacity:.7}
.ha-b.in{align-self:flex-start;background:#f3f4f6;color:#1f2937;border-bottom-left-radius:4px}
.ha-b.out{align-self:flex-end;background:#1f2233;color:#fff;border-bottom-right-radius:4px}
.ha-tip{padding:9px 11px;border-radius:11px;background:#fff;border:1px solid #fdba74;box-shadow:0 10px 22px -14px rgba(234,88,12,.7)}
.ha-tip span{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:#ea580c;margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.ha-tip span i{width:11px;height:11px}
.ha-tip b{display:block;font-weight:500;font-size:11.5px;line-height:1.45;color:#1f2937}
.ha-q{flex:none;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.ha-q-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.ha-q-h b{font-size:12px;font-weight:600}.ha-q-h span{font-size:10.5px;color:#9ca3af}
.ha-q-list{display:flex;flex-direction:column;gap:2px}
.ha-q-it{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:8px;font-size:11.5px;transition:background .4s}
.ha-q-it b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-q-it span{color:#9ca3af;font-size:10.5px;white-space:nowrap}
.st-8 .ha-q-it:first-child{background:#fff7ed;box-shadow:inset 3px 0 0 #f97316}

.ha-next{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:#1f2233;color:#fff;font-size:12.5px;box-shadow:0 18px 30px -14px rgba(15,17,30,.6);transform:translateY(130%);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s}
.ha-next>i{width:16px;height:16px;color:#fb923c}
.ha-next b{color:#fb923c}
.ha-next em{margin-left:auto;width:90px;height:4px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}
.ha-next em i{display:block;height:100%;width:0;background:#fb923c}
.st-8 .ha-next{transform:none;opacity:1}
.st-8 .ha-next em i{width:100%;transition:width 3s linear}

/* skift mellem emner */
.ha-body,.ha-num b{transition:opacity .35s,transform .35s}
.ha.swap .ha-body,.ha.swap .ha-num b{opacity:0;transform:translateY(8px)}

/* cursor */
.ha-cur{position:absolute;left:0;top:0;width:20px;height:20px;z-index:5;pointer-events:none;opacity:0;transition:transform .9s cubic-bezier(.4,.1,.2,1),opacity .3s}
.ha-cur svg{width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.ha-cur.on{opacity:1}
.ha-cur.click svg{animation:haClick .3s}

/* toasts */
.ha-toast{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;padding:11px 15px 11px 11px;border-radius:15px;font:13px/1.3 'Geist',system-ui,sans-serif;pointer-events:none;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1)}
.ha-toast b{display:block;font-weight:600}.ha-toast small{display:block;font-size:12px;opacity:.75;margin-top:1px}
.ha-toast .ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.ha-toast .ic i{width:16px;height:16px}
.ha-t1{right:-18px;bottom:-22px;background:rgba(255,255,255,.95);color:#1A1410;border:1px solid #EADFD3;box-shadow:0 22px 44px -22px rgba(26,20,16,.5)}
.ha-t1 .ic{background:#E2F3E9;color:#1F7A4D}
.ha-t2{left:28px;top:-30px;background:#1A1410;color:#FBF7F2;box-shadow:0 22px 44px -20px rgba(26,20,16,.7)}
.ha-t2 .ic{background:#EB7A34;color:#1A1410}
.st-7 .ha-t1{opacity:1;transform:none}
.st-3 .ha-t2{opacity:1;transform:none}
.st-5 .ha-t2{opacity:0;transform:translateY(-10px) scale(.96)}

/* trin under vinduet */
.ha-steps{position:relative;z-index:1;list-style:none;display:flex;justify-content:center;gap:6px;margin:30px auto 0;padding:0;flex-wrap:wrap}
.ha-steps li{display:flex;align-items:center;gap:7px;padding:7px 12px 7px 7px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid #EADFD3;font:500 13px 'Geist',sans-serif;color:#8a7b6f;transition:all .4s}
.ha-steps li i{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 11px 'Geist Mono',monospace;font-style:normal;background:#F1E7DC;color:#8a7b6f;transition:all .4s}
.ha-steps li.on{background:#1A1410;border-color:#1A1410;color:#FBF7F2}
.ha-steps li.on i{background:#EB7A34;color:#1A1410}
.ha-steps li.done i{background:#E2F3E9;color:#1F7A4D}

/* ---------- kompakt (mobil): 380px vindue ---------- */
.ha.cmp{max-width:460px}
.ha.cmp .ha-win{width:380px;border-radius:16px}
.ha.cmp .ha-chrome{height:32px;padding:0 12px}
.ha.cmp .ha-live{display:none}
.ha.cmp .ha-app{height:600px}
.ha.cmp .ha-sb,.ha.cmp .ha-tools,.ha.cmp .ha-prof,.ha.cmp .ha-crumb,.ha.cmp .ha-q{display:none}
.ha.cmp .ha-bar{height:56px;padding:0 12px;gap:8px}
.ha.cmp .ha-num{flex:1;min-width:0;padding-left:10px}
.ha.cmp .ha-num b{font-size:13px}
.ha.cmp .ha-stats{margin-left:0}
.ha.cmp .ha-stats>span:first-child{display:none}
.ha.cmp .ha-stats>span{min-width:46px;padding:3px 6px}
.ha.cmp .ha-body{display:flex;flex-direction:column;gap:10px;padding:12px}
.ha.cmp .ha-lead{display:contents}
.ha.cmp .ha-title{order:1}
.ha.cmp .ha-title h4{font-size:18px}
.ha.cmp .ha-data{order:2;grid-template-columns:repeat(2,minmax(0,1fr))}
.ha.cmp .ha-data>div:nth-child(n+3){display:none}
.ha.cmp .ha-data>div:nth-child(2){border-right:0}
.ha.cmp .ha-side{order:3;flex:none;height:206px}
.ha.cmp .ha-res{order:4;flex:1}
.ha.cmp .ha-note{min-height:62px}
.ha.cmp .ha-next{left:12px;right:12px;bottom:12px}
.ha.cmp .ha-next em{width:56px}
.ha.cmp .ha-t2{left:10px;top:-28px}
.ha.cmp .ha-t1{right:-6px;bottom:-26px}
.ha.cmp+.ha-steps{margin-top:34px}

@media (max-width:760px){
  .ha-steps{gap:5px}
  .ha-steps li{font-size:12px;padding:6px 10px 6px 6px}
  .ha-toast{font-size:12px;padding:9px 12px 9px 9px}
  .ha-toast .ic{width:28px;height:28px}
  .ha-col .glow{width:340px;height:340px;margin:-170px 0 0 -170px}
}

@keyframes haIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes haPing{70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@keyframes haRing{from{transform:scale(.9);opacity:1}to{transform:scale(1.45);opacity:0}}
@keyframes haBlink{50%{opacity:0}}
@keyframes haBump{40%{transform:scale(1.45);color:#16a34a}}
@keyframes haGlow{50%{box-shadow:0 0 0 6px rgba(249,115,22,.18),0 4px 10px -4px rgba(234,88,12,.8)}}
@keyframes haClick{50%{transform:scale(.8)}}
@media (prefers-reduced-motion: reduce){.ha *{animation:none !important;transition:none !important}}
.ha.cmp .ha-body>*,.ha.cmp .ha-lead>*{flex-shrink:0}
.ha.cmp .ha-res{flex-shrink:1;min-height:0}
@media (max-width:520px){
  .ha-steps{gap:4px;flex-wrap:nowrap}
  .ha-steps li{padding:6px 10px;font-size:11.5px;white-space:nowrap}
  .ha-steps li i{display:none}
}
@media (max-width:520px){
  .ha-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .ha-steps li{justify-content:center;padding:7px 4px;font-size:11px;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- hero-tekst paa mobil ---------- */
@media (max-width:760px){
  #top{padding-top:112px !important;padding-bottom:40px !important}
  #top .ha-row{gap:44px !important}
  #top .ha-copy{gap:20px !important}
  .ha-mhide{display:none}
  #top .ha-copy p{font-size:17px !important;line-height:1.5 !important}
  .ha-ctas{flex-wrap:nowrap !important;gap:10px !important}
  .ha-ctas .btn{flex:1 1 0;justify-content:center;padding:15px 12px !important;font-size:15.5px !important;white-space:nowrap}
  .ha-trust{gap:6px 14px !important;font-size:13px !important}
}
.ha.cmp .ha-t1{right:10px;bottom:auto;top:-30px}
.ha.cmp .ha-note{flex-shrink:0;min-height:70px}
.ha.cmp .ha-side{height:196px}