*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#101414;--bg-deep:#040505;--primary:#43e19b;--primary-c:#0cc481;
  --surface:#1c2020;--surface-high:#272b2b;--surface-highest:#323535;
  --surface-low:#181c1c;--surface-lowest:#0b0f0f;
  --on-bg:#e0e3e2;--on-surface-var:#bbcabe;--outline-var:#3c4a41;
  --error:#ffb4ab;--error-c:#93000a;
}
body{background:var(--bg);color:var(--on-bg);font-family:'Inter',sans-serif;min-height:100vh;overflow-x:hidden;position:relative}
/* Background layers */
#bg-shader-container{position:fixed;inset:0;z-index:0;width:100%;height:100%;background:#010201}
/* Stilla fallback när shadern inte startar (reducerad rörelse, ingen grafikkrets,
   CDN nere). Samma fyra färger som shadern, i dess viloläge. Klassen sätts av bg-shader.js. */
#bg-shader-container.bg-static{background:
  radial-gradient(120% 80% at 70% 20%, rgba(6,72,48,.55) 0%, rgba(3,32,16,.35) 35%, transparent 70%),
  radial-gradient(90% 70% at 20% 85%, rgba(2,16,8,.9) 0%, transparent 60%),
  linear-gradient(160deg, #010201 0%, #021008 55%, #032010 100%)}
.noise{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E")}
/* Header */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 40px;background:rgba(16,20,20,.4);backdrop-filter:blur(40px);border-bottom:1px solid rgba(12,196,129,.2);box-shadow:0 0 30px rgba(12,196,129,.1);touch-action:none}
.logo{color:var(--primary-c);font-family:'Manrope',sans-serif;font-weight:900;font-style:italic;font-size:18px;letter-spacing:-.05em;display:flex;align-items:center;gap:16px;cursor:pointer;-webkit-user-select:none;user-select:none}
.lang-switcher{display:flex;gap:4px;align-items:center}
.lang-btn{background:transparent;border:1px solid rgba(12,196,129,.2);color:rgba(12,196,129,.4);font-family:'Space Grotesk',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;padding:6px 12px;border-radius:4px;cursor:pointer;transition:all .3s ease}
.lang-btn:hover{background:rgba(12,196,129,.1);border-color:rgba(12,196,129,.4)}
.lang-btn.active{background:rgba(12,196,129,.15);border-color:var(--primary-c);color:var(--primary-c);box-shadow:0 0 12px rgba(12,196,129,.2)}
/* Sidebar */
nav.sidebar{display:none}
.nav-version{margin-bottom:48px;text-align:center}
.nav-version span{display:block;font-family:'Manrope',sans-serif;font-weight:300;letter-spacing:.15em;font-size:10px;text-transform:uppercase}
.nav-version .v-label{color:var(--primary-c)}
.nav-version .v-num{color:rgba(6,78,50,.6)}
.nav-item{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0;cursor:pointer;transition:all .3s;color:rgba(6,78,50,.4);margin-bottom:8px}
.nav-item:hover{color:#a7f3d0;background:rgba(255,255,255,.05)}
.nav-item.active{color:var(--primary-c);border-left:2px solid var(--primary-c);background:rgba(12,196,129,.1)}
.nav-item span.label{font-family:'Manrope',sans-serif;font-weight:300;letter-spacing:.15em;font-size:10px;text-transform:uppercase}
/* Main — scroll snap container */
main{position:relative;z-index:10;height:100vh;padding:0;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
main::-webkit-scrollbar{display:none}
/* Glass card — now a vertical flow container */
.glass-card{position:relative;width:100%}
/* Pages — snap sections */
.page{display:flex;align-items:center;justify-content:center;min-height:100vh;scroll-snap-align:start;scroll-snap-stop:always;position:relative;padding:80px 32px 32px 32px}
/* Page inner glass wrapper */
.page-glass{position:relative;width:100%;max-width:1024px;border-radius:32px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));backdrop-filter:blur(60px);box-shadow:0 0 80px rgba(8,146,90,.15),0 0 160px rgba(8,146,90,.06),0 16px 64px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.15),inset 0 -1px 1px rgba(0,0,0,.3);overflow:hidden;display:flex;flex-direction:column;align-items:center}
.page-glass::before{content:'';position:absolute;inset:0;border-radius:32px;padding:1px;background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.06) 40%,transparent 60%,rgba(12,196,129,.15));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.page-glass::after{content:'';position:absolute;inset:0;border-radius:32px;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.08),transparent 60%),radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.2),transparent 50%);pointer-events:none}
/* Scroll-driven glass parallax — JS applies transforms */
.page-glass{transform:translateY(0) scale(1);opacity:1}
body.is-swapping .page-glass{will-change:transform,opacity}
/* Staggered children reveal */
.page.in-view .hero-inner > *,
.page.in-view .phil-inner > *,
.page.in-view .flux-inner > *,
.page.in-view .void-inner > * {animation:contentReveal .7s cubic-bezier(.16,1,.3,1) both}
/* Var `.page.in-view *:nth-child(n)` — en universell väljare som satte
   animation-delay på VARJE ättling, även på .dash-panel som har en egen
   contentReveal med fill:both. Delayen ändrades då fram och tillbaka vid varje
   sidbyte, och en fill:both-animation i väntläge håller sitt from-läge:
   opacity 0. Scopad till de barn som faktiskt ska tona in. */
.page.in-view .hero-inner > *:nth-child(1),
.page.in-view .phil-inner > *:nth-child(1),
.page.in-view .flux-inner > *:nth-child(1),
.page.in-view .void-inner > *:nth-child(1){animation-delay:.15s}
.page.in-view .hero-inner > *:nth-child(2),
.page.in-view .phil-inner > *:nth-child(2),
.page.in-view .flux-inner > *:nth-child(2),
.page.in-view .void-inner > *:nth-child(2){animation-delay:.25s}
.page.in-view .hero-inner > *:nth-child(3),
.page.in-view .phil-inner > *:nth-child(3),
.page.in-view .flux-inner > *:nth-child(3),
.page.in-view .void-inner > *:nth-child(3){animation-delay:.35s}
.page.in-view .hero-inner > *:nth-child(4),
.page.in-view .phil-inner > *:nth-child(4),
.page.in-view .flux-inner > *:nth-child(4),
.page.in-view .void-inner > *:nth-child(4){animation-delay:.45s}
@keyframes contentReveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* Scroll down arrow */
.scroll-arrow{display:flex;flex-direction:column;align-items:center;gap:0;padding:16px 0 20px;cursor:pointer;color:var(--primary-c);filter:drop-shadow(0 0 8px rgba(12,196,129,.6)) drop-shadow(0 0 20px rgba(12,196,129,.3));position:relative;z-index:10;width:100%}
.scroll-arrow svg{animation:scrollPulse 2s ease-in-out infinite}
.scroll-arrow svg:nth-child(2){margin-top:-10px;animation-delay:.3s}
@keyframes scrollPulse{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(4px)}}
/* Scroll indicator */
.scroll-indicator{position:fixed;right:32px;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:16px;align-items:center}
.scroll-dot{width:6px;height:6px;border-radius:50%;background:rgba(67,225,155,.2);border:1px solid rgba(67,225,155,.15);cursor:pointer;transition:all .5s cubic-bezier(.16,1,.3,1);position:relative}
.scroll-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid transparent;transition:all .5s cubic-bezier(.16,1,.3,1)}
.scroll-dot.active{width:8px;height:8px;background:var(--primary-c);border-color:var(--primary-c);box-shadow:0 0 12px rgba(12,196,129,.6),0 0 24px rgba(12,196,129,.2)}
.scroll-dot.active::after{border-color:rgba(12,196,129,.3);inset:-6px}
.scroll-dot:hover:not(.active){background:rgba(67,225,155,.4);border-color:rgba(67,225,155,.3)}
.scroll-line{width:1px;height:16px;background:linear-gradient(to bottom,rgba(67,225,155,.15),rgba(67,225,155,.05));flex-shrink:0}
/* Scroll progress bar */
.scroll-progress{position:fixed;top:64px;left:96px;right:0;height:2px;z-index:45;background:rgba(12,196,129,.05)}
.scroll-progress-bar{height:100%;width:0;background:linear-gradient(to right,rgba(12,196,129,.6),var(--primary-c));transition:width .15s ease-out;box-shadow:0 0 8px rgba(12,196,129,.4)}
/* Hero page */
.hero-inner{padding:64px 96px;text-align:center}
.hero-icon{font-size:60px;color:var(--primary-c);opacity:.9;margin-bottom:24px;filter:drop-shadow(0 0 30px rgba(12,196,129,.6))}
.hero-title{display:flex;justify-content:center;align-items:center;gap:24px;font-family:'Manrope',sans-serif;font-size:48px;font-weight:300;letter-spacing:.05em;filter:drop-shadow(0 0 20px rgba(12,196,129,.4));flex-wrap:wrap}
.hero-title .static{color:rgba(255,255,255,.8);white-space:nowrap}
.spin-box{height:1.4em;overflow:hidden;position:relative;border-bottom:2px solid rgba(12,196,129,.5);width:500px;max-width:90vw;color:var(--primary-c);font-family:'Space Grotesk',monospace;filter:drop-shadow(0 0 25px rgba(12,196,129,.9))}
.spin-inner{position:absolute;top:0;left:0;width:100%;animation:spin-words 10s cubic-bezier(.65,0,.35,1) infinite;display:flex;flex-direction:column}
.spin-inner div{height:1.4em;display:flex;align-items:center;white-space:nowrap;font-weight:700}
.hero-desc{font-size:20px;color:var(--on-bg);max-width:768px;margin:40px auto 0;line-height:1.6;font-weight:300}
.hero-tag{font-family:'Space Grotesk',monospace;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--on-surface-var);opacity:.8;margin-top:32px}
/* Philosophy page */
.phil-inner{padding:40px 64px;text-align:center}
.phil-h1{font-family:'Manrope',sans-serif;font-size:42px;color:var(--on-bg);filter:drop-shadow(0 0 20px rgba(12,196,129,.2))}
.phil-sub{font-family:'Manrope',sans-serif;font-size:24px;color:var(--on-surface-var);font-weight:300;max-width:768px;margin:24px auto 0}
.phil-box{background:rgba(50,53,53,.5);border:1px solid rgba(60,74,65,.5);border-radius:8px;padding:24px;max-width:640px;margin:40px auto 0}
.phil-box p{font-family:'Manrope',sans-serif;font-size:24px;color:var(--primary-c)}
.phil-flow{display:flex;align-items:center;justify-content:center;gap:32px;margin-top:40px;padding-bottom:32px;border-bottom:1px solid transparent;border-image:linear-gradient(to right,rgba(51,51,51,0),rgba(119,119,119,.5),rgba(51,51,51,0)) 1;flex-wrap:wrap}
.flow-step{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}
.flow-step .circle{width:48px;height:48px;border-radius:50%;border:1px solid var(--outline-var);display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--on-bg);transition:all .4s ease}
.flow-step .flow-label{font-family:'Space Grotesk',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-var);text-align:center;max-width:120px;transition:color .4s ease}
.flow-arrow{color:var(--outline-var);font-size:24px}
/* Traveling light — JS cycles .step-active class */
.flow-step .circle{transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.flow-step .flow-label{transition:color .2s ease}
.flow-step.step-active .circle{border-color:var(--primary-c);background:rgba(12,196,129,.12);color:var(--primary-c);box-shadow:0 0 16px rgba(12,196,129,.25)}
.flow-step.step-active .flow-label{color:var(--primary-c)}
/* Flux page — centered voice agent */
.flux-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:48px 32px 24px;min-height:calc(100vh - 250px)}
.voice-panel{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:24px;padding:0}
.link-badge{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.link-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);animation:blink 2s infinite}
.link-text{font-family:'Space Grotesk',monospace;font-size:12px;letter-spacing:.1em;color:rgba(67,225,155,.8)}
/* Orb */
.orb-wrap{position:relative;width:192px;height:192px;display:flex;align-items:center;justify-content:center}
.orb-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(67,225,155,.2);animation:spin 10s linear infinite}
.orb-ring-2{position:absolute;inset:16px;border-radius:50%;border:1px dashed rgba(67,225,155,.1);animation:spin 15s linear infinite reverse}
.orb-core{width:96px;height:96px;border-radius:50%;background:rgba(67,225,155,.2);backdrop-filter:blur(8px);border:1px solid rgba(67,225,155,.5);display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px var(--primary),inset 0 0 20px rgba(101,253,180,.3);position:relative;z-index:1}
.orb-core .material-symbols-outlined{font-size:40px;color:var(--primary)}
.wave-bars{position:absolute;width:120%;height:120%;display:flex;align-items:center;justify-content:center;gap:4px;opacity:.5}
.wave-bars div{width:4px;background:var(--primary);border-radius:4px}
/* Voice label */
.voice-label{text-align:center}
.voice-label h2{font-family:'Manrope',sans-serif;font-size:32px;color:var(--on-bg)}
.voice-label p{font-family:'Space Grotesk',monospace;font-size:14px;color:rgba(187,202,190,.6);margin-top:4px}
/* End-call button */
.voice-btns{display:flex;gap:16px;margin-top:8px}
.voice-btns button{width:48px;height:48px;border-radius:50%;border:1px solid var(--outline-var);background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s;color:var(--on-surface-var)}
.voice-btns button:hover{background:rgba(50,53,53,.5)}
.voice-btns .end-btn{background:rgba(255,180,171,.1);border-color:rgba(255,180,171,.3);color:var(--error)}
/* Conversation starters — below orb */
.starter-panel{display:flex;flex-direction:column;gap:8px;width:100%;max-width:400px;padding:0;margin-top:16px;border-top:1px solid rgba(60,74,65,.2);padding-top:24px}
.starter-btn{background:rgba(12,196,129,.06);border:1px solid rgba(12,196,129,.2);color:var(--on-bg);font-family:'Space Grotesk',monospace;font-size:13px;font-weight:400;letter-spacing:.02em;padding:12px 16px;border-radius:6px;cursor:pointer;text-align:left;transition:all .3s ease;position:relative;overflow:hidden}
.starter-btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(12,196,129,.08),transparent);transition:left .5s ease}
.starter-btn:hover{background:rgba(12,196,129,.12);border-color:rgba(12,196,129,.5);box-shadow:0 0 16px rgba(12,196,129,.15);color:var(--primary)}
.starter-btn:hover::before{left:120%}
.starter-open{background:none;border:none;color:var(--on-surface-var);font-family:'Space Grotesk',monospace;font-size:12px;letter-spacing:.05em;padding:8px 0;cursor:pointer;transition:color .3s;opacity:.7;text-align:center}
.starter-open:hover{color:var(--primary);opacity:1}
.starter-panel.hidden{display:none}
/* Void/Contact page */
.void-inner{display:flex;min-height:500px;max-height:calc(100vh - 180px)}
.form-panel{flex:1;padding:40px 48px;border-right:1px solid rgba(60,74,65,.3);display:flex;flex-direction:column}
.form-panel h2{font-family:'Manrope',sans-serif;font-size:32px;color:var(--on-bg);margin-bottom:16px}
.form-panel>p{font-size:16px;color:var(--on-surface-var);margin-bottom:40px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group.full{grid-column:1/-1}
.form-group label{font-family:'Space Grotesk',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--on-surface-var)}
.form-group input,.form-group textarea{background:rgba(11,15,15,.5);box-shadow:inset 0 2px 4px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.05);border-radius:2px;padding:12px 16px;color:var(--on-bg);font-family:'Space Grotesk',monospace;font-size:14px;outline:none;transition:border .3s}
.form-group input:focus,.form-group textarea:focus{border-color:var(--primary-c);box-shadow:inset 0 2px 4px rgba(0,0,0,.5),0 0 0 1px var(--primary-c)}
.form-group textarea{resize:none;min-height:120px;flex:1}
.transmit-btn{margin-top:16px;background:var(--primary-c);color:var(--surface-lowest);font-family:'Space Grotesk',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;padding:16px;border:none;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:box-shadow .3s}
.transmit-btn:hover{box-shadow:0 0 20px rgba(12,196,129,.4)}
.scan-panel{flex:1;padding:40px 48px;background:rgba(24,28,28,.1);display:flex;flex-direction:column}
.scan-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(60,74,65,.3);padding-bottom:16px;margin-bottom:40px}
.scan-title{font-family:'Space Grotesk',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--primary-c);display:flex;align-items:center;gap:8px}
.scan-title .dot{width:8px;height:8px;border-radius:50%;background:var(--primary-c);animation:blink 2s infinite}
.scan-status{font-family:'Space Grotesk',monospace;font-size:14px;color:var(--on-surface-var)}
.profile-card{background:rgba(50,53,53,.3);border-radius:8px;padding:24px;border:1px solid rgba(60,74,65,.3);backdrop-filter:blur(8px)}
.profile-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(60,74,65,.3);margin-bottom:12px}
.profile-row:last-child{border:none;margin:0;padding:0}
.profile-row .pk{font-family:'Space Grotesk',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--on-surface-var)}
.profile-row .pv{font-family:'Space Grotesk',monospace;font-size:14px;color:var(--on-bg)}
.profile-row:first-child .pv{color:var(--primary-c)}
.ai-response{flex:1;background:rgba(50,53,53,.3);border-radius:8px;padding:24px;border:1px solid rgba(60,74,65,.3);display:flex;flex-direction:column;margin-top:24px;backdrop-filter:blur(8px)}
.ai-response-title{font-family:'Space Grotesk',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--on-surface-var);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.ai-response-body{background:rgba(11,15,15,.5);box-shadow:inset 0 2px 4px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.05);border-radius:2px;padding:16px;flex:1}
.ai-response-body{overflow-y:auto;max-height:320px;scrollbar-width:thin;scrollbar-color:var(--primary-c) transparent}
.ai-response-body::-webkit-scrollbar{width:4px}
.ai-response-body::-webkit-scrollbar-thumb{background:var(--primary-c);border-radius:2px}
.ai-response-body p{font-family:'Space Grotesk',monospace;font-size:14px;color:var(--on-bg);line-height:1.6;opacity:.7}
/* Animations */
@keyframes fluid{0%{background-position:0 0}50%{background-position:100% 100%}100%{background-position:0 0}}
@keyframes rot{0%{transform:translate(-50%,-50%) rotate(0) scale(.75)}50%{transform:translate(-50%,-50%) rotate(180deg) scale(.85)}100%{transform:translate(-50%,-50%) rotate(360deg) scale(.75)}}
@keyframes pulse-ring{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.4}50%{transform:translate(-50%,-50%) scale(1.1);opacity:.8}}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spin-words{0%,15%{transform:translateY(0)}25%,40%{transform:translateY(-20%)}50%,65%{transform:translateY(-40%)}75%,90%{transform:translateY(-60%)}100%{transform:translateY(-80%)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
.cursor-blink{animation:cursor-blink 1s infinite}
/* Nav item active glow */
.nav-item.active{position:relative}
.nav-item.active::after{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:60%;background:var(--primary-c);box-shadow:0 0 8px rgba(12,196,129,.5);border-radius:1px}
/* ── Scan toggle (mobile-only, hidden by default) ── */
.scan-toggle-mobile{display:none;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;background:rgba(50,53,53,.3);border:1px solid rgba(60,74,65,.3);border-radius:6px;color:var(--on-surface-var);font-family:'Space Grotesk',monospace;font-size:12px;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:all .3s ease;margin-top:12px}
.scan-toggle-mobile:hover{background:rgba(12,196,129,.08);border-color:rgba(12,196,129,.3);color:var(--primary-c)}
.scan-toggle-mobile .toggle-chevron{transition:transform .3s ease}
.scan-toggle-mobile.expanded .toggle-chevron{transform:rotate(180deg)}
.scan-toggle-mobile.expanded{background:rgba(12,196,129,.06);border-color:rgba(12,196,129,.2);color:var(--primary-c)}

/* ── Responsive: Tablet & Mobile ── */
@media(max-width:768px){
  /* Header — compact */
  header{height:56px;padding:0 20px}
  .logo{font-size:16px;gap:10px}
  .lang-btn{padding:5px 10px;font-size:11px}

  /* Layout */
  nav.sidebar{display:none}
  main{padding:0;overscroll-behavior-y:none}
  .page{padding:68px 16px 16px;height:100dvh;overflow:hidden;scroll-snap-stop:normal;flex-direction:column;align-items:center;justify-content:flex-start}
  .page-glass{border-radius:20px;width:100%;border:none;min-height:calc(100dvh - 88px);max-height:calc(100dvh - 88px);box-shadow:0 0 48px rgba(8,146,90,.18),0 8px 32px rgba(0,0,0,.3),inset 0 1px 1px rgba(255,255,255,.15),inset 0 -1px 1px rgba(0,0,0,.3)}
  .page-glass::before,.page-glass::after{border-radius:20px}

  /* Hero — centered & readable */
  .hero-inner{padding:28px 24px 60px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;position:relative;gap:0}
  .hero-inner .scroll-arrow{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;margin:0;padding:0;z-index:2}
  .hero-icon{display:none}
  .hero-title{font-size:34px;flex-direction:column;gap:10px;word-break:keep-all;text-align:center}
  .spin-box{width:calc(100vw - 72px);max-width:calc(100vw - 72px);font-size:28px}
  .spin-inner div{justify-content:center}
  .hero-desc{font-size:17px;line-height:1.7;margin-top:28px;max-width:320px;text-align:center}
  .hero-tag{font-size:11px;letter-spacing:.12em;margin-top:24px}
  .scroll-arrow{padding:12px 0 16px}

  /* Neural — horizontal flow, no arrows */
  .phil-inner{padding:24px 24px 60px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;position:relative}
  .phil-inner .scroll-arrow{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;margin:0;padding:0;z-index:2}
  .phil-h1{font-size:26px;line-height:1.35;word-break:keep-all;-webkit-hyphens:none;hyphens:none}
  .phil-sub{font-size:16px;margin-top:16px;line-height:1.5}
  .phil-box{padding:18px;margin-top:24px}
  .phil-box p{font-size:18px}
  .phil-flow{display:flex;flex-direction:row;justify-content:space-around;align-items:flex-start;gap:8px;margin-top:28px;padding-bottom:20px;flex-wrap:nowrap}
  .phil-flow .flow-arrow{display:none}
  .flow-step .circle{width:44px;height:44px}
  .flow-step .circle .material-symbols-outlined{font-size:20px}
  .flow-step .flow-label{font-size:11px;max-width:64px;letter-spacing:.04em}

  /* Flux — fill card, compress spacing so all content fits without scroll */
  .flux-inner{padding:16px 20px 12px;flex:1;display:flex;flex-direction:column;align-items:center}
  .voice-panel{max-width:100%;gap:10px}
  .link-badge{margin-bottom:4px}
  .orb-wrap{width:148px;height:148px}
  .orb-core{width:76px;height:76px}
  .orb-core .material-symbols-outlined{font-size:34px}
  .voice-label h2{font-size:28px}
  .voice-label p{font-size:13px}
  .starter-btn{padding:11px 16px;font-size:14px}
  .starter-panel{gap:6px;margin-top:8px;padding-top:12px}
  .starter-open{font-size:12px;padding:6px 0}

  /* Void — fill card, allow internal scroll for the form */
  #void .page-glass{overflow-y:auto}
  .void-inner{flex-direction:column;height:auto;min-height:0;max-height:none;flex:1}
  .form-panel{border-right:none;padding:20px 18px}
  .form-panel h2{font-size:22px;margin-bottom:4px}
  .form-panel>p{font-size:13px;margin-bottom:14px}
  .form-grid{grid-template-columns:1fr;gap:8px}
  .form-group input,.form-group textarea{padding:10px 12px;font-size:14px;min-height:40px;border-radius:6px}
  .form-group textarea{min-height:64px}
  .form-group label{font-size:10px;margin-bottom:2px}
  .transmit-btn{padding:12px;margin-top:10px;border-radius:6px;font-size:11px}
  .scan-panel{display:none;flex-direction:column}
  .scan-panel.mobile-expanded{display:flex;border-top:1px solid rgba(60,74,65,.3);padding:16px}
  .scan-toggle-mobile{display:flex}

  /* Scroll indicators — compact touch targets */
  .scroll-indicator{right:6px;gap:8px}
  .scroll-dot{width:7px;height:7px;padding:0;position:relative}
  .scroll-dot::before{content:'';position:absolute;inset:-16px;border-radius:50%}
  .scroll-line{height:8px}
  .scroll-progress{left:0}

  /* Void states */
  .void-consent{font-size:0.7rem;gap:0.35rem;margin:0.5rem 0;line-height:1.35}
  .void-processing{gap:0.4rem}
  .void-response-text{font-size:13px;line-height:1.6}
}
/* Voice state styles */
.orb-wrap{transition:transform .3s ease}
.voice-idle .orb-core{animation:idle-pulse 3s ease-in-out infinite}
.voice-connecting .orb-ring{animation:spin 2s linear infinite}
.voice-connecting .orb-ring-2{animation:spin 1.5s linear infinite reverse}
.voice-connecting .orb-core{animation:idle-pulse 1s ease-in-out infinite;opacity:.6}
.voice-listening .orb-core{box-shadow:0 0 40px var(--primary),0 0 80px rgba(67,225,155,.3),inset 0 0 20px rgba(101,253,180,.3)}
.voice-listening .wave-bars{opacity:.8;animation:wave-pulse 1.5s ease-in-out infinite}
.voice-speaking .orb-core{box-shadow:0 0 50px var(--primary),0 0 100px rgba(67,225,155,.4),inset 0 0 30px rgba(101,253,180,.4);animation:speak-pulse 0.8s ease-in-out infinite}
.voice-speaking .wave-bars{opacity:1}
.voice-speaking .wave-bars div{animation:wave-bar 0.6s ease-in-out infinite alternate}
.voice-speaking .wave-bars div:nth-child(2){animation-delay:.1s}
.voice-speaking .wave-bars div:nth-child(3){animation-delay:.2s}
.voice-speaking .wave-bars div:nth-child(4){animation-delay:.15s}
.voice-speaking .wave-bars div:nth-child(5){animation-delay:.25s}
.voice-speaking .wave-bars div:nth-child(6){animation-delay:.05s}
.voice-error .orb-core{background:rgba(255,180,171,.2);border-color:rgba(255,180,171,.5);box-shadow:0 0 30px rgba(255,180,171,.3),inset 0 0 20px rgba(255,180,171,.2)}
.voice-error .orb-core .material-symbols-outlined{color:var(--error)}
.link-dot{transition:background .3s,box-shadow .3s}
.link-dot.active{background:var(--primary);box-shadow:0 0 8px var(--primary)}
@keyframes idle-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}
@keyframes speak-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes wave-bar{0%{transform:scaleY(.5)}100%{transform:scaleY(1.5)}}
@keyframes wave-pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* ── Void Form States ── */
.void-consent{display:flex;gap:0.5rem;align-items:flex-start;margin:1rem 0;font-size:0.8rem;color:var(--on-surface-var);line-height:1.5}
.void-consent input[type="checkbox"]{margin-top:0.2rem;accent-color:var(--primary-c);cursor:pointer;flex-shrink:0}
.void-consent a{color:var(--primary-c);text-decoration:underline}
.void-consent a:hover{color:var(--primary)}

.transmit-btn:disabled{opacity:0.35;cursor:not-allowed;box-shadow:none}
.transmit-btn:disabled:hover{box-shadow:none}

/* Placeholder text in idle state */
.void-placeholder{color:var(--on-surface-var);font-style:italic;opacity:0.5}

/* Processing state */
.void-processing{display:flex;flex-direction:column;gap:0.6rem;align-items:flex-start;padding:8px 0}
.void-pulse{width:10px;height:10px;border-radius:50%;background:var(--primary-c);animation:void-pulse-anim 1.2s ease-in-out infinite;margin-bottom:4px}
@keyframes void-pulse-anim{0%,100%{opacity:0.4;transform:scale(0.8)}50%{opacity:1;transform:scale(1.2)}}

.void-substep{opacity:0.2;font-size:0.85rem;font-family:'Space Grotesk',monospace;color:var(--on-surface-var);transition:opacity 0.5s ease,color 0.5s ease}
.void-substep.active{opacity:1;color:var(--primary-c)}

/* Success state */
.void-success-body{border-color:rgba(12,196,129,.25) !important}
.void-response-text{color:var(--on-bg) !important;line-height:1.7;white-space:pre-wrap;font-size:14px;opacity:1 !important}
.void-response-meta{margin-top:1rem;font-size:0.75rem;color:var(--on-surface-var);font-style:italic;opacity:0.6}

/* Error state */
.void-error-text{color:var(--error) !important;opacity:1 !important}

/* Populated scan fields */
.void-field-populated{color:var(--primary-c) !important;transition:color 0.4s ease}

/* ── Responsive: Small phones ── */
@media(max-width:480px){
  .scroll-indicator{display:none}
  .scroll-progress{display:none}
  header{padding:0 16px}
  .page-glass{border-radius:16px;border:none}
  .page-glass::before,.page-glass::after{border-radius:16px}
  .hero-title{font-size:20px}
  .phil-h1{font-size:18px}
  .phil-sub{font-size:13px}
  .flow-step .circle{width:36px;height:36px}
  .flow-step .circle .material-symbols-outlined{font-size:16px}
  .flow-step .flow-label{font-size:8px;max-width:48px}
  .flux-inner{padding:10px 16px 8px}
  .voice-panel{gap:8px}
  .link-badge{margin-bottom:0}
  .orb-wrap{width:120px;height:120px}
  .orb-core{width:58px;height:58px}
  .orb-core .material-symbols-outlined{font-size:28px}
  .voice-label h2{font-size:20px}
  .starter-panel{gap:4px;margin-top:4px;padding-top:6px}
  .starter-btn{padding:9px 14px;font-size:13px}
  .starter-open{padding:4px 0}
}

/* ─── Page intro (Flux/Void/Dashboard live-demo copy) ─── */
.page-intro{max-width:640px;text-align:center;margin-bottom:28px}
.intro-kicker{display:inline-block;font-family:'Space Grotesk',monospace;font-size:11px;letter-spacing:.25em;color:var(--primary-c);border:1px solid rgba(12,196,129,.3);border-radius:4px;padding:4px 10px;margin-bottom:14px}
.intro-h1{font-family:'Manrope',sans-serif;font-size:30px;font-weight:800;color:var(--on-bg);margin:0 0 12px;letter-spacing:-.02em}
.intro-desc{font-size:15px;line-height:1.65;color:var(--on-surface-var);margin:0 0 14px}
.intro-how{display:flex;align-items:flex-start;justify-content:center;gap:8px;font-size:13px;color:var(--primary);opacity:.85;margin:0}
.form-panel .intro-kicker{align-self:flex-start}
.form-panel .intro-how{justify-content:flex-start;text-align:left}

/* ─── Dashboard page ─── */
.dash-inner{display:flex;flex-direction:column;align-items:center;width:100%;padding:48px 32px 32px;min-height:calc(100vh - 250px);overflow-y:auto}
.dash-empty{max-width:520px;text-align:center;border:1px dashed rgba(12,196,129,.3);border-radius:14px;padding:32px 28px;color:var(--on-surface-var);font-size:14px;line-height:1.6}
.dash-empty-btns{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.dash-cta{display:inline-flex;align-items:center;gap:8px;background:rgba(12,196,129,.12);border:1px solid rgba(12,196,129,.4);color:var(--primary);font-family:'Space Grotesk',monospace;font-size:13px;letter-spacing:.05em;padding:10px 18px;border-radius:8px;cursor:pointer;transition:all .3s ease}
.dash-cta:hover{background:rgba(12,196,129,.22);box-shadow:0 0 16px rgba(12,196,129,.25)}
.dash-grid{display:grid;grid-template-columns:340px 1fr;gap:20px;width:100%;max-width:900px}
.dash-card,.dash-timeline-panel{background:rgba(28,32,32,.55);border:1px solid rgba(60,74,65,.4);border-radius:14px;backdrop-filter:blur(16px);overflow:hidden}
.dash-card-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(60,74,65,.35)}
.dash-card-title{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',monospace;font-size:11px;letter-spacing:.2em;color:var(--on-surface-var)}
.dash-card-title .dot{width:6px;height:6px;border-radius:50%;background:var(--primary-c);box-shadow:0 0 8px var(--primary-c);animation:pulse 2s infinite}
.dash-live{font-family:'Space Grotesk',monospace;font-size:10px;letter-spacing:.2em;color:var(--primary-c);border:1px solid rgba(12,196,129,.4);border-radius:4px;padding:2px 8px}
.dash-card-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.dash-score-badge{display:inline-block;font-family:'Space Grotesk',monospace;font-size:13px;padding:2px 10px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid rgba(60,74,65,.5)}
.dash-score-badge.high{background:rgba(12,196,129,.15);border-color:rgba(12,196,129,.5);color:var(--primary)}
.dash-timeline{padding:16px 18px;display:flex;flex-direction:column;gap:14px;max-height:420px;overflow-y:auto}
.dash-event{border-left:2px solid rgba(12,196,129,.4);padding-left:14px}
.dash-event-head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--on-bg)}
.dash-event-label{font-weight:600}
.dash-event-time{margin-left:auto;font-size:11px;color:var(--on-surface-var);opacity:.7}
.dash-event-detail{margin-top:8px;background:rgba(255,255,255,.04);border:1px solid rgba(60,74,65,.3);border-radius:8px;padding:10px 12px}
.dash-event-detail-label{display:block;font-family:'Space Grotesk',monospace;font-size:10px;letter-spacing:.2em;color:var(--primary-c);margin-bottom:6px}
.dash-event-detail p{font-size:13px;line-height:1.55;color:var(--on-surface-var);margin:0;white-space:pre-wrap}
.dash-what{margin-top:28px;max-width:640px;text-align:center}
.dash-what-title{font-size:14px;font-weight:600;color:var(--on-bg);margin:0 0 10px}
.dash-what ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.dash-what li{font-size:13px;color:var(--on-surface-var)}
.dash-what li::before{content:'—';color:var(--primary-c);margin-right:8px}
@media (max-width:820px){
  .dash-grid{grid-template-columns:1fr}
  .dash-inner{padding:24px 18px}
  .intro-h1{font-size:24px}
}

/* ─── Dashboard v2: tabs, panels, KPI, agents, ROI, CTA ─── */
.dash-inner{padding:32px 36px 24px;min-height:0;max-height:calc(100vh - 140px);overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%}
.dash-head{text-align:center;margin-bottom:16px}
.dash-h1{font-size:26px;margin-bottom:8px}
.dash-desc{font-size:14px;margin:0;max-width:560px;margin-left:auto;margin-right:auto}
.dash-tabs{display:flex;gap:6px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
.dash-tab{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid rgba(60,74,65,.5);color:var(--on-surface-var);font-family:'Space Grotesk',monospace;font-size:12px;letter-spacing:.06em;padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .25s ease}
.dash-tab:hover{border-color:rgba(12,196,129,.4);color:var(--on-bg)}
.dash-tab.active{background:rgba(12,196,129,.14);border-color:var(--primary-c);color:var(--primary);box-shadow:0 0 14px rgba(12,196,129,.15)}
.dash-panels{flex:1;min-height:0;position:relative}
.dash-panel{display:none;height:100%;overflow-y:auto;scrollbar-width:thin;animation:contentReveal .45s cubic-bezier(.16,1,.3,1)}
.dash-panel.active{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px}
.dash-panel .dash-grid{max-width:100%}
.dash-note{font-size:13px;color:var(--on-surface-var);text-align:center;max-width:560px;margin:4px auto 0;line-height:1.6}
/* KPI grid */
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:820px}
.dash-kpi{background:rgba(28,32,32,.55);border:1px solid rgba(60,74,65,.4);border-radius:12px;padding:18px 14px;text-align:center;display:flex;flex-direction:column;gap:6px}
.dash-kpi-v{font-family:'Manrope',sans-serif;font-size:26px;font-weight:800;color:var(--primary);text-shadow:0 0 20px rgba(12,196,129,.35)}
.dash-kpi-l{font-size:12px;color:var(--on-surface-var);line-height:1.4}
/* Agent cards */
.dash-agents{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:820px}
.dash-agent{background:rgba(28,32,32,.55);border:1px solid rgba(60,74,65,.4);border-radius:12px;padding:14px 16px}
.dash-agent-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dash-agent-head .material-symbols-outlined{font-size:18px;color:var(--primary-c)}
.dash-agent-head strong{font-size:14px;color:var(--on-bg)}
.dash-badge{margin-left:auto;font-family:'Space Grotesk',monospace;font-size:9px;letter-spacing:.15em;padding:3px 8px;border-radius:4px;border:1px solid rgba(60,74,65,.6);color:var(--on-surface-var);white-space:nowrap}
.dash-badge.live{border-color:rgba(12,196,129,.5);color:var(--primary-c);background:rgba(12,196,129,.08)}
.dash-agent p{font-size:13px;color:var(--on-surface-var);margin:0;line-height:1.5}
/* ROI */
.dash-roi{width:100%;max-width:720px;display:flex;flex-direction:column;gap:16px}
.dash-roi-controls{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dash-roi-label{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;font-size:13px;color:var(--on-surface-var)}
.dash-roi-val{font-family:'Space Grotesk',monospace;color:var(--primary);font-size:13px}
.dash-roi-label input[type=range]{width:100%;accent-color:var(--primary-c);cursor:pointer}
.dash-roi-results{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.dash-roi-big,.dash-roi-small{background:rgba(28,32,32,.55);border:1px solid rgba(12,196,129,.35);border-radius:12px;padding:18px;text-align:center}
.dash-roi-num{display:block;font-family:'Manrope',sans-serif;font-size:34px;font-weight:800;color:var(--primary);text-shadow:0 0 24px rgba(12,196,129,.4)}
.dash-roi-num-sm{display:block;font-family:'Manrope',sans-serif;font-size:24px;font-weight:800;color:var(--on-bg)}
.dash-roi-cap{display:block;font-size:12px;color:var(--on-surface-var);margin-top:4px}
/* CTA row */
.dash-ctas{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid rgba(60,74,65,.35)}
.dash-book{display:inline-flex;align-items:center;gap:8px;background:var(--primary-c);color:#04110b;font-family:'Space Grotesk',monospace;font-size:13px;font-weight:700;letter-spacing:.04em;padding:11px 20px;border-radius:8px;text-decoration:none;transition:all .25s ease;box-shadow:0 0 20px rgba(12,196,129,.35)}
.dash-book:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(12,196,129,.55)}
.dash-talk{border:none;background:transparent;color:var(--primary);font-size:13px;cursor:pointer;padding:8px 4px}
.dash-talk:hover{text-decoration:underline}
.dash-cta-note{font-size:11px;color:var(--on-surface-var);opacity:.7;width:100%;text-align:center}
@media (max-width:820px){
  .dash-inner{max-height:none;overflow:visible;padding:20px 16px}
  .dash-kpis{grid-template-columns:1fr 1fr}
  .dash-agents,.dash-roi-controls,.dash-roi-results{grid-template-columns:1fr}
  .dash-panel{overflow:visible}
  .dash-h1{font-size:22px}
}

/* ─── Alex intro video ─── */
.intro-video-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(12,196,129,.12);border:1px solid rgba(12,196,129,.45);color:var(--primary);font-family:'Space Grotesk',monospace;font-size:13px;letter-spacing:.05em;padding:9px 18px;border-radius:8px;cursor:pointer;transition:all .25s ease;margin:2px 0 14px}
.intro-video-btn:hover{background:rgba(12,196,129,.22);box-shadow:0 0 18px rgba(12,196,129,.3)}
.video-overlay{position:fixed;inset:0;z-index:200;background:rgba(4,5,5,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px}
.video-overlay[hidden]{display:none}
.video-box{position:relative;max-width:min(880px,92vw);max-height:88vh;display:flex}
.video-box video{max-width:100%;max-height:88vh;border-radius:16px;border:1px solid rgba(12,196,129,.35);box-shadow:0 0 60px rgba(12,196,129,.2),0 24px 80px rgba(0,0,0,.6);background:#000}
.video-close{position:absolute;top:-14px;right:-14px;z-index:1;width:34px;height:34px;border-radius:50%;border:1px solid rgba(12,196,129,.5);background:rgba(16,20,20,.95);color:var(--primary);font-size:15px;cursor:pointer;transition:all .25s ease}
.video-close:hover{background:rgba(12,196,129,.2)}

/* ─── Flux intro: text + Alex avatar card ─── */
.flux-intro-grid{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;max-width:820px;text-align:left;margin-bottom:20px}
.flux-intro-text .intro-kicker{margin-bottom:12px}
.flux-intro-text .intro-how{justify-content:flex-start;text-align:left}
.alex-avatar-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;background:transparent;border:none;cursor:pointer;padding:10px}
.alex-avatar-card img{width:190px;height:190px;object-fit:cover;border-radius:50%;border:2px solid rgba(12,196,129,.55);box-shadow:0 0 30px rgba(12,196,129,.35),0 0 80px rgba(12,196,129,.12);transition:transform .3s ease,box-shadow .3s ease;display:block}
.alex-avatar-ring{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:190px;height:190px;border-radius:50%;border:1px solid rgba(12,196,129,.4);animation:avatarPulse 2.6s ease-out infinite;pointer-events:none}
@keyframes avatarPulse{0%{transform:translateX(-50%) scale(1);opacity:.7}100%{transform:translateX(-50%) scale(1.28);opacity:0}}
.alex-avatar-play{position:absolute;top:145px;left:calc(50% + 48px);width:44px;height:44px;border-radius:50%;background:var(--primary-c);color:#04110b;display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px rgba(12,196,129,.6);border:2px solid rgba(4,17,11,.6);transition:transform .25s ease}
.alex-avatar-play .material-symbols-outlined{font-size:26px}
.alex-avatar-card:hover img{transform:scale(1.04);box-shadow:0 0 40px rgba(12,196,129,.55),0 0 110px rgba(12,196,129,.2)}
.alex-avatar-card:hover .alex-avatar-play{transform:scale(1.12)}
.alex-avatar-caption{font-family:'Space Grotesk',monospace;font-size:12px;letter-spacing:.08em;color:var(--primary);opacity:.9;white-space:nowrap}
@media (max-width:820px){
  .flux-intro-grid{grid-template-columns:1fr;text-align:center;gap:8px}
  .flux-intro-text .intro-how{justify-content:center;text-align:center}
  .alex-avatar-card{margin:0 auto}
  .alex-avatar-card img,.alex-avatar-ring{width:150px;height:150px}
  .alex-avatar-play{top:112px;left:calc(50% + 36px);width:38px;height:38px}
}

/* ─── Flux: kompakt enskärmslayout ─── */
.flux-inner{padding:20px 32px 12px;min-height:0}
.flux-intro-grid{gap:32px;margin-bottom:8px;max-width:860px}
.flux-intro-grid .intro-h1{font-size:24px;margin-bottom:8px}
.flux-intro-grid .intro-desc{font-size:13.5px;line-height:1.55;margin-bottom:10px}
.flux-intro-grid .intro-kicker{margin-bottom:10px}
.flux-intro-grid .intro-how{font-size:12.5px}
.alex-avatar-card img{width:232px;height:232px}
.alex-avatar-ring{width:232px;height:232px}
.alex-avatar-play{top:178px;left:calc(50% + 60px);width:48px;height:48px}
.voice-panel{gap:10px;max-width:560px}
.link-badge{margin-bottom:0}
.orb-wrap{width:148px;height:148px}
.orb-core{width:78px;height:78px}
.orb-core .material-symbols-outlined{font-size:34px}
.voice-label h2{font-size:24px}
.voice-label p{font-size:12px;margin-top:2px}
.starter-panel{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:560px;margin-top:6px;padding-top:14px}
.starter-btn{padding:10px 14px;font-size:12.5px}
.starter-open{grid-column:1 / -1;padding:4px 0}
@media (max-width:820px){
  .alex-avatar-card img,.alex-avatar-ring{width:160px;height:160px}
  .alex-avatar-play{top:120px;left:calc(50% + 40px);width:40px;height:40px}
  .starter-panel{grid-template-columns:1fr}
  .starter-open{grid-column:1}
}

/* ─── Alex inline media card (ersätter runda avataren + popup) ─── */
.flux-intro-grid{grid-template-columns:1fr 400px;align-items:center}
.alex-media-card{display:flex;flex-direction:column;gap:10px;width:400px}
.alex-media-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid rgba(12,196,129,.45);box-shadow:0 0 30px rgba(12,196,129,.25),0 12px 40px rgba(0,0,0,.4);cursor:pointer;background:#04110b;transition:box-shadow .3s ease,transform .3s ease}
.alex-media-frame video{width:100%;height:100%;object-fit:cover;display:block;background:#04110b}
.alex-media-card.playing .alex-media-frame video{object-fit:contain}
.alex-media-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(12,196,129,.9);color:#04110b;border:2px solid rgba(4,17,11,.4);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 30px rgba(12,196,129,.6);transition:transform .25s ease,box-shadow .25s ease}
.alex-media-play .material-symbols-outlined{font-size:34px}
.alex-media-card:hover .alex-media-frame{box-shadow:0 0 45px rgba(12,196,129,.45),0 12px 50px rgba(0,0,0,.5)}
.alex-media-card:hover .alex-media-play{transform:translate(-50%,-50%) scale(1.1)}
.alex-media-card.playing .alex-media-play{display:none}
.alex-media-card.playing .alex-media-frame{cursor:default}
.alex-media-caption{font-family:'Space Grotesk',monospace;font-size:12px;letter-spacing:.08em;color:var(--primary);opacity:.9;text-align:center}
@media (max-width:820px){
  .flux-intro-grid{grid-template-columns:1fr}
  .alex-media-card{width:100%;max-width:420px;margin:0 auto}
}

/* ─── Flux v3: tvåkolumn + ramlöst svävande Alex-ansikte ─── */
.flux-columns{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:center;width:100%;max-width:960px}
.flux-left{display:flex;flex-direction:column;align-items:center;min-width:0}
.flux-intro-left{text-align:left;max-width:540px;margin-bottom:12px}
.flux-intro-left .intro-kicker{margin-bottom:10px}
.flux-intro-left .intro-h1{font-size:23px;margin-bottom:8px}
.flux-intro-left .intro-desc{font-size:13.5px;line-height:1.55;margin-bottom:10px}
.flux-intro-left .intro-how{justify-content:flex-start;text-align:left;font-size:12.5px}
.flux-right{display:flex;justify-content:center}
.alex-face{position:relative;width:330px;aspect-ratio:9/16;cursor:pointer;background:transparent;border:none;padding:0}
.alex-face video{width:100%;height:100%;object-fit:cover;display:block;transform:translateZ(0);
  -webkit-mask-image:radial-gradient(ellipse 52% 48% at 50% 44%,#000 55%,transparent 82%);
  mask-image:radial-gradient(ellipse 52% 48% at 50% 44%,#000 55%,transparent 82%)}
.alex-face-play{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(12,196,129,.18);border:1px solid rgba(12,196,129,.55);color:var(--primary);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);box-shadow:0 0 24px rgba(12,196,129,.35);transition:transform .25s ease,background .25s ease;pointer-events:none}
.alex-face-play .material-symbols-outlined{font-size:30px}
.alex-face:hover .alex-face-play{transform:translate(-50%,-50%) scale(1.12);background:rgba(12,196,129,.32)}
.alex-face.playing .alex-face-play{display:none}
.alex-face-caption{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);font-family:'Space Grotesk',monospace;font-size:11.5px;letter-spacing:.08em;color:var(--primary);opacity:.85;white-space:nowrap;transition:opacity .3s ease;pointer-events:none}
.alex-face.playing .alex-face-caption{opacity:0}
@media (max-width:820px){
  .flux-columns{grid-template-columns:1fr;gap:4px}
  .flux-intro-left{text-align:center;margin:0 auto 8px}
  .flux-intro-left .intro-how{justify-content:center;text-align:center}
  .alex-face{width:240px}
  .flux-right{order:-1}
}

/* ─── Alex-face v2: tydligare play + liten variant för formulärsidan ─── */
.alex-face-play{width:66px;height:66px;background:rgba(12,196,129,.92);border:2px solid rgba(255,255,255,.25);color:#04110b;box-shadow:0 0 34px rgba(12,196,129,.75),0 4px 16px rgba(0,0,0,.4);backdrop-filter:none;animation:playPulse 2.4s ease-in-out infinite}
.alex-face-play .material-symbols-outlined{font-size:34px}
@keyframes playPulse{0%,100%{box-shadow:0 0 34px rgba(12,196,129,.75),0 4px 16px rgba(0,0,0,.4)}50%{box-shadow:0 0 52px rgba(12,196,129,1),0 4px 16px rgba(0,0,0,.4)}}
.alex-face:hover .alex-face-play{transform:translate(-50%,-50%) scale(1.14);background:var(--primary)}
/* Liten variant i scan-panelen (Void) */
.alex-face--sm{width:200px;margin:0 auto 4px;flex-shrink:0}
.alex-face--sm .alex-face-play{width:52px;height:52px}
.alex-face--sm .alex-face-play .material-symbols-outlined{font-size:26px}
.alex-face--sm .alex-face-caption{font-size:10.5px;bottom:4%}
@media (max-width:820px){
  .alex-face--sm{width:170px}
}

/* ─── Större ansikten ─── */
.alex-face--sm{width:290px}
.alex-face--sm .alex-face-play{width:60px;height:60px}
.alex-face--sm .alex-face-play .material-symbols-outlined{font-size:30px}
.flux-columns{grid-template-columns:1fr 360px}
.alex-face{width:360px}
.alex-face--sm{width:290px}
@media (max-width:820px){
  .alex-face{width:260px}
  .alex-face--sm{width:220px}
}

/* ─── Släck den dyra bluren medan video spelar (shadern är pausad ändå) ─── */
.page-glass.video-active{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(135deg,rgba(10,16,13,.92),rgba(6,10,8,.9))}
.alex-face{contain:layout paint}

/* ─── Alex-face v3: större + balanserad play-placering ─── */
.flux-columns{grid-template-columns:1fr 410px}
.alex-face{width:410px}
.alex-face--sm{width:330px}
.alex-face-play{top:50%;width:74px;height:74px}
.alex-face-play .material-symbols-outlined{font-size:38px}
.alex-face--sm .alex-face-play{width:62px;height:62px}
.alex-face--sm .alex-face-play .material-symbols-outlined{font-size:32px}
@media (max-height:860px) and (min-width:821px){
  .flux-columns{grid-template-columns:1fr 340px}
  .alex-face{width:340px}
  .alex-face--sm{width:280px}
}
@media (max-width:820px){
  .alex-face{width:280px}
  .alex-face--sm{width:230px}
}

/* ─── Play-knappen under ansiktet, i den nedtonade zonen ─── */
.alex-face-play{top:auto;bottom:9%;transform:translate(-50%,0)}
.alex-face:hover .alex-face-play{transform:translate(-50%,0) scale(1.12)}

/* ─── Play-knappen snett till vänster under ansiktet ─── */
.alex-face-play{left:30%}


/* ─── Mobilfixar 2026-09-01: sista ordet i kaskaden ───
   Flux: enkolumn på mobil — sena lager ("Större ansikten", max-height:860)
   satte tvåkolumn som svämmade över 375px-skärmar.
   Void: pilen låg över samtyckestexten; tunn scrollbar visar att kortet scrollar. */
@media (max-width:820px){
  .flux-columns{grid-template-columns:1fr;gap:4px}
  .flux-right{order:-1}
  .alex-face{width:240px}
  #void .scroll-arrow{display:none}
  #void .page-glass{scrollbar-width:thin;scrollbar-color:rgba(12,196,129,.45) transparent}
}

/* ══════════════════════════════════════════════════════════════════
   Femsidor + Cross Swap Navigation + rundtur (2026-09-01)
   Porterad från SCC:s FocusNavigator: fem alltid-monterade paneler,
   mitten synlig, grannarna parkerade utanför skärmen. En navigation =
   swap; båda panelerna glider. Ligger sist i kaskaden med avsikt.
   ══════════════════════════════════════════════════════════════════ */

/* Gammal navigering bort */
.sidebar,.scroll-indicator,.scroll-progress,.scroll-arrow,.site-nav{display:none!important}

/* Viewport + paneler */
main{position:relative;height:100dvh;overflow:clip;scroll-snap-type:none;scroll-behavior:auto}
.page{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;min-height:0;height:auto;overflow-y:auto;overflow-x:hidden;padding:96px 32px 32px;will-change:transform;scroll-snap-align:none;scroll-snap-stop:normal;scrollbar-width:thin;scrollbar-color:rgba(67,225,155,.35) transparent;visibility:hidden;pointer-events:none;transition:transform .55s cubic-bezier(.22,.9,.28,1),visibility 0s linear .55s}
.page.active{visibility:visible;pointer-events:auto;z-index:2;transition:transform .55s cubic-bezier(.22,.9,.28,1),visibility 0s linear 0s}
/* Första sidan syns INNAN app.js kört. Alla .page är dolda tills motorn sätter
   .active, och motorn ligger sist i sidfoten — så första målningen väntade på
   varenda skript, på mobil 8,4 s till första pixel. app.js sätter html.is-scroll
   när den tar över; tills dess visar CSS:en hero-sidan själv. */
html:not(.is-scroll) #core.page{visibility:visible;pointer-events:auto}
.page-glass{opacity:1!important;transform:none!important}

/* ── Kantpilar med grannens namn (desktop — mobilen har korset) ── */
.fnav-edge{position:fixed;z-index:60;display:flex;align-items:center;gap:4px;padding:6px 11px;border-radius:10px;border:1px solid rgba(67,225,155,.18);background:rgba(6,20,14,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:rgba(67,225,155,.6);font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;cursor:pointer;opacity:.5;transition:opacity .15s ease,color .15s ease,border-color .15s ease}
.fnav-edge:hover{opacity:1;color:var(--primary);border-color:rgba(67,225,155,.45)}
.fnav-edge--up{top:64px;left:50%;transform:translateX(-50%)}
.fnav-edge--down{bottom:10px;left:50%;transform:translateX(-50%)}
.fnav-edge--left{left:10px;top:50%;transform:translateY(-50%)}
.fnav-edge--right{right:10px;top:50%;transform:translateY(-50%);flex-direction:row-reverse}

/* ── Navigationskorset ── */
.fnav-minimap{position:fixed;z-index:70;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,auto);gap:3px;padding:8px;border-radius:14px;border:1px solid rgba(67,225,155,.15);background:rgba(4,14,10,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:.65;transition:opacity .15s ease}
.fnav-minimap:hover{opacity:1}
.fnav-mini{min-width:64px;padding:5px 8px;border-radius:8px;border:1px solid rgba(67,225,155,.14);background:rgba(67,225,155,.05);color:rgba(67,225,155,.65);font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:background .12s ease,color .12s ease;white-space:nowrap}
.fnav-mini:hover{background:rgba(67,225,155,.16);color:#eafff5}
.fnav-mini--center{background:rgba(67,225,155,.22);border-color:rgba(67,225,155,.5);color:#eafff5;cursor:default}
.fnav-alex{min-width:0;padding:4px 8px;border-radius:8px;border:1px solid rgba(67,225,155,.45);background:linear-gradient(135deg,rgba(67,225,155,.3),rgba(12,196,129,.2));color:#eafff5;font-size:13px;line-height:1;cursor:pointer;transition:filter .12s ease}
.fnav-alex:hover{filter:brightness(1.25)}
.fnav-drag{min-width:0;padding:4px 7px;border-radius:8px;border:1px solid rgba(67,225,155,.14);background:rgba(67,225,155,.05);color:rgba(67,225,155,.5);font-size:11px;cursor:grab;touch-action:none}
.fnav-drag:active{cursor:grabbing}
.fnav-collapse{min-width:0;padding:4px 7px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:rgba(255,255,255,.4);font-size:13px;line-height:1;cursor:pointer}
.fnav-collapse:hover{color:#fff}
.fnav-collapsed-btn{position:fixed;z-index:70;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:42px;height:42px;border-radius:12px;border:1px solid rgba(67,225,155,.3);background:rgba(4,14,10,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:var(--primary);font-size:16px;cursor:pointer}

/* Kundvägskorten på Hem */

/* Tjänstekorten */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:780px;margin:28px auto;text-align:left}
.svc-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:rgba(255,255,255,.03);border:1px solid var(--outline-var);border-radius:14px}
.svc-card .material-symbols-outlined{font-size:24px;color:var(--primary)}
.svc-card strong{font-family:'Manrope',sans-serif;font-size:15.5px;font-weight:800}
.svc-card p{margin:0;font-size:13px;line-height:1.5;color:var(--on-surface-var)}

/* Bokningsblock på Kontakt */
.kontakt-book{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 18px}

/* Rundturen */

/* Mobil: navbar i botten som app-tabbar, kompaktare kort */
@media (max-width:820px){
  .fnav-edge{display:none!important}
  .fnav-minimap{left:8px;bottom:calc(8px + env(safe-area-inset-bottom));opacity:.94}
  .fnav-mini{min-width:46px;font-size:9px;padding:5px 7px}
  .fnav-drag,.fnav-collapse{padding:5px}
  .page{padding:72px 14px calc(96px + env(safe-area-inset-bottom))}
  .page.active{align-items:flex-start}
  .svc-grid{grid-template-columns:1fr;gap:10px;margin:18px auto}
  .svc-card{padding:14px 16px}
  #void .page-glass{overflow-y:visible}
}

/* ─── Finputs 2026-09-01 kväll ─── */

/* 1. Kantpilarna pulserar grönt och bjuder in till klick */
@keyframes edgePulse{0%,100%{box-shadow:0 0 0 0 rgba(67,225,155,0);border-color:rgba(67,225,155,.2);color:rgba(67,225,155,.65)}50%{box-shadow:0 0 16px 2px rgba(67,225,155,.38);border-color:rgba(67,225,155,.6);color:var(--primary)}}
.fnav-edge{opacity:.85;animation:edgePulse 2.8s ease-in-out infinite}
.fnav-edge--right{animation-delay:.7s}
.fnav-edge--down{animation-delay:1.4s}
.fnav-edge--left{animation-delay:2.1s}
.fnav-edge:hover{animation:none;opacity:1;box-shadow:0 0 16px 2px rgba(67,225,155,.38)}
@media (prefers-reduced-motion:reduce){.fnav-edge{animation:none}}

/* 2. Kontakt: kortet växer med innehållet i stället för att klippa det;
      sidan scrollar och safe center hindrar toppklipp vid högt innehåll */
.page{align-items:safe center;justify-content:safe center}
#void .void-inner{max-height:none}

/* Kontakt → Systemet-genväg under AI-svaret */
.kontakt-to-system{margin-top:14px;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;border:1px solid rgba(67,225,155,.35);background:rgba(67,225,155,.08);color:var(--primary);font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s ease}
.kontakt-to-system:hover{background:rgba(67,225,155,.18)}

/* ─── Kontakt komprimerad: allt i EN vy, ingen inre scroll (2026-09-01) ───
   Värdena är uppmätta live mot deploy-preview vid 1440x900: glass 702px < vy. */
#void .form-panel{padding:20px 32px 16px}
#void .form-panel h2{font-size:23px;margin-bottom:4px}
#void .form-panel>p{font-size:12.5px;line-height:1.5;margin-bottom:8px}
#void .intro-how{margin-bottom:10px!important;font-size:12.5px}
#void .kontakt-book{margin:6px 0 10px}
#void .form-group input{min-height:36px;padding:8px 12px;font-size:13.5px}
#void .form-group textarea{min-height:54px;padding:8px 12px}
#void .form-grid{gap:7px}
#void .form-group label{font-size:10px;margin-bottom:2px}
#void .void-consent{margin:8px 0;font-size:11.5px}
#void .transmit-btn{padding:10px 18px}
#void .scan-panel{padding:20px 28px;gap:10px}
#void .alex-face--sm{width:220px}
#void .ai-response{min-height:110px}
#void .kontakt-to-system{margin-top:10px;padding:8px 12px;font-size:12px}

/* Playknappen centrerad under ansiktet (sent lager hade satt den på left:30%) */
.alex-face-play{left:50%;transform:translate(-50%,0)}
.alex-face:hover .alex-face-play{transform:translate(-50%,0) scale(1.12)}

/* ─── Playknappen: glas i hologrammet (2026-09-01) ───
   Ersätter den solida gröna pucken: halvtransparent, backdrop-blur, tunn
   grön ram och mjukt pulserande glöd. Lägre (bottom 3%) och lätt högerjusterad
   (left 52%) så den centrerar under ansiktet i videon. Prototypad live. */
.alex-face-play{left:52%;top:auto;bottom:3%;transform:translate(-50%,0);width:54px;height:54px;background:rgba(12,196,129,.14);border:1px solid rgba(67,225,155,.5);color:var(--primary);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 22px rgba(12,196,129,.35),inset 0 0 12px rgba(12,196,129,.15);animation:playGlow 2.6s ease-in-out infinite}
@keyframes playGlow{0%,100%{box-shadow:0 0 16px rgba(12,196,129,.25),inset 0 0 10px rgba(12,196,129,.12)}50%{box-shadow:0 0 30px rgba(12,196,129,.55),inset 0 0 16px rgba(12,196,129,.25)}}
.alex-face:hover .alex-face-play{transform:translate(-50%,0) scale(1.1);background:rgba(12,196,129,.28)}
.alex-face-play .material-symbols-outlined{font-size:27px}
@media (prefers-reduced-motion:reduce){.alex-face-play{animation:none}}

/* Kontaktsidans mindre avatar: knappen skalas ned till samma andel av
   ansiktets bredd som demosidan (~18%). Ett äldre lager satte den till 62px
   med högre specificitet — därför blev den STÖRRE på den mindre avataren. */
.alex-face--sm .alex-face-play{width:40px;height:40px;bottom:4%}
.alex-face--sm .alex-face-play .material-symbols-outlined{font-size:20px}

/* Kantpilarna indragna från ytterkanten — 34px runt om ger balans mot
   sidramen i stället för att nudda den (prototypat live). */
.fnav-edge--left{left:34px}
.fnav-edge--right{right:34px}
.fnav-edge--up{top:78px}
.fnav-edge--down{bottom:26px}

/* Skyland-märket i headern — samma logotyp och behandling som Command Center
   (beskuren till symbolen, screen-blend mot den mörka bakgrunden). */
.logo-mark{height:32px;width:32px;object-fit:cover;object-position:50% 30%;mix-blend-mode:screen;filter:drop-shadow(0 0 8px rgba(16,185,129,.5)) brightness(1.2)}
@media (max-width:820px){.logo-mark{height:26px;width:26px}}

/* ─── Hero-orden får plats i sin helhet (2026-09-01) ───
   Boxen var 500px men "Marknadsföringsbyrå" mäter 546px vid 48px — svenskan
   klipptes. 570px rymmer alla ord på båda språken; på mobil skalar fonten med
   skärmbredden så även 320px-telefoner visar hela ordet. Uppmätt live. */
.spin-box{width:570px;max-width:min(570px,86vw)}
@media(max-width:820px){
  .spin-box{width:calc(100vw - 40px);max-width:calc(100vw - 40px);font-size:min(26px,6.8vw)}
}

/* De roterande orden centreras i boxen — längdskillnaden mellan "Webbyrå"
   och "Marknadsföringsbyrå" gjorde vänsterställningen ojämn. */
.spin-inner div{justify-content:center}

/* Rubriken på EN rad även med det längsta ordet. Skalad till 42px så
   "Vi är inte en:" + "Marknadsföringsbyrå" ryms i hero-ytan (uppmätt: 478px
   ord i en 505px-box, 27px marginal). Scopad till desktop så mobilens
   viewport-skalning ovan inte överskuggas. */
@media (min-width:821px){
  .hero-title{font-size:42px;gap:18px}
  .spin-box{width:505px;max-width:min(505px,86vw)}
}

/* OBS: här stängdes backdrop-filter av under swappen. Det gav bara ~4 fps
   men syntes som ett ryck i första bildrutan — glaset bytte utseende i exakt
   det ögonblick rörelsen startade. Borttaget; shader-pausen i app.js står för
   nästan hela vinsten (+15 fps) utan att synas. Återinför inte. */

/* Glidningen fick mer tid — .55s läste som ett hopp snarare än en rörelse.
   .82s med mjukare utgång gör att glasskivan syns färdas åt sitt håll. */
.page{transition:transform .82s cubic-bezier(.3,.85,.35,1),visibility 0s linear .82s}
.page.active{transition:transform .82s cubic-bezier(.3,.85,.35,1),visibility 0s linear 0s}

/* Kontaktsidans avatar större (220 -> 275px). 9:16-formatet gör att bredden
   slår igenom med nästan dubbel höjd, så panelen strammades åt i motsvarande
   grad — kortet ryms fortfarande i en vy utan intern scroll (uppmätt).
   Knappen följer proportionerligt: 50px ~ 18% av bredden, samma andel som
   demosidan. */
.alex-face--sm{width:275px}
.alex-face--sm .alex-face-play{width:50px;height:50px}
.alex-face--sm .alex-face-play .material-symbols-outlined{font-size:25px}
#void .scan-panel{padding:14px 26px;gap:8px}
#void .ai-response{min-height:92px}
#void .kontakt-to-system{margin-top:8px}

/* hidden-attributet måste slå display:grid — utan detta gick korset inte att
   fälla ihop: [hidden] ger display:none från UA-stylesheet, men den egna
   display-regeln vinner på specificitet. Gäller även den kollapsade knappen. */
.fnav-minimap[hidden],.fnav-collapsed-btn[hidden]{display:none!important}

/* ══════════════════════════════════════════════════════════════════
   MOBIL (2026-09-01) — läsbart först, en vy där innehållet räcker till
   Två geometriska fel låg i botten och är rättade: page-glass låstes till
   100dvh-88px fast .page bara hade 644px ledigt efter sin padding, och
   navigationskorset (97px) överlappade glasets nederkant med 29px.
   Ett tredje fel gav avklippta avatarer: innehållet centrerades vertikalt
   även när det var högre än ytan, så toppen hamnade utanför overflow:hidden
   — därför flex-start överallt här.
   Hem, Tjänster och Systemet ryms i en vy. Demo och Kontakt bär mer innehåll
   (avatar + orb + fyra frågor resp. avatar + helt formulär) och scrollar
   inuti glaset i stället för att pressas ihop till oläslighet.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  /* Geometri */
  .page{padding:60px 12px calc(91px + env(safe-area-inset-bottom))}
  .page.active{align-items:flex-start}
  .page-glass{min-height:0;max-height:100%;height:100%;overflow-y:auto;justify-content:flex-start}
  .flux-inner,.phil-inner,.hero-inner,.void-inner,.dash-inner{justify-content:flex-start;min-height:0;max-height:none}
  .flux-columns{align-items:start}
  .fnav-minimap{padding:5px;gap:2px;left:6px;bottom:calc(6px + env(safe-area-inset-bottom))}
  .fnav-mini{min-width:42px;font-size:8.5px;padding:4px 5px}
  .fnav-drag,.fnav-collapse,.fnav-alex{padding:3px 5px;font-size:10px}

  /* Hem */
  .hero-inner{padding:22px 18px}
  .hero-title{font-size:28px;gap:6px}
  .spin-box{font-size:min(24px,6.4vw)}
  .hero-desc{font-size:14.5px;line-height:1.5;margin:16px auto 0}
  .hero-tag{font-size:9px;margin-top:10px}

  /* Tjänster */
  .phil-inner{padding:22px 16px}
  .phil-h1{font-size:22px;margin-bottom:6px}
  .phil-sub{font-size:13.5px;margin:8px auto 0}
  .svc-grid{gap:7px;margin:12px auto}
  .svc-card{padding:12px 14px;gap:3px}
  .svc-card strong{font-size:14.5px}
  .svc-card p{font-size:12px;line-height:1.45}
  .svc-card .material-symbols-outlined{font-size:19px}

  /* Demo */
  .flux-inner{padding:14px 14px 10px}
  .flux-intro-left .intro-kicker{font-size:9px;margin-bottom:4px}
  .flux-intro-left .intro-h1{font-size:19px;margin-bottom:6px}
  .flux-intro-left .intro-desc{font-size:12px;line-height:1.45;margin-bottom:6px}
  .flux-intro-left .intro-how{font-size:11.5px}
  .alex-face{width:132px}
  .orb-wrap{transform:scale(.66);margin:-22px 0}
  .link-badge{font-size:9px}
  .voice-label h2{font-size:18px}
  .voice-label p{font-size:9.5px}
  .starter-panel{gap:5px}
  .starter-btn{padding:7px 10px;font-size:11.5px}

  /* Kontakt — avataren var display:none på mobil och syntes aldrig.
     Nu visas den överst; profilspegel och AI-svar hör hemma på Systemet. */
  #void .void-inner{flex-direction:column}
  #void .scan-panel{display:flex;order:-1;padding:8px 14px 0;background:transparent;flex:0 0 auto}
  #void .scan-panel .scan-header,#void .scan-panel .profile-card,
  #void .scan-panel .ai-response,#void .kontakt-to-system{display:none}
  #void .alex-face--sm{width:112px;margin:0 auto}
  #void .alex-face--sm .alex-face-play{width:24px;height:24px}
  #void .alex-face--sm .alex-face-play .material-symbols-outlined{font-size:13px}
  .form-panel{padding:6px 14px 8px}
  .form-panel h2{font-size:18px;margin-bottom:3px}
  .form-panel>p{font-size:11.5px;line-height:1.45;margin-bottom:5px}
  #void .intro-how{font-size:10.5px;margin-bottom:6px}
  #void .kontakt-book{margin:4px 0 7px}
  .dash-book{padding:8px 13px;font-size:12px}
  #void .form-grid{gap:5px}
  #void .form-group label{font-size:8.5px;margin-bottom:1px}
  #void .form-group input{min-height:32px;padding:5px 9px;font-size:13px}
  #void .form-group textarea{min-height:34px;padding:5px 9px}
  #void .void-consent{margin:5px 0;font-size:9.5px;line-height:1.35}
  #void .transmit-btn{padding:7px 13px;font-size:11px}
  #void .scan-toggle-mobile{padding:6px 10px;font-size:10.5px}
}

/* ══════════════════════════════════════════════════════════════════
   MOBIL, runda 2 (2025-09-01 em) — alla fem sidor i EN vy
   Strukturella grepp i stället för mer krympning:
   · Demo: avataren flyttas BREDVID rubriken (grid 104px + 1fr) i stället
     för ovanför — frigör hela dess höjd och gör att alla fyra förvalen
     får plats. Det var förvalsknapparna som åt mest utrymme.
   · Systemet: .dash-panels låg låst på flex:1 (166px) medan innehållet
     var 241px och spillde ut ÖVER CTA-raden — bokningsknappen hamnade
     ovanpå "Fyll i formuläret". Nu tar panelen plats efter innehåll.
   · Kontakt: formulärfälten i två kolumner (namn/mejl, företag/telefon),
     säljtexten klippt till två rader, AI-analysfliken och kickern dolda
     — fliken öppnar en panel vars innehåll ändå är dolt på mobil, och
     kickern upprepar rubriken. min-width:0 krävs på panel/grid/fält,
     annars kan kolumnerna inte krympa och panelen blir bredare än kortet.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  /* Systemet */
  #dashboard .dash-panels{flex:0 0 auto;min-height:0}
  #dashboard .dash-inner{gap:0}
  #dashboard .dash-head{margin-bottom:6px}
  #dashboard .dash-h1{font-size:20px;margin-bottom:4px}
  #dashboard .dash-desc{font-size:12px;line-height:1.45}
  #dashboard .intro-kicker{font-size:8.5px}
  #dashboard .dash-tabs{gap:4px;margin:8px 0}
  #dashboard .dash-tab{padding:6px 9px;font-size:11px}
  #dashboard .dash-empty{padding:14px 12px}
  #dashboard .dash-empty p{font-size:12px;line-height:1.45;margin-bottom:10px}
  #dashboard .dash-empty-btns{gap:6px}
  #dashboard .dash-cta{padding:7px 11px;font-size:11.5px}
  #dashboard .dash-ctas{gap:5px;margin-top:8px}
  #dashboard .dash-book{padding:8px 13px;font-size:12px}
  #dashboard .dash-cta-note{font-size:10px}

  /* Tjänster */
  .phil-inner{padding:16px 14px}
  .phil-h1{font-size:20px}
  .phil-sub{font-size:12.5px;margin:6px auto 0}
  .svc-grid{gap:6px;margin:10px auto}
  .svc-card{padding:9px 12px;gap:2px}
  .svc-card strong{font-size:13.5px}
  .svc-card p{font-size:11.5px;line-height:1.4}
  .svc-card .material-symbols-outlined{font-size:17px}
  .phil-inner .hero-tag{font-size:8.5px;margin-top:8px}

  /* Demo — avatar bredvid rubriken, orb och förval under i full bredd */
  .flux-columns{display:grid;grid-template-columns:104px 1fr;gap:10px;align-items:start}
  .flux-right{order:0;grid-column:1;grid-row:1}
  .flux-left{display:contents}
  .flux-intro-left{grid-column:2;grid-row:1;text-align:left;margin:0}
  .voice-panel{grid-column:1 / -1;grid-row:2;max-width:100%}
  .alex-face{width:104px}
  .flux-intro-left .intro-h1{font-size:16px;margin-bottom:4px}
  .flux-intro-left .intro-desc{font-size:11px;line-height:1.4;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .flux-intro-left .intro-how{font-size:10.5px;margin-bottom:4px;text-align:left;justify-content:flex-start}
  .orb-wrap{transform:scale(.56);margin:-32px 0}
  .voice-label h2{font-size:16px}
  .voice-label p{font-size:9px}
  .link-badge{font-size:8.5px}
  .starter-btn{padding:7px 10px;font-size:11.5px}

  /* Kontakt */
  #void .intro-kicker,#void .intro-how,#void .scan-toggle-mobile{display:none}
  #void .scan-panel{padding:4px 14px 0}
  #void .alex-face--sm{width:96px}
  #void .alex-face--sm .alex-face-play{width:22px;height:22px}
  #void .alex-face--sm .alex-face-play .material-symbols-outlined{font-size:12px}
  .form-panel h2{font-size:16px;margin-bottom:2px}
  #void .form-panel>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;margin-bottom:4px}
  #void .kontakt-book{margin:2px 0 5px}
  .dash-book{padding:7px 12px;font-size:11.5px}
  #void .form-grid{grid-template-columns:1fr 1fr;gap:5px}
  #void .form-group.full{grid-column:span 2}
  #void .form-panel,#void .form-grid,#void .form-group,
  #void .form-group input,#void .form-group textarea{min-width:0}
  #void .form-panel{width:100%;box-sizing:border-box;padding:6px 14px 8px}
  #void .form-group input,#void .form-group textarea{width:100%;box-sizing:border-box}
  #void .form-group input{min-height:28px;font-size:12.5px}
  #void .form-group textarea{min-height:28px}
  #void .void-consent{font-size:9px;margin:4px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #void .transmit-btn{padding:6px 12px;font-size:10.5px}
}

/* ── Mobil: en vy per sida (2026-09-01) ────────────────────────────────────
   Uppmätt på 390px bredd: sidorna hade fast innehållshöjd (587–695 px) medan
   glaset är viewporthöjd minus 151. Under ~740 px viewport spillde alltså allt
   utanför kortet. Här kortas höjden strukturellt — två kort i bredd i stället
   för fyra på höjden, avataren bredvid texten, knappar som inte betyder något
   än göms — inte genom att krympa typografin. Allt får plats från ~660 px
   viewporthöjd och uppåt, vilket täcker varje iPhone från 12 och framåt.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {

  /* ---------- START (core) ---------- */
  #core .hero-desc { margin-top: 10px; }
  #core .hero-tag { margin-top: 6px; }

  /* ---------- TJÄNSTER (neural): två kort i bredd i stället för fyra på höjden ---------- */
  #neural .svc-grid { grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 6px; }
  #neural .svc-card { padding: 9px 10px; }
  #neural .svc-card p { font-size: 11px; line-height: 1.35; }

  /* ---------- DEMO (flux) ---------- */
  #flux .intro-how { display: none; }
  #flux .flux-columns { grid-template-columns: 96px 1fr; }
  #flux .flux-right .alex-face { max-width: 96px; }
  /* Avsluta-knappen betyder ingenting innan samtalet har startat. */
  #flux .voice-panel:has(#starter-panel:not(.hidden)) .voice-btns { display: none; }
  #flux .voice-panel { gap: 8px; }
  #flux .starter-panel { grid-template-columns: 1fr 1fr; gap: 5px; padding-top: 8px; margin-top: 4px; }
  #flux .starter-btn { font-size: 10.5px; padding: 6px 8px; line-height: 1.25; }

  /* ---------- SYSTEMET (dashboard) ---------- */
  #dashboard .intro-kicker { margin-bottom: 6px; }
  #dashboard .dash-desc { font-size: 11px; }
  #dashboard .dash-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 4px 0; }
  #dashboard .dash-empty { padding: 8px 12px; font-size: 11.5px; line-height: 1.35; }
  #dashboard .dash-head { margin-bottom: 2px; }
  #dashboard .dash-ctas { padding-top: 6px; margin-top: 3px; gap: 4px; }
  #dashboard .dash-ctas .dash-book { font-size: 11px; padding: 6px 10px; }

  /* ---------- KONTAKT (void): text vänster, avatar höger, formulär under ---------- */
  #void .void-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    align-items: start;
    column-gap: 12px;
    row-gap: 0;
    padding: 10px 14px 10px;
    box-sizing: border-box;
  }
  #void .form-panel { display: contents; }
  #void .form-panel > * { grid-column: 1; }
  /* Avataren till höger reserverar ändå höjden — då får texten synas hel
     i stället för att klippas efter två rader och lämna tomrum bredvid. */
  #void .form-panel > p { -webkit-line-clamp: unset; overflow: visible; font-size: 11.5px; }
  #void .form-panel > p.intro-how { display: none; }
  #void .scan-panel {
    display: block; padding: 0; background: transparent;
    grid-column: 2; grid-row: 1 / span 3; align-self: start;
  }
  #void .scan-panel .alex-face,
  #void .alex-face--sm { width: 96px; max-width: 96px; }
  #void #contact-form { grid-column: 1 / -1; order: 5; margin-top: 4px; }
  #void #contact-form > .form-group { margin-top: 7px; flex: 0 0 auto; }
  #void .void-consent { margin: 2px 0; }
  #void .transmit-btn { margin-top: 6px; }
  /* Bokningen är alternativet till formuläret — den hör hemma efter det, i full bredd. */
  #void .kontakt-book { grid-column: 1 / -1; order: 9; margin: 5px 0 0; gap: 6px; }
  #void .kontakt-book .dash-book { padding: 6px 12px; }
  #void .kontakt-book .dash-cta-note { display: none; }
  #void .scan-toggle-mobile { display: none; }
  #void .form-group.full { grid-column: auto; }
  #void #contact-form textarea { min-height: 40px; height: 44px; }
}

/* ── Dokumentet ska aldrig scrolla (2026-09-01) ────────────────────────────
   body hade min-height:100vh medan main är 100dvh. På iOS är 100vh den STORA
   viewporten — den med verktygsfältet dolt — alltså 60–90 px högre än det som
   faktiskt syns. Dokumentet blev därför högre än skärmen och gick att scrolla,
   och eftersom headern är position:fixed gled kortet in under den och blev
   liggande där. Det såg ut som en intern scroll men var hela dokumentet.
   Korset äger all navigation; ingenting på dokumentnivå ska röra sig.
   ─────────────────────────────────────────────────────────────────────── */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { min-height: 100dvh; }
main { overscroll-behavior: none; }
.page, .page-glass { overscroll-behavior: contain; }

/* Meddelandefältet är ett flexbarn och sträcktes till rows="4" oavsett höjd.
   flex:0 0 auto + min-height:0 gör att höjden faktiskt gäller — det är de
   sista raderna Kontakt behöver för att slippa scroll på en iPhone med
   hemknappsremsa (safe-area-inset-bottom ≈ 34 px). */
@media (max-width: 820px) {
  #void #contact-form textarea { flex: 0 0 auto; min-height: 0; height: 50px; }
}

/* ── Svep-indikatorer på mobil (2026-09-01) ────────────────────────────────
   Kantpilarna från desktop tas tillbaka i telefonform. Första försöket var
   fyllda puckar — uppmätt lade de sig rakt över rubriken på alla fem sidor,
   och över bokningslänken på Kontakt. Kortet går från kant till kant på en
   telefon, så det finns ingen marginal att flytta dem till. Alltså bara
   chevronen med en glöd bakom: den lägger sig lätt över texten i stället för
   att täcka den.

   pointer-events:none — de är hintar om en gest, inte kontroller. Korset nere
   till vänster är den tappbara navigationen. Utan detta skulle de stjäla
   tryck från formulärets fält och bokningsknappen.

   Pulsen är ett andetag, inte ett blink: mörk i två tredjedelar av cykeln,
   ljus i en kort båge, förskjuten per riktning så de aldrig lyser i kör. När
   en riktning väl använts slutar just den pilen tigga — annars blinkar fyra
   saker i evighet för den som redan kan sajten.
   ─────────────────────────────────────────────────────────────────────── */
/* Dubbelblink — två snabba slag och sedan vila. En långsam in- och uttoning
   läste som bakgrundsbrus; två slag läser som en signal. */
@keyframes swipeHint{
  0%,62%,100%{opacity:.45;filter:drop-shadow(0 0 3px rgba(67,225,155,.4))}
  16%{opacity:1;filter:drop-shadow(0 0 14px rgba(67,225,155,.95)) drop-shadow(0 0 4px rgba(255,255,255,.55))}
  30%{opacity:.55;filter:drop-shadow(0 0 5px rgba(67,225,155,.5))}
  44%{opacity:1;filter:drop-shadow(0 0 14px rgba(67,225,155,.95)) drop-shadow(0 0 4px rgba(255,255,255,.55))}
}
/* Lugnare puls när riktningen redan använts — men den slocknar inte. Första
   versionen satte animation:none, och för den som redan svept åt alla fyra
   håll blev alla fyra permanent mörka. Det var precis den som skulle se dem. */
@keyframes swipeHintCalm{
  0%,68%,100%{opacity:.48;filter:drop-shadow(0 0 3px rgba(67,225,155,.3))}
  34%{opacity:.85;filter:drop-shadow(0 0 9px rgba(67,225,155,.6))}
}

@media (max-width: 820px) {
  .fnav-edge{
    display:flex!important;width:30px;height:30px;padding:0;gap:0;
    align-items:center;justify-content:center;
    border:none;background:none;box-shadow:none;border-radius:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    color:var(--primary);opacity:.45;
    pointer-events:none;
    animation:swipeHint 4s ease-in-out infinite;
  }
  .fnav-edge span{display:none}
  .fnav-edge svg{width:26px;height:26px;stroke-width:2.9}

  .fnav-edge--up   {top:62px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);animation-delay:0s}
  .fnav-edge--right{right:1px;left:auto;top:calc(50% - 14px);bottom:auto;transform:translateY(-50%);animation-delay:.85s}
  .fnav-edge--down {bottom:calc(95px + env(safe-area-inset-bottom));top:auto;left:50%;right:auto;transform:translateX(-50%);animation-delay:1.7s}
  .fnav-edge--left {left:1px;right:auto;top:calc(50% - 14px);bottom:auto;transform:translateY(-50%);animation-delay:2.55s}

  /* Inlärd riktning slutar tigga och blir en svag vilogöd. */
  .fnav-edge.is-learned{animation:swipeHintCalm 5.4s ease-in-out infinite}

  /* Under rundturen ska ingenting annat blinka. */
}

/* Reducerad rörelse tar bort rörelsen — inte synligheten. Första versionen
   satte bara animation:none, vilket lämnade pilarna på vilonivån .38 utan
   glöd: permanent bleka för alla som har Reducera rörelse påslaget i iOS. */
/* (Ersatt längre ner: pilarna pulsar även vid reducerad rörelse — det är
   rörelse som ska bort, inte synlighet.) */

/* --k skalar ned minvärdena på smala skärmar. På 360 px bryts texten på fler
   rader än på 390, så samma golv blir för högt där. En faktor räcker; allt
   nedan är uttryckt som clamp(min * var(--k), höjdterm, tak). */
:root { --k: 1; }
@media (max-width: 382px) { :root { --k: .9; } }
@media (min-width: 421px) { :root { --k: 1.04; } }

@media (max-width: 820px) {
  /* ---------- START ---------- */
  #core .hero-title { font-size: clamp(calc(28 * var(--k) * 1px), calc((5.404vh - 7.67px) * var(--k)), 33px); gap: clamp(calc(4 * var(--k) * 1px), calc((0.772vh - 1.10px) * var(--k)), 10px); }
  /* Höjden var 1.4em — glöden runt orden klipptes av kanten och orden såg
     avhuggna ut. 1.72em ger luft. Bredden sätter taket för graden: det längsta
     ordet, Marknadsföringsbyrå, är 19 tecken och måste rymmas på 350 px. */
  #core .spin-box { font-size: clamp(calc(24 * var(--k) * 1px), min(calc((4.632vh - 6.58px) * var(--k)), 7.3vw), 30px); height: 1.72em;
                    filter: drop-shadow(0 0 12px rgba(12,196,129,.75)); }
  #core .spin-inner div { height: 1.72em; }
  #core .hero-desc { font-size: clamp(calc(14.5 * var(--k) * 1px), calc((2.799vh - 3.97px) * var(--k)), 15.5px); margin-top: clamp(calc(10 * var(--k) * 1px), calc((1.930vh - 2.74px) * var(--k)), 20px); }
  #core .hero-tag { margin-top: clamp(calc(6 * var(--k) * 1px), calc((1.158vh - 1.64px) * var(--k)), 16px); }

  /* ---------- TJÄNSTER ---------- */
  #neural .phil-h1 { font-size: clamp(calc(20 * var(--k) * 1px), calc((3.860vh - 5.48px) * var(--k)), 24px); }
  #neural .phil-sub { font-size: clamp(calc(11.5 * var(--k) * 1px), calc((2.220vh - 3.15px) * var(--k)), 13.5px); }
  #neural .svc-grid { gap: clamp(calc(6 * var(--k) * 1px), calc((1.158vh - 1.64px) * var(--k)), 13px); margin: clamp(calc(8 * var(--k) * 1px), calc((1.544vh - 2.19px) * var(--k)), 20px) 0 clamp(calc(6 * var(--k) * 1px), calc((1.158vh - 1.64px) * var(--k)), 14px); }
  #neural .svc-card { padding: clamp(calc(9 * var(--k) * 1px), calc((1.737vh - 2.47px) * var(--k)), 18px) clamp(calc(10 * var(--k) * 1px), calc((1.930vh - 2.74px) * var(--k)), 15px); }
  #neural .svc-card strong { font-size: clamp(calc(13.5 * var(--k) * 1px), calc((2.606vh - 3.70px) * var(--k)), 15.5px); }
  #neural .svc-card p { font-size: clamp(calc(11 * var(--k) * 1px), calc((2.123vh - 3.01px) * var(--k)), 12.5px); line-height: 1.4; }

  /* ---------- DEMO ---------- */
  #flux { --avatar: clamp(calc(96 * var(--k) * 1px), calc((18.528vh - 26.30px) * var(--k)), 150px); }
  #flux .flux-columns { grid-template-columns: var(--avatar) 1fr; gap: clamp(calc(10 * var(--k) * 1px), calc((1.930vh - 2.74px) * var(--k)), 16px); }
  #flux .flux-right .alex-face { width: var(--avatar); max-width: none; }
  #flux .intro-h1 { font-size: clamp(calc(16 * var(--k) * 1px), calc((3.088vh - 4.38px) * var(--k)), 22px); }
  #flux .intro-desc { font-size: clamp(calc(11 * var(--k) * 1px), calc((2.123vh - 3.01px) * var(--k)), 13px); -webkit-line-clamp: 6; }
  #flux .voice-panel { gap: clamp(calc(8 * var(--k) * 1px), calc((1.544vh - 2.19px) * var(--k)), 16px); }
  #flux .starter-btn { font-size: clamp(calc(10.5 * var(--k) * 1px), calc((2.026vh - 2.88px) * var(--k)), 13px); padding: clamp(calc(6 * var(--k) * 1px), calc((1.158vh - 1.64px) * var(--k)), 12px) 9px; }
  #flux .starter-panel { gap: clamp(calc(5 * var(--k) * 1px), calc((0.965vh - 1.37px) * var(--k)), 10px); padding-top: clamp(calc(8 * var(--k) * 1px), calc((1.544vh - 2.19px) * var(--k)), 16px); }

  /* Play-knappen låg på fasta 54 px oavsett hur stor avataren var — på 96 px
     blev den 56 % av bilden. Nu en andel av avataren, centrerad. */
  #flux .alex-face-play {
    width: calc(var(--avatar) * .28); height: calc(var(--avatar) * .28);
    left: 50%; bottom: 7%; top: auto; transform: translate(-50%, 0);
  }
  #flux .alex-face-play .material-symbols-outlined { font-size: calc(var(--avatar) * .155); }

  /* ---------- SYSTEMET ---------- */
  /* Panelytan tar all höjd som blir över och scrollar inuti sig själv. Förut
     var den innehållshög: standardfliken lämnade 200 px tomt, och de tre
     tyngre flikarna sköt ut 50–200 px genom kortet. */
  #dashboard .dash-panels { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; }
  #dashboard .dash-panel.active { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #dashboard .dash-empty { padding: clamp(calc(8 * var(--k) * 1px), calc((1.544vh - 2.19px) * var(--k)), 22px) 12px; font-size: clamp(calc(11.5 * var(--k) * 1px), calc((2.220vh - 3.15px) * var(--k)), 14px); }
  #dashboard .dash-desc { font-size: clamp(calc(11 * var(--k) * 1px), calc((2.123vh - 3.01px) * var(--k)), 14px); }
  #dashboard .dash-h1 { font-size: clamp(calc(20 * var(--k) * 1px), calc((3.860vh - 5.48px) * var(--k)), 26px); }
  #dashboard .dash-tab { padding: clamp(calc(6 * var(--k) * 1px), calc((1.158vh - 1.64px) * var(--k)), 11px) 8px; }
  #dashboard .dash-ctas { padding-top: clamp(calc(6 * var(--k) * 1px), calc((1.158vh - 1.64px) * var(--k)), 14px); gap: clamp(calc(4 * var(--k) * 1px), calc((0.772vh - 1.10px) * var(--k)), 9px); }
  #dashboard .dash-ctas .dash-book { font-size: clamp(calc(11 * var(--k) * 1px), calc((2.123vh - 3.01px) * var(--k)), 13px); padding: clamp(calc(6 * var(--k) * 1px), calc((1.158vh - 1.64px) * var(--k)), 11px) 12px; }

  /* ---------- KONTAKT ---------- */
  #void { --avatar: clamp(calc(96 * var(--k) * 1px), calc((18.528vh - 26.30px) * var(--k)), 122px); }
  #void .void-inner { grid-template-columns: minmax(0, 1fr) var(--avatar); }
  #void .scan-panel .alex-face,
  #void .alex-face--sm { width: var(--avatar); max-width: none; }
  #void .alex-face--sm .alex-face-play {
    width: calc(var(--avatar) * .21); height: calc(var(--avatar) * .21);
    left: 50%; bottom: 6%; top: auto; transform: translate(-50%, 0);
  }
  #void .alex-face--sm .alex-face-play .material-symbols-outlined { font-size: calc(var(--avatar) * .115); }
  #void .form-panel > h2 { font-size: clamp(calc(18 * var(--k) * 1px), calc((3.474vh - 4.93px) * var(--k)), 25px); }
  #void .form-panel > p { font-size: clamp(calc(11.5 * var(--k) * 1px), calc((2.220vh - 3.15px) * var(--k)), 13px); }
  #void .form-group input { min-height: clamp(calc(28 * var(--k) * 1px), calc((5.404vh - 7.67px) * var(--k)), 40px); }
  #void #contact-form textarea { height: clamp(calc(50 * var(--k) * 1px), calc((9.650vh - 13.70px) * var(--k)), 84px); }
  #void #contact-form > .form-group { margin-top: clamp(calc(7 * var(--k) * 1px), calc((1.351vh - 1.92px) * var(--k)), 14px); }
  #void .form-grid { gap: clamp(calc(5 * var(--k) * 1px), calc((0.965vh - 1.37px) * var(--k)), 11px); }
}

@media (max-width: 820px) {
  /* Kortet är högre än innehållet på stora telefoner. Förut låg allt packat
     mot toppen med ett hål nedtill; nu fördelas överskottet som luft mellan
     blocken i stället. */
  #core .hero-inner,
  #neural .phil-inner { justify-content: space-between; }
  #flux .flux-inner { height: 100%; }
  #flux .flux-columns { height: 100%; align-content: space-between; }
  /* dash-inner var innehållshög och fyllde aldrig kortet — därför satt
     panelytan kvar på 152 px medan 118 px stod tomma under knapparna. */
  #dashboard .dash-inner { height: 100%; max-height: none; }
}

@media (max-width: 820px) {
  /* Tomrutan på Systemet fyller nu hela panelytan — då ska texten och
     knapparna sitta mitt i den, inte klistrade i överkant. */
  #dashboard .dash-empty { display: flex; flex-direction: column; align-items: center;
                           justify-content: center; height: 100%; box-sizing: border-box; }
  /* Avataren sätter radhöjden på Demo; texten bredvid får använda den. */
  #flux .intro-desc { -webkit-line-clamp: 10; }
}

@media (max-width: 820px) {
  /* Flikarna sköt ut några px genom kortkanten på 360 px breda skärmar. */
  #dashboard .dash-tabs { min-width: 0; }
  #dashboard .dash-tab { min-width: 0; overflow: hidden; }
  #dashboard .dash-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 820px) {
  /* Textkolumnen på Demo hade max-height satt till avatarens höjd. Det höll
     måtten men skar av meningen mitt i ett ord utan ellips. Radantalet gör
     samma jobb och ger "…" på slutet. */
  #flux .intro-desc { -webkit-line-clamp: 6; }
}

/* Nödutgången för låga skärmar. Med mindre rubrik och brödtext ryms hela
   hero-texten så fort navigationskorset är ihopfällt — då är kortet 41 px
   högre. Är korset utfällt och skärmen låg klipps sammanfattningen till tre
   rader; hela resonemanget står ändå på Tjänster. Tröskeln låg först på 730 px
   oavsett kors, vilket klippte texten i onödan på de flesta telefoner. */
@media (max-width: 820px) and (max-height: 780px) {
  body:not(.fnav-is-collapsed) #core .hero-desc {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
}
@media (max-width: 820px) and (max-height: 720px) {
  #core .hero-desc {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  #core .hero-tag { font-size: 8px; margin-top: 4px; }
  #core .hero-title { gap: 2px; }
}

/* ── Underkanten var död yta (2026-09-01) ──────────────────────────────────
   .page reserverar 91 px + safe-area i botten åt navigationskorset. Är korset
   ihopfällt står bara en 42 px knapp där, och resten — omkring 45 px på varje
   sida — är tom skärm under kortet. Jag mätte innehåll mot KORTET och såg
   noll tomrum; felet var att kortet självt inte gick ner till skärmen.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  body.fnav-is-collapsed .page { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
  body.fnav-is-collapsed .fnav-edge--down { bottom: calc(54px + env(safe-area-inset-bottom)); }
}

@media (max-width: 820px) {
  /* Tomrutan på Systemet fyllde hela panelytan och blev en 400 px hög låda med
     tre rader i mitten. Den får ta den plats den behöver; resten fördelas
     mellan blocken i stället. */
  #dashboard .dash-panels { align-items: center; }
  #dashboard .dash-panel.active { max-height: 100%; }
  #dashboard .dash-empty { height: auto; max-height: 100%; }
  /* space-between fördelade slacken som luft mellan blocken. Ändras höjden
     under sidans liv — iOS adressfält som fälls in, teckensnitt som laddar —
     kan head och flikar hamna ovanför vyn. Panelen suger upp slacken i
     stället, och toppen står still. */
  #dashboard .dash-inner { justify-content: flex-start; }
  #dashboard .dash-head, #dashboard .dash-tabs { flex: 0 0 auto; }
  #dashboard .dash-panels { flex: 1 1 auto; }

  /* Demo: space-between sköt röstpanelen ända ner och lämnade ett hål under
     texten. Raderna får ligga i mitten med en jämn lucka i stället. */
  #flux .flux-columns { align-content: center; row-gap: clamp(14px, 3vh, 40px); }
}

@media (max-width: 820px) {
  /* Tomrutan ska vara så stor som sitt innehåll och sitta mitt i panelytan —
     inte sträckas till en 280 px hög låda med hundra px luft i botten. */
  #dashboard .dash-panel.active { display: flex; align-items: center; justify-content: center; }
  #dashboard .dash-empty { width: 100%; }
}

/* ── Pilarna: puls även vid reducerad rörelse (2026-09-01) ─────────────────
   Reducerad rörelse handlar om RÖRELSE — parallax, glid, saker som far över
   skärmen. En glöd som andas på stället orsakar inget av det. Förra versionen
   släckte hela animationen, och eftersom iOS rapporterar reducerad rörelse
   även i Låg strömförbrukning satt pilarna statiska för de flesta.
   Nu: glöden pulsar alltid, förflyttningen bara för den som inte bett om
   mindre rörelse. Förflyttningen ligger på chevronen inuti knappen, så den
   krockar inte med knappens egen centrering.
   ─────────────────────────────────────────────────────────────────────── */
@keyframes swipeDriftUp   {0%,58%,100%{transform:translateY(0)}   26%{transform:translateY(-5px)} 42%{transform:translateY(-2px)}}
@keyframes swipeDriftDown {0%,58%,100%{transform:translateY(0)}   26%{transform:translateY(5px)}  42%{transform:translateY(2px)}}
@keyframes swipeDriftLeft {0%,58%,100%{transform:translateX(0)}   26%{transform:translateX(-5px)} 42%{transform:translateX(-2px)}}
@keyframes swipeDriftRight{0%,58%,100%{transform:translateX(0)}   26%{transform:translateX(5px)}  42%{transform:translateX(2px)}}

@media (max-width: 820px) {
  .fnav-edge svg { animation: 4s ease-in-out infinite; }
  .fnav-edge--up    svg { animation-name: swipeDriftUp;    animation-delay: 0s; }
  .fnav-edge--right svg { animation-name: swipeDriftRight; animation-delay: .85s; }
  .fnav-edge--down  svg { animation-name: swipeDriftDown;  animation-delay: 1.7s; }
  .fnav-edge--left  svg { animation-name: swipeDriftLeft;  animation-delay: 2.55s; }
  .fnav-edge.is-learned svg { animation-duration: 5.4s; }
}

@media (prefers-reduced-motion: reduce) {
  /* Rörelsen bort, glöden kvar. Obs: inga !important på opacity/filter här —
     en !important-deklaration vinner över keyframes, och första försöket
     låste därför pilarna på vilonivån trots att animationen var igång. */
  .fnav-edge svg { animation: none !important; }
  .fnav-edge { animation: swipeHint 4s ease-in-out infinite; }
  .fnav-edge.is-learned { animation: swipeHintCalm 5.4s ease-in-out infinite; }
}

/* ── Systemet: dragspel i stället för intern scroll ────────────────────────
   Fliken Agenter är fyra kort med brödtext — tillsammans 60-240 px högre än
   panelen, alltså intern scroll. Och intern scroll på en sida som samtidigt
   lyssnar efter svep är en dålig kombination: man byter sida av misstag.
   Som dragspel ryms alla fyra rubriker plus en öppen text, utan scroll.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  #dashboard .dash-agents { gap: 6px; }
  #dashboard .dash-agent { padding: 8px 12px; }
  #dashboard .dash-agent-head { cursor: pointer; align-items: center; }
  #dashboard .dash-agent-head::after {
    content: ''; margin-left: auto; width: 7px; height: 7px; flex: 0 0 auto;
    border-right: 1.6px solid rgba(67,225,155,.6); border-bottom: 1.6px solid rgba(67,225,155,.6);
    transform: rotate(45deg) translate(-2px,-2px); transition: transform .25s ease;
  }
  #dashboard .dash-agent.is-open .dash-agent-head::after { transform: rotate(-135deg) translate(-2px,-2px); }
  #dashboard .dash-agent > p {
    max-height: 0; opacity: 0; margin: 0; overflow: hidden;
    transition: max-height .28s ease, opacity .2s ease, margin .28s ease;
  }
  #dashboard .dash-agent.is-open > p { max-height: 140px; opacity: 1; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #dashboard .dash-agent > p,
  #dashboard .dash-agent-head::after { transition: none; }
}

@media (max-width: 820px) {
  /* Översikt och Din ROI scrollade också internt. Samma sak här: kortare
     innehåll i stället för en scrollyta som konkurrerar med svepet. */
  #dashboard .dash-kpis { gap: 8px; }
  #dashboard .dash-kpi { gap: 2px; padding: 8px 10px; }
  #dashboard .dash-kpi-v { font-size: 21px; }
  #dashboard .dash-kpi-l { font-size: 11px; line-height: 1.3; }
  #dashboard .dash-note {
    font-size: 11.5px; line-height: 1.35; margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  #dashboard .dash-roi { gap: 10px; }
  #dashboard .dash-roi-controls { gap: 12px; }
  #dashboard .dash-roi-results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
  #dashboard .dash-roi-big, #dashboard .dash-roi-small { padding: 10px 12px; }
  #dashboard .dash-roi-num { font-size: 22px; }
  #dashboard .dash-roi-num-sm { font-size: 17px; }
  #dashboard .dash-roi-cap { font-size: 10.5px; line-height: 1.3; }
}

/* ── Pilarna ut ur kortet (2026-09-01) ─────────────────────────────────────
   Ned-pilen låg på kortkanten och la sig över "Kostnadsfritt · ärlig
   bedömning". Nu ligger den i remsan UNDER kortet — där finns plats, korset
   sitter till vänster. Upp-pilen får ett litet glapp mellan header och kort
   att sitta i. Ingen av dem rör innehållet längre.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .page { padding-top: 78px; }
  .fnav-edge--up   { top: 48px; }
  .fnav-edge--down { bottom: calc(52px + env(safe-area-inset-bottom)); }
  body.fnav-is-collapsed .page { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  body.fnav-is-collapsed .fnav-edge--down { bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* ── Agentraderna i en rak kolumn ──────────────────────────────────────────
   Ikonerna är olika breda, så rubrikerna började på olika x och etiketterna
   hamnade huller om buller. Rutnät med fasta spår i stället: ikon, rubrik,
   etikett, chevron — allt linjerat lodrätt.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  #dashboard .dash-agent-head {
    display: grid; grid-template-columns: 22px minmax(0,1fr) auto 14px;
    align-items: center; column-gap: 10px;
  }
  #dashboard .dash-agent-head .material-symbols-outlined {
    font-size: 19px; width: 22px; text-align: center;
  }
  #dashboard .dash-agent-head strong { min-width: 0; font-size: 14px; }
  #dashboard .dash-agent-head .dash-badge {
    font-size: 8.5px; padding: 3px 7px; white-space: nowrap; justify-self: end;
  }
  #dashboard .dash-agent-head::after { margin: 0; justify-self: center; }
}

/* ── Avatarerna större ─────────────────────────────────────────────────── */
@media (max-width: 820px) {
  #flux { --avatar: clamp(calc(110 * var(--k) * 1px), calc((21.230vh - 30.14px) * var(--k)), 158px); }
  #void { --avatar: clamp(calc(108 * var(--k) * 1px), calc((20.844vh - 29.59px) * var(--k)), 136px); }
  #dashboard .page-glass { margin-top: 0; }
  /* Avataren på Kontakt satt i höjd med rubriken och verkade sväva; nu följer
     den textkolumnen och börjar en aning lägre. */
  /* Avataren låg i linje med rubrikens överkant och verkade sväva högt upp.
     Nu centreras den mot textkolumnen bredvid. */
  #void .scan-panel { align-self: stretch; display: flex; align-items: center; padding-top: 0; }
  #void .alex-face--sm .alex-face-play {
    width: calc(var(--avatar) * .23); height: calc(var(--avatar) * .23);
  }
  #void .alex-face--sm .alex-face-play .material-symbols-outlined { font-size: calc(var(--avatar) * .125); }
}

@media (max-width: 820px) {
  /* Med korset utfällt är kortet 41 px kortare. Då får avataren inte vara lika
     stor — annars spricker Demo och Kontakt på små telefoner. */
  body:not(.fnav-is-collapsed) #flux { --avatar: clamp(calc(96 * var(--k) * 1px), calc((18.528vh - 26.30px) * var(--k)), 140px); }
  body:not(.fnav-is-collapsed) #void { --avatar: clamp(calc(90 * var(--k) * 1px), calc((17.370vh - 24.66px) * var(--k)), 122px); }
}

@media (max-width: 820px) {
  /* Utfällt kors + engelsk text + smal skärm är det trängsta fallet som
     finns. Där klipps kontaktstycket till fem rader. */
  body:not(.fnav-is-collapsed) #void .form-panel > p {
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  }
  body:not(.fnav-is-collapsed) #neural .svc-card p { -webkit-line-clamp: 4; }
}

/* ── Headerkors på mobil (2026-09-01) ──────────────────────────────────────
   Den flytande widgeten tog en remsa i underkant på varje sida och låg i
   vägen. På telefon flyttar korset upp i headern bredvid språkväljaren:
   fem celler, sidan man står på upplyst i mitten, de fyra grannarna runt om
   som tryckytor. Uppmätt fri yta mellan logotyp och språkväljare: 78 px på
   den smalaste telefonen (360), så 43 px räcker med marginal.
   ─────────────────────────────────────────────────────────────────────── */
.fnav-hcross { display: none; }

@media (max-width: 820px) {
  .fnav-minimap, .fnav-collapsed-btn { display: none !important; }

  .fnav-hcross {
    display: grid; grid-template-columns: repeat(3, 14px); grid-auto-rows: 14px;
    gap: 2px; margin-left: auto; margin-right: 10px; flex: 0 0 auto;
  }
  .fnav-hcross .hc {
    display: flex; align-items: center; justify-content: center;
    position: relative;
    width: 14px; height: 14px; padding: 0; border-radius: 3px;
    font-family: 'Space Grotesk', sans-serif; font-size: 8px; font-weight: 700;
    letter-spacing: 0; line-height: 1;
    border: 1px solid rgba(67,225,155,.22);
    background: rgba(67,225,155,.07);
    color: rgba(160,240,205,.62);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* Cellen är 14 px — tryckytan är 30. Osynlig, men fingret hittar rätt. */
  .fnav-hcross button.hc::after { content: ''; position: absolute; inset: -8px; }
  .fnav-hcross button.hc:active {
    background: rgba(67,225,155,.3); color: #04110b; border-color: rgba(67,225,155,.8);
  }
  /* Den man står på: fylld och lyst. */
  .fnav-hcross .hc--center {
    background: var(--primary); border-color: var(--primary); color: #04110b;
    box-shadow: 0 0 9px rgba(67,225,155,.55);
  }

  /* Widgeten är borta — remsan i underkant behöver bara rymma ned-pilen, och
     avatarernas storlek behöver inte längre bero på korsets läge. */
  .page,
  body.fnav-is-collapsed .page { padding-bottom: calc(46px + env(safe-area-inset-bottom)); }
  .fnav-edge--down,
  body.fnav-is-collapsed .fnav-edge--down { bottom: calc(8px + env(safe-area-inset-bottom)); }
  body:not(.fnav-is-collapsed) #flux { --avatar: clamp(calc(110 * var(--k) * 1px), calc((21.230vh - 30.14px) * var(--k)), 158px); }
  body:not(.fnav-is-collapsed) #void { --avatar: clamp(calc(108 * var(--k) * 1px), calc((20.844vh - 29.59px) * var(--k)), 136px); }
  body:not(.fnav-is-collapsed) #void .form-panel > p { -webkit-line-clamp: unset; overflow: visible; display: block; }
  body:not(.fnav-is-collapsed) #neural .svc-card p { -webkit-line-clamp: unset; }
  body:not(.fnav-is-collapsed) #core .hero-desc { display: block; overflow: visible; }
}

/* ── Smala skärmar: tjänstekorten slutar växa i grad (2026-09-01) ──────────
   Engelskan har fler ord och bryter på fler rader vid 390 px. När typografin
   dessutom växer med skärmhöjden sprack korten på höga smala telefoner.
   Under 405 px bredd låses kortens grad — kompakthet slår tillväxt där. */
@media (max-width: 405px) {
  /* Samma golv som förut — bara taket sänks, annars blev korten STÖRRE än
     tidigare på små skärmar och sprack åt andra hållet. */
  #neural .svc-card p { font-size: clamp(calc(11 * var(--k) * 1px), calc((2.123vh - 3.01px) * var(--k)), 11.5px); }
  #neural .svc-card strong { font-size: clamp(calc(13.5 * var(--k) * 1px), calc((2.606vh - 3.70px) * var(--k)), 14px); }
  #neural .svc-card { padding: clamp(calc(9 * var(--k) * 1px), calc((1.737vh - 2.47px) * var(--k)), 12px)
                               clamp(calc(10 * var(--k) * 1px), calc((1.930vh - 2.74px) * var(--k)), 12px); }
}

@media (max-width: 382px) {
  /* 360 px + engelska + hög skärm: sista överhänget. Taket ett halvt steg ner. */
  #neural .svc-card p { font-size: clamp(calc(11 * var(--k) * 1px), calc((2.123vh - 3.01px) * var(--k)), 11px); }
}
/* ── Klippt copy & lead-kortets överlapp (2026-09-01, kväll) ───────────────
   Nya copyn är budgeterad att rymmas i en vy — men tre gamla nödregler satt
   kvar och klippte den med ellips: hero (3 rader under 720 px höjd), demons
   brödtext (6 rader, satt efter avatarens höjd) och tjänstekorten. Bort med
   dem; texterna är dimensionerade mot 360–430 × 640+ i riggen.
   På Systemet gav justify-content:center + översvämning det klassiska
   flexfelet: innehållet växer åt båda håll, toppen går inte att nå ens med
   scroll. margin:auto på barnet centrerar när plats finns och lämnar en
   vanlig scroll när den inte gör det. */
@media (max-width: 820px) {
  #core .hero-desc,
  body:not(.fnav-is-collapsed) #core .hero-desc {
    display: block; -webkit-line-clamp: unset; overflow: visible;
  }
  #flux .intro-desc {
    display: block; -webkit-line-clamp: unset; overflow: visible;
  }
  #neural .svc-card p,
  body:not(.fnav-is-collapsed) #neural .svc-card p {
    display: block; -webkit-line-clamp: unset; overflow: visible;
  }
  #void .form-panel > p,
  body:not(.fnav-is-collapsed) #void .form-panel > p {
    display: block; -webkit-line-clamp: unset; overflow: visible;
  }

  #dashboard .dash-panel.active { justify-content: flex-start; }
  #dashboard .dash-panel.active > * { margin-top: auto; margin-bottom: auto; }

  /* Lead-kortet i fyllt läge: kompaktare rader så mindre hamnar i scroll. */
  #dashboard .dash-card-body { padding: 10px 14px; gap: 8px; }
  #dashboard .dash-card-body .profile-row { padding-bottom: 8px; margin-bottom: 0; }
  #dashboard .dash-timeline { padding: 10px 14px; gap: 10px; max-height: none; }
}

/* Nödutgång enbart för skärmar lägre än vad sajten stödjer fullt ut. */
@media (max-width: 820px) and (max-height: 600px) {
  #core .hero-desc,
  body:not(.fnav-is-collapsed) #core .hero-desc {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
}

/* Engelskan radar 1–3 rader längre än svenskan. På skärmar under ~700 px höjd
   krymps de engelska sidorna en grad i stället för att klippas med ellips. */
@media (max-width: 820px) and (max-height: 700px) {
  html[lang="en"] #core .hero-desc { font-size: calc(14 * var(--k) * 1px); line-height: 1.42; margin-top: calc(6 * var(--k) * 1px); }
  html[lang="en"] #core .hero-tag { margin-top: 2px; }
  html[lang="en"] #neural .svc-card { padding: 7px 9px; }
  html[lang="en"] #neural .svc-card p { line-height: 1.3; }
  html[lang="en"] #neural .svc-grid { gap: 5px; margin: 6px 0 5px; }
}

/* 390×640: path-korten stack 3 px genom kortkanten. Luften ovanför hero-texten
   får ge de pixlarna på de lägsta skärmarna. */
@media (max-width: 820px) and (max-height: 660px) {
  #core .hero-desc { margin-top: calc(6 * var(--k) * 1px); }
}

/* ── ROI-reglagen tappade sina etiketter i scroll (2026-09-01, sen kväll) ──
   När panelen scrollar någon rad hamnar första etiketten ovanför synfältet
   och "Ditt timvärde" ser ut att höra till fel reglage. Varje etikett+reglage
   får en egen ruta så paret håller ihop visuellt oavsett scrolläge. */
@media (max-width: 820px) {
  #dashboard .dash-roi-label {
    background: rgba(28, 32, 32, .45);
    border: 1px solid rgba(60, 74, 65, .35);
    border-radius: 10px;
    padding: 8px 12px 6px;
  }
  #dashboard .dash-roi-controls { gap: 8px; }
}

/* ── Swipehint vid första besöket (2026-09-01) ────────────────────────────
   Rundturen är borta. En engångshint mitt på skärmen visar de fyra
   svepriktningarna och försvinner på första gesten eller efter fem
   sekunder. Reduced motion: chevronerna ligger stilla och pulserar i glöd
   i stället för att driva. */
.swipe-hint{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .5s ease}
.swipe-hint.is-on{opacity:1}
.swipe-hint-box{display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 32px;border-radius:18px;background:rgba(4,14,9,.74);border:1px solid rgba(67,225,155,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 12px 48px rgba(0,0,0,.45)}
.swipe-hint-cross{position:relative;width:96px;height:96px}
.swipe-hint-text{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-bg)}
@media (prefers-reduced-motion: reduce){
    }

/* ── Kedjan formulär → Systemet → Alex (2026-09-02) ────────────────────────
   Efter skickat formulär pulserar vägen vidare till svaret i Systemet.
   Där visas långa AI-svar hopfällda med egen expander, panelen får en
   scrollskugga när det finns mer, och under händelserna ligger knappen som
   fortsätter ärendet i röstsamtal med Alex. */
.void-goto-dash{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;margin-top:10px;padding:10px 14px;border-radius:10px;
  background:rgba(67,225,155,.14);border:1px solid rgba(67,225,155,.55);
  color:var(--primary);font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer;
  animation:ctaPulse 1.8s ease-in-out infinite;
}
.void-goto-dash:active{background:rgba(67,225,155,.3)}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(67,225,155,0)}
  50%{box-shadow:0 0 16px 3px rgba(67,225,155,.35)}
}
.dash-detail-text.clamped{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.dash-more{
  background:none;border:none;padding:6px 0 0;cursor:pointer;
  color:var(--primary);font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.05em;
}
.dash-continue{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;margin-top:4px;padding:10px 14px;border-radius:10px;
  background:rgba(67,225,155,.14);border:1px solid rgba(67,225,155,.5);
  color:var(--primary);font-family:'Space Grotesk',sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;cursor:pointer;
}
.dash-continue:active{background:rgba(67,225,155,.3)}
.dash-event-detail.flash{animation:detailFlash 2.2s ease}
@keyframes detailFlash{0%{box-shadow:inset 0 0 0 1px var(--primary),0 0 14px rgba(67,225,155,.4)}100%{box-shadow:none}}
.dash-panels::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:26px;
  background:linear-gradient(180deg,transparent,rgba(4,12,8,.82));
  opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:2;
}
.dash-panels.has-more::after{opacity:1}

/* ── Hero: flödesstrip i stället för de två korten (2026-09-02) ────────────
   Korten tog halva vyn för att säga det sidorna själva säger, och navigationen
   finns redan i headerkorset och kantpilarna. Kvar blir ett litet diagram som
   visar vad systemet faktiskt gör — kund → svar → bokning → ditt system — med
   en ljuspunkt som vandrar genom kedjan, plus en smal länkrad. Nyckelfrasen i
   brödtexten lyfts i primärfärgen. */
.hero-hl{
  color:var(--primary);font-weight:500;
  text-shadow:0 0 18px rgba(67,225,155,.45);
  animation:heroHlBreathe 4.5s ease-in-out infinite;
}
@keyframes heroHlBreathe{
  0%,100%{text-shadow:0 0 14px rgba(67,225,155,.32)}
  50%{text-shadow:0 0 22px rgba(67,225,155,.6)}
}

.hero-flow{width:100%;max-width:520px;margin:26px auto 0}
.hf-row{position:relative;display:grid;grid-template-columns:repeat(4,1fr);align-items:start;gap:0}
/* Linjen går mellan de yttre ikonernas mitt, inte kant till kant. */
.hf-track{position:absolute;left:12.5%;right:12.5%;top:11px;height:1px;
  background:linear-gradient(90deg,rgba(67,225,155,.08),rgba(67,225,155,.26),rgba(67,225,155,.08))}
.hf-pulse{position:absolute;top:50%;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--primary);box-shadow:0 0 12px 2px rgba(67,225,155,.75);
  animation:hfTravel 4.8s linear infinite}
@keyframes hfTravel{
  0%{left:0;opacity:0}6%{opacity:1}
  87.5%{left:100%;opacity:1}96%{left:100%;opacity:0}100%{left:100%;opacity:0}
}
.hf-step{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:0 4px}
.hf-ico{font-size:22px;line-height:1;color:rgba(160,240,205,.42);
  position:relative;z-index:1;
  animation:hfLight 4.8s ease-in-out infinite}
.hf-step:nth-child(2) .hf-ico{animation-delay:.5s}
.hf-step:nth-child(3) .hf-ico{animation-delay:1.7s}
.hf-step:nth-child(4) .hf-ico{animation-delay:2.9s}
.hf-step:nth-child(5) .hf-ico{animation-delay:4.1s}
@keyframes hfLight{
  0%,5%{color:var(--primary);filter:drop-shadow(0 0 9px rgba(67,225,155,.85));transform:scale(1.12)}
  24%,100%{color:rgba(160,240,205,.42);filter:none;transform:scale(1)}
}
.hf-lbl{font-family:'Space Grotesk',sans-serif;font-size:10px;line-height:1.3;
  letter-spacing:.02em;color:var(--on-surface-var);opacity:.75;max-width:88px}

.hero-links{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.hero-link{background:none;border:none;padding:7px 2px;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;letter-spacing:.04em;
  color:var(--primary);-webkit-tap-highlight-color:transparent}
.hero-link:active{opacity:.6}
.hero-link-sep{width:3px;height:3px;border-radius:50%;background:rgba(67,225,155,.4)}

/* Låg skärm: strippen krymper i grad, aldrig under läsbart. */
@media (max-width: 820px){
  .hero-flow{max-width:100%;margin-top:clamp(calc(14 * var(--k) * 1px), calc((2.702vh - 3.84px) * var(--k)), 30px)}
  .hf-ico{font-size:clamp(calc(19 * var(--k) * 1px), calc((3.667vh - 5.21px) * var(--k)), 24px)}
  .hf-track{top:calc(0.5 * clamp(calc(19 * var(--k) * 1px), calc((3.667vh - 5.21px) * var(--k)), 24px))}
  .hf-lbl{font-size:clamp(calc(9 * var(--k) * 1px), calc((1.737vh - 2.47px) * var(--k)), 11px);max-width:80px}
  .hf-step{gap:5px}
  .hero-links{margin-top:clamp(calc(10 * var(--k) * 1px), calc((1.930vh - 2.74px) * var(--k)), 22px);gap:14px}
  .hero-link{font-size:clamp(calc(11.5 * var(--k) * 1px), calc((2.220vh - 3.15px) * var(--k)), 13px)}
}

/* Låg effekt / reduced motion: ljuspunkten som rör sig försvinner, glöden är
   kvar — samma linje som kantpilarna följer. */
@media (prefers-reduced-motion: reduce){
  .hf-pulse{display:none}
  .hf-ico,
  .hf-step:nth-child(n) .hf-ico{animation:hfGlow 3.2s ease-in-out infinite;animation-delay:0s}
  @keyframes hfGlow{0%,100%{color:rgba(160,240,205,.5);filter:none}50%{color:var(--primary);filter:drop-shadow(0 0 8px rgba(67,225,155,.6))}}
  .hero-hl{animation:none;text-shadow:0 0 18px rgba(67,225,155,.5)}
}

/* Med korten borta blev space-between fyra slumpmässiga hål i stället för
   luft. Auto-marginaler centrerar kompositionen när det finns plats över och
   faller tillbaka till noll när det inte gör det — inget klipps i toppen. */
@media (max-width: 820px){
  #core .hero-inner{justify-content:flex-start}
  #core .hero-title{margin-top:auto}
  #core .hero-links{margin-bottom:auto}
}

/* Korten tog halva vyn; utan dem stod hälften av kortet tomt. Taken höjs så
   att typografin och flödet växer med skärmen — golven är oförändrade, så
   låga telefoner ser exakt likadana ut som förut. */
@media (max-width: 820px){
  #core .hero-title{font-size:clamp(calc(28 * var(--k) * 1px), calc((6.7vh - 9.5px) * var(--k)), 46px)}
  #core .hero-desc{font-size:clamp(calc(14.5 * var(--k) * 1px), calc((3.35vh - 4.75px) * var(--k)), 19px);
                   margin-top:clamp(calc(10 * var(--k) * 1px), calc((3.4vh - 4.8px) * var(--k)), 38px);max-width:none}
  #core .hero-tag{font-size:clamp(calc(9 * var(--k) * 1px), calc((1.737vh - 2.47px) * var(--k)), 11px);
                  margin-top:clamp(calc(6 * var(--k) * 1px), calc((2.4vh - 3.4px) * var(--k)), 30px)}
  #core .hero-flow{margin-top:clamp(calc(14 * var(--k) * 1px), calc((4.7vh - 6.7px) * var(--k)), 56px)}
  #core .hf-ico{font-size:clamp(calc(19 * var(--k) * 1px), calc((4.9vh - 7.0px) * var(--k)), 34px)}
  #core .hf-track{top:calc(0.5 * clamp(calc(19 * var(--k) * 1px), calc((4.9vh - 7.0px) * var(--k)), 34px))}
  #core .hf-lbl{font-size:clamp(calc(9 * var(--k) * 1px), calc((2.0vh - 2.85px) * var(--k)), 12.5px);max-width:104px}
  #core .hf-step{gap:clamp(5px, 1.1vh, 10px)}
  #core .hero-links{margin-top:clamp(calc(10 * var(--k) * 1px), calc((4.0vh - 5.7px) * var(--k)), 46px);gap:18px}
  #core .hero-link{font-size:clamp(calc(11.5 * var(--k) * 1px), calc((2.6vh - 3.7px) * var(--k)), 15px)}
}

/* Sub-raden på Tjänster försvann med den nya copyn. Utrymmet går till korten,
   som varit sidans trängsta yta hela vägen. Uppmätt fri höjd efter bytet:
   117 px (430×790 sv) ner till 27 px (360×740 en) — därför växer korten bara
   på de bredare skärmarna, och golven är orörda. */
@media (min-width: 406px) and (max-width: 820px){
  #neural .svc-card{padding:clamp(calc(9 * var(--k) * 1px), calc((1.3vh + 1.4px) * var(--k)), 20px) clamp(calc(10 * var(--k) * 1px), calc((1.2vh + 1.5px) * var(--k)), 17px)}
  #neural .svc-card strong{font-size:clamp(calc(13.5 * var(--k) * 1px), calc((1.2vh + 5.6px) * var(--k)), 17px)}
  #neural .svc-card p{font-size:clamp(calc(11 * var(--k) * 1px), calc((1.15vh + 4.4px) * var(--k)), 13.5px);line-height:1.45}
  #neural .svc-grid{gap:clamp(calc(6 * var(--k) * 1px), calc((1.0vh + 0.6px) * var(--k)), 11px)}
}
@media (min-width: 383px) and (max-width: 405px){
  #neural .svc-card p{font-size:clamp(calc(11 * var(--k) * 1px), calc((2.123vh - 3.01px) * var(--k)), 12.5px)}
  #neural .svc-card strong{font-size:clamp(calc(13.5 * var(--k) * 1px), calc((2.606vh - 3.70px) * var(--k)), 15px)}
}

/* ── Hero i tre steg (2026-09-02) ──────────────────────────────────────────
   Rotatorn ställer frågan, bryggan landar vändningen, problemraden är det man
   ska minnas och löftet stänger. Problemen är samma fyra ord som korten på
   Tjänster — hero namnger, Tjänster förklarar.
   Symbolerna i flödet är egna SVG, inte teckensnittsikoner: ✦ är Alex märke
   och ska se likadan ut överallt. */
.hero-problems{
  color:var(--primary);font-weight:500;line-height:1.5;margin:0 auto;
  text-shadow:0 0 18px rgba(67,225,155,.4);
  animation:heroHlBreathe 4.5s ease-in-out infinite;
}
.hero-promise{color:var(--on-bg);font-weight:300;line-height:1.5;margin:0 auto}
.hero-desc{color:var(--on-surface-var)}
.hf-ico svg{width:1em;height:1em;display:block}

@media (max-width: 820px){
  #core .hero-desc{font-size:clamp(calc(13 * var(--k) * 1px), calc((2.9vh - 4.1px) * var(--k)), 16.5px)}
  #core .hero-problems{font-size:clamp(calc(14.5 * var(--k) * 1px), calc((3.3vh - 4.7px) * var(--k)), 19.5px)}
  #core .hero-promise{font-size:clamp(calc(13 * var(--k) * 1px), calc((2.9vh - 4.1px) * var(--k)), 16.5px)}
}
@media (prefers-reduced-motion: reduce){
  .hero-problems{animation:none;text-shadow:0 0 18px rgba(67,225,155,.5)}
}
/* Ljuspunkten ska passera bakom symbolerna, inte över dem. */
.hf-track{z-index:0}
.hf-step{position:relative;z-index:1}

/* ── Rundturen, etapp 1 (2026-09-02) ───────────────────────────────────────
   Pillret sitter i tumzonen, inte vid kanten sidan ligger åt: pilen visar
   fingrets väg och rörelsen bär riktningen. Yttre elementet vrider, den inre
   svg:n far framåt — en rörelse räcker för alla fyra håll.
   Bara pilen lyser. Rundturen blockerar aldrig; enda tryckytan är avsluta. */
.swipe-hint-tour{
  margin-top:2px;padding:9px 16px;border-radius:10px;pointer-events:auto;
  background:rgba(67,225,155,.14);border:1px solid rgba(67,225,155,.5);
  color:var(--primary);font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.swipe-hint{pointer-events:none}
.swipe-hint-tour:active{background:rgba(67,225,155,.3)}

.guide{
  position:fixed;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));
  z-index:88;display:flex;flex-direction:column;align-items:center;gap:2px;
  pointer-events:none;opacity:0;transition:opacity .45s ease;
}
.guide.is-on{opacity:1}
.guide-pill{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:11px 20px;border-radius:15px;
  background:rgba(4,14,9,.84);border:1px solid rgba(67,225,155,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 36px rgba(0,0,0,.5);max-width:min(300px,86vw);position:relative;
}
.guide-arrow{width:26px;height:26px;display:block;color:var(--primary)}
.guide-arrow svg{
  width:100%;height:100%;display:block;
  filter:drop-shadow(0 0 9px rgba(67,225,155,.85));
  animation:guideSweep 1.9s ease-in-out infinite;
}
@keyframes guideSweep{
  0%{transform:translateY(7px);opacity:.2}
  40%{opacity:1}
  100%{transform:translateY(-11px);opacity:0}
}
.guide-t1{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.guide-t2{font-size:12.5px;line-height:1.35;color:var(--on-surface-var);text-align:center}
/* Avsluta som kryss i hörnet: enda tryckytan i hela pillret, och den stjäl
   ingen höjd från sidan under. */
.guide-skip{
  position:absolute;top:2px;right:2px;width:30px;height:30px;padding:8px;
  pointer-events:auto;background:none;border:none;cursor:pointer;
  color:var(--on-surface-var);opacity:.55;-webkit-tap-highlight-color:transparent;
}
.guide-skip svg{width:100%;height:100%;display:block}
.guide-skip:active{opacity:1}
.guide-pill{padding-right:34px}
@media (prefers-reduced-motion: reduce){
  .guide-arrow svg{animation:guideGlow 2.4s ease-in-out infinite}
  @keyframes guideGlow{0%,100%{opacity:.55}50%{opacity:1}}
}

/* ── Svepkaskaden (2026-09-02) ─────────────────────────────────────────────
   Tre chevroner som tänds i följd. Yttre elementet vrider hela kaskaden åt
   rätt håll; barnen far framåt i sin egen vridna axel, så en uppsättning
   keyframes räcker för alla fyra riktningar. Används både i förstagångshinten
   och i rundturens pill — samma rörelse betyder samma sak. */
.sw-cas{display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--primary)}
.sw-cas svg{width:22px;height:13px;display:block;opacity:0;
  filter:drop-shadow(0 0 7px rgba(67,225,155,.8));
  animation:swCas 1.8s ease-in-out infinite}
/* Den som ligger längst fram i rörelseriktningen tänds sist. */
.sw-cas svg:nth-child(3){animation-delay:0s}
.sw-cas svg:nth-child(2){animation-delay:.16s}
.sw-cas svg:nth-child(1){animation-delay:.32s}
@keyframes swCas{
  0%{opacity:0;transform:translateY(5px)}
  16%{opacity:1;transform:translateY(0)}
  46%{opacity:1;transform:translateY(-2px)}
  72%{opacity:0;transform:translateY(-5px)}
  100%{opacity:0;transform:translateY(-5px)}
}

/* Hinten: fyra svep runt mitten, ett i taget, så det läses som fyra
   riktningar och inte som en blinkande stjärna. */
.swipe-hint-cross{width:132px;height:132px}
.swipe-hint-cross .sw-cas{position:absolute}
.swipe-hint-cross .sw-cas--up{top:0;left:50%;transform:translateX(-50%) rotate(0deg)}
.swipe-hint-cross .sw-cas--right{top:50%;right:0;transform:translateY(-50%) rotate(90deg);transform-origin:center}
.swipe-hint-cross .sw-cas--down{bottom:0;left:50%;transform:translateX(-50%) rotate(180deg)}
.swipe-hint-cross .sw-cas--left{top:50%;left:0;transform:translateY(-50%) rotate(270deg)}
.swipe-hint-cross .sw-cas--up svg{animation-name:swCasA}
.swipe-hint-cross .sw-cas--right svg{animation-name:swCasB}
.swipe-hint-cross .sw-cas--down svg{animation-name:swCasC}
.swipe-hint-cross .sw-cas--left svg{animation-name:swCasD}
.swipe-hint-cross .sw-cas svg{animation-duration:4.4s}
/* Fyra fönster i ett sexsekunderscykel: upp, höger, ner, vänster. */
@keyframes swCasA{0%{opacity:0;transform:translateY(5px)}5%{opacity:1;transform:translateY(0)}
  16%{opacity:0;transform:translateY(-5px)}100%{opacity:0;transform:translateY(-5px)}}
@keyframes swCasB{25%{opacity:0;transform:translateY(5px)}30%{opacity:1;transform:translateY(0)}
  41%{opacity:0;transform:translateY(-5px)}0%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes swCasC{50%{opacity:0;transform:translateY(5px)}55%{opacity:1;transform:translateY(0)}
  66%{opacity:0;transform:translateY(-5px)}0%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes swCasD{75%{opacity:0;transform:translateY(5px)}80%{opacity:1;transform:translateY(0)}
  91%{opacity:0;transform:translateY(-5px)}0%,100%{opacity:0;transform:translateY(-5px)}}

/* Pillret: kaskaden ersätter den enda pilen, och underrubriken är borta —
   riktningen är budskapet. */
.guide-arrow{width:auto;height:auto}
.guide-arrow svg{width:22px;height:13px;animation:swCas 1.8s ease-in-out infinite;opacity:0}
.guide-arrow svg:nth-child(3){animation-delay:0s}
.guide-arrow svg:nth-child(2){animation-delay:.16s}
.guide-arrow svg:nth-child(1){animation-delay:.32s}
.guide-t2{display:none}

@media (prefers-reduced-motion: reduce){
  .sw-cas svg,.guide-arrow svg,
  .swipe-hint-cross .sw-cas svg{animation:swCasStill 2.6s ease-in-out infinite;animation-delay:0s}
  @keyframes swCasStill{0%,100%{opacity:.45;transform:none}50%{opacity:1;transform:none}}
}

/* ── Hero: rotatorn klipptes, och blocket satt för lågt (2026-09-02) ───────
   .spin-box var 1.4em hög med overflow:hidden. Ord med både uppstapel och
   nedstapel — Mjukvaruutvecklare — nuddade klipplinjen, och eftersom glödens
   filter räknas på det redan klippta innehållet såg ljuset avhugget ut.
   Boxen är nu högre än raden, så klipplinjen ligger utanför glöden.
   Vikten mellan luften över och under blocket var 50/50 via auto-marginaler.
   Två flexutfyllnader med olika grow ger 40/60 i stället — blocket lyfts utan
   att något kan tryckas ur vy, för grow fördelar bara positivt överskott. */
@media (max-width: 820px){
  #core .spin-box{height:1.66em;font-size:min(.82em, 7vw)}
  #core .spin-inner div{height:1.66em}
  #core .hero-title .static{font-size:.88em}
  #core .hero-title{gap:clamp(2px, .6vh, 8px)}

  #core .hero-inner{justify-content:flex-start}
}

/* ── Hero: luften fördelas i stället för att samlas ───────────────────────
   Två flexspacers med fasta vikter la all överbliven höjd i toppen och botten:
   85 px över rubriken och 116 px död yta under länkarna på 430×790, mer på
   högre skärmar. Ingen klampformel klarar det, eftersom textblockets höjd
   varierar med språk och skärm — svenskan på 640 px är 256 px hög, engelskan
   på 844 px är 425.
   Auto-marginaler i en flexkolumn delar den fria höjden lika mellan sig. En
   auto på varje rad plus en på avslutaren ger åtta lika stora andelar: toppen,
   de sex mellanrummen och botten mäts alltid ut mot samma skärm, utan en enda
   vh-konstant. Går luften ut blir andelarna noll och padding-top nedan är
   golvet — samma minsta avstånd som tidigare, så låga telefoner är orörda.
   Paddingen är också den enda vikten som finns: den lägger extra luft där
   kompositionen behöver den (flödet, länkarna) och håller löftesparet tätt.
   html[lang] i selektorn är inte dekoration: de engelska höjdreglerna längre
   upp är skrivna med html[lang="en"] och vinner annars över #core. */
@media (max-width: 820px){
  #core .hero-inner::before{content:none}
  #core .hero-inner::after{content:'';display:block;flex:0 0 auto;height:0;margin-top:auto}
  html[lang] #core .hero-title{margin-top:auto}
  html[lang] #core .hero-desc{margin-top:auto;padding-top:calc(6 * var(--k) * 1px)}
  html[lang] #core .hero-problems{margin-top:auto;padding-top:calc(2 * var(--k) * 1px)}
  html[lang] #core .hero-promise{margin-top:auto;padding-top:0}
  html[lang] #core .hero-tag{margin-top:auto;padding-top:calc(4 * var(--k) * 1px)}
  html[lang] #core .hero-flow{margin-top:auto;padding-top:calc(12 * var(--k) * 1px)}
  html[lang] #core .hero-links{margin-top:auto;padding-top:calc(10 * var(--k) * 1px);margin-bottom:0}
}

/* ── Djupare glas på alla sidor (2026-09-02) ───────────────────────────────
   Videoläget släcker glaset helt och lägger en nästan tät mörk yta — och det
   ser bättre ut än det ljusa frostade. Tre skäl att ta ner det överallt:
   texten får mer kontrast, den animerade bakgrunden slutar konkurrera med
   innehållet, och blur(60px) på fem alltid monterade paneler är dyrt och är
   precis den sortens lager som får iOS att sluta måla om.
   Det här är mellanläget: tydligt mörkare och mindre grönt, men bakgrunden
   andas fortfarande igenom. Vill du gå hela vägen till videolägets finish är
   det två tal — sätt blur till 0 och opaciteten till .92/.90. Vill du tillbaka
   till det gamla: blur 60px och rgba(255,255,255,.08)/(.02). */
.page-glass{
  background:linear-gradient(135deg,rgba(10,16,13,.72),rgba(6,10,8,.66));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}

/* ── Statusraden på Kontakt (2026-09-02) ───────────────────────────────────
   AI-panelen till höger är display:none under 820 px, så på mobil hände
   ingenting synligt mellan "SKICKAR..." och svaret — och ett valideringsfel
   syntes inte alls. Raden ligger direkt under knappen och finns bara där
   panelen saknas; över 820 px är den dold eftersom panelen säger samma sak.
   Mätaren går mot 92 % och stannar: backend rapporterar inga framsteg, och
   en mätare som slår i taket innan svaret är där ljuger. */
.void-status{display:none}
@media (max-width: 820px){
  .void-status{
    display:block;width:100%;margin-top:9px;
    animation:vsIn .35s ease both;
  }
  .vs-bar{
    height:3px;border-radius:2px;overflow:hidden;
    background:rgba(67,225,155,.14);
  }
  .vs-fill{
    display:block;height:100%;width:0;border-radius:2px;
    background:linear-gradient(90deg,rgba(12,196,129,.7),var(--primary));
    box-shadow:0 0 10px rgba(67,225,155,.55);
  }
  .vs-row{
    display:flex;align-items:center;gap:8px;margin-top:7px;
    font-family:'Space Grotesk',monospace;font-size:11.5px;letter-spacing:.03em;
    line-height:1.35;color:var(--on-surface-var);
  }
  .vs-dot{
    flex:0 0 auto;width:7px;height:7px;border-radius:50%;
    background:var(--primary);animation:void-pulse-anim 1.2s ease-in-out infinite;
  }
  .void-status[data-state="done"] .vs-dot{animation:none;opacity:1}
  .void-status[data-state="done"] .vs-label{color:var(--primary)}
  .void-status[data-state="error"] .vs-bar{display:none}
  .void-status[data-state="error"] .vs-dot{background:var(--error);animation:none}
  .void-status[data-state="error"] .vs-label{color:var(--error)}
}
@keyframes vsIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .void-status{animation:none}
  .vs-dot{animation:none !important}
  .vs-fill{transition:none !important}
}

/* ── Kontakt: hålet mellan texten och formuläret (2026-09-02) ──────────────
   Ett tomrum på ungefär 100 px satt mellan introtexten och första fältet.
   Tre saker byggde det tillsammans.
   Avatarpanelen spänner tre rader i rutnätet men innehöll också en tom
   flexbehållare — AI-svaret inuti är display:none på mobil, men wrappern
   hade kvar sin höjd och sträckte raderna. Den har en inline-style, därför
   !important; det är enda gången selektorn förlorar mot markupen.
   Rutnätet hade dessutom bara auto-rader, och grid delar ut allt överblivet
   utrymme jämnt över alla rader — även den tomma raden bredvid avataren.
   Med en uttalad radmall går slacket i stället till formuläret, som får
   sträcka sig i sin rad (align-items:start på behållaren stoppade det).
   Där gör utrymmet nytta: meddelandefältet var 44 px högt trots att sidan
   ber besökaren beskriva sitt problem på minst 30 tecken. Nu växer det med
   skärmen — 84 px på 660, 156 på 790 — utan tak, för ett tak flyttar bara
   hålet in i formuläret i stället för att ta bort det. */
@media (max-width: 820px){
  #void .scan-panel > div:not(.alex-face){display:none !important}
  #void .void-inner{grid-template-rows:min-content min-content min-content 1fr min-content}
  #void #contact-form{align-self:stretch;display:flex;flex-direction:column;min-height:0}
  #void #contact-form > .form-group{min-height:0}
  #void #contact-form textarea{height:auto;flex:1 1 auto;min-height:44px}
  #void #contact-form .transmit-btn{align-self:flex-start}
}

/* ── Rundturen, etapp 2–3: ljuset pekar på elementet (2026-09-02) ──────────
   På sidorna man passerar är nästa handling ett svep och pillret ligger
   stilla i tumzonen. På Kontakt och Demo är nästa handling något på sidan —
   då lyser elementet självt och pillret ställer sig intill det. Kaskaden
   göms: den betyder "svep", och den betyder inget annat.
   Ringen ritas med box-shadow och följer därför elementets egen radie. Orben
   är fyrkantig i markupen men rund för ögat, och får sin radie av is-round. */
.guide--point{bottom:auto}
.guide--point .guide-arrow{display:none}
.guide--point .guide-pill{padding:9px 34px 9px 16px}
.guide--point .guide-t1{text-transform:none;letter-spacing:.02em;font-size:12.5px;
  font-weight:600;line-height:1.35;text-align:center}
.guide-focus{
  position:relative;z-index:3;border-radius:10px;
  animation:guideFocus 1.9s ease-in-out infinite;
}
.guide-focus.is-round{border-radius:50%}
@keyframes guideFocus{
  0%,100%{box-shadow:0 0 0 1px rgba(67,225,155,.45), 0 0 0 0 rgba(67,225,155,0)}
  50%{box-shadow:0 0 0 1px rgba(67,225,155,.95), 0 0 18px 4px rgba(67,225,155,.32)}
}
@media (prefers-reduced-motion: reduce){
  .guide-focus{animation:none;box-shadow:0 0 0 1px rgba(67,225,155,.9), 0 0 14px 2px rgba(67,225,155,.3)}
}

/* ── Landningen i Systemet: ledtråden ner till svaret (2026-09-02) ─────────
   Djuplänken hoppade förr rakt ner till AI-svaret, och besökaren såg en
   textmassa utan avsändare. Nu landar man överst på kortet — det egna namnet
   och företaget först — och den här knappen säger att svaret finns längre
   ner. Den ligger ovanpå panelens nederkant, ovanför scrollskuggan, och
   slocknar så fort svaret är i vyn. */
.dash-cue{
  position:absolute;left:50%;bottom:10px;transform:translate(-50%,6px);
  width:max-content;
  display:flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:11px;max-width:92%;
  background:rgba(4,14,9,.9);border:1px solid rgba(67,225,155,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  color:var(--primary);font-family:'Space Grotesk',sans-serif;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;line-height:1.3;
  cursor:pointer;z-index:4;opacity:0;transition:opacity .35s ease,transform .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.dash-cue.is-on{opacity:1;transform:translate(-50%,0)}
.dash-cue:active{background:rgba(67,225,155,.22)}
.dash-cue svg{width:16px;height:10px;flex:0 0 auto;
  filter:drop-shadow(0 0 7px rgba(67,225,155,.7));
  animation:dashCueNudge 1.8s ease-in-out infinite}
@keyframes dashCueNudge{
  0%,100%{transform:translateY(-2px);opacity:.55}
  50%{transform:translateY(2px);opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .dash-cue svg{animation:none;opacity:1}
}

/* Paneler som byter plats utanför skärmen flyttas utan övergång (se
   applyLayout i app.js). */
.page.is-parked{transition:none !important}

/* ── Scroll-läge: skivan (2026-09-03) ─────────────────────────────────────
   main är en fast ruta; sidorna ligger på en skiva inuti som förflyttas med
   transform (se app.js). Dokumentet är låst — position:fixed dödar iOS
   gummiband och adressfältshopp, samma lås som SCC:s mobilvy använder.
   Varje sida är exakt en vy hög och behåller sitt glaskort; blir innehållet
   högre scrollar sidan inuti sig själv. */
html.is-scroll, html.is-scroll body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
html.is-scroll main{
  position:fixed;inset:0;height:100dvh;min-height:0;overflow:hidden;
  display:block;scroll-snap-type:none;touch-action:pinch-zoom;
}
/* Skivan och sidorna mäts mot main, inte mot dvh. Adressfältet gör dvh och
   den faktiska rutan olika stora i vissa lägen, och då hamnade kortets
   underkant utanför vyn — det var därför bokningsknappen såg ut att ligga
   utanför kortet. */
.scroll-track{display:flex;flex-direction:column;width:100%;height:100%;will-change:transform}
html.is-scroll .page{
  position:relative;inset:auto;visibility:visible;pointer-events:auto;z-index:auto;
  transform:none !important;transition:none;will-change:auto;
  flex:0 0 100%;height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;
}
html.is-scroll .page-glass{height:auto;max-height:none;overflow:visible;overscroll-behavior:auto}
html.is-scroll .dash-panel,html.is-scroll textarea,html.is-scroll .ai-response-body{overscroll-behavior:contain}
@media (max-width: 820px){
  /* Hemknappsremsan är en no-touch-zon: kortet måste sluta ovanför den,
     annars lägger sig ner-ikonen och till-toppen-knappen på kortkanten. */
  html.is-scroll .page{padding-bottom:calc(46px + env(safe-area-inset-bottom))}
  html.is-scroll .page-glass{min-height:100%}
}
/* Innehållet ligger tätt under headern nu — tätare glas så att inget lyser
   igenom logotypraden. */
html.is-scroll header{background:rgba(6,10,8,.86)}
html.is-scroll .fnav-edge,html.is-scroll .fnav-minimap,html.is-scroll .fnav-collapsed-btn,
html.is-scroll .fnav-hcross,html.is-scroll .swipe-hint,html.is-scroll .guide{display:none !important}

/* Sektionsraden i headern: siffror, aktuell upplyst. */
.fnav-rail{display:flex;align-items:center;gap:4px;margin-right:12px}
.rail-btn{
  width:24px;height:24px;border-radius:7px;padding:0;
  border:1px solid rgba(67,225,155,.22);background:rgba(67,225,155,.05);
  color:var(--on-surface-var);font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.rail-btn.is-current{background:rgba(67,225,155,.22);border-color:var(--primary);color:var(--primary);
  box-shadow:0 0 10px rgba(67,225,155,.35)}
.rail-btn:active{background:rgba(67,225,155,.3)}
@media (max-width: 820px){
  .fnav-rail{gap:3px;margin-right:8px}
  .rail-btn{width:22px;height:22px;font-size:10.5px}
}

/* Logotypen bär namnet själv — ordbilden i Manrope italic passade inte
   resten av typografin. */
.logo{gap:0}
.logo-mark{height:46px;width:46px}
@media (max-width:820px){.logo-mark{height:38px;width:38px}}

/* ── Scroll-ikonen ────────────────────────────────────────────────────────
   Kaskaden vriden nedåt med en andande glöd bakom, i remsan UNDER kortet:
   sidan reserverar 34 px i botten och ikonen ligger i de nedersta 30, så
   den rör aldrig kortets kant. På sista sektionen vänder den uppåt. */
.scroll-cue{
  position:fixed;left:50%;bottom:calc(5px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:60;
  background:none;border:none;padding:3px 18px;cursor:pointer;
  color:var(--primary);opacity:1;transition:opacity .45s ease;
  -webkit-tap-highlight-color:transparent;
}
.scroll-cue::before{
  content:'';position:absolute;left:50%;top:50%;width:58px;height:30px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(67,225,155,.3),rgba(67,225,155,0) 70%);
  animation:cueBreathe 2.2s ease-in-out infinite;pointer-events:none;
}
.scroll-cue .sw-cas{transform:rotate(180deg);position:relative;gap:0}
.scroll-cue .sw-cas svg{width:18px;height:9px;filter:drop-shadow(0 0 9px rgba(67,225,155,.95))}
.scroll-cue.is-up .sw-cas{transform:none}
@keyframes cueBreathe{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.85)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
@media (prefers-reduced-motion: reduce){.scroll-cue::before{animation:none;opacity:.7}}

/* Bokningen längst ner på Demo — sista sektionen ska ha en väg vidare. */
.flux-book{justify-content:center;margin:18px 0 0;gap:8px;flex:0 0 auto}
.flux-book .dash-cta-note{font-size:11px;color:var(--on-surface-var);opacity:.8}
@media (max-width: 820px){
  .flux-book{margin:12px 0 0;flex-direction:column;gap:5px}
  .flux-book .dash-book{padding:8px 14px;font-size:12px}
}
@media (max-width: 820px) and (max-height: 700px){
  .flux-book .dash-cta-note{display:none}
  .flux-book{margin-top:8px}
  .flux-book .dash-book{padding:7px 12px;font-size:11.5px}
}

/* Kontakt: skicka och boka på samma rad, var sin sida. */
.void-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;margin-top:7px}
.void-actions .transmit-btn{margin-top:0 !important;flex:0 0 auto}
.void-actions .kontakt-book{margin:0 !important;flex:0 0 auto;gap:0}
.void-actions .kontakt-book .dash-cta-note{display:none}
@media (max-width: 820px){
  .void-actions .dash-book{padding:8px 12px;font-size:11.5px}
  #void .void-actions{grid-column:1 / -1;order:8}
}
/* Flödesstripen på Hero (kund → Alex → jobb → resultat) är borttagen:
   ikonerna gjorde sidan rörig. Hero fördelar om luften av sig själv. */
.hero-flow{display:none}

/* ── Ordbilden i headern ──────────────────────────────────────────────────
   Logotypbilden är ersatt av text satt som märket: SKYLAND brett spärrat
   med AI SYSTEM under. Den ligger i headern, som är synlig över alla
   sektioner — inklusive Hero — så besökaren ser var hen landat. */
.logo{flex-direction:column;align-items:center;gap:1px;font-family:'Space Grotesk',sans-serif;
  font-style:normal;font-weight:700;letter-spacing:normal;line-height:1}
.logo-word{
  font-size:19px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--primary);animation:markBreathe 4.4s ease-in-out infinite;
  /* Spärrningen lägger ett mellanrum efter sista bokstaven. Utan den här
     kompensationen är rutan bredare än bokstäverna och raderna hamnar en
     halv spärrning fel i förhållande till varandra. */
  margin-right:-.26em;
}
.logo-sub{
  font-size:7.5px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(160,240,205,.72);margin-right:-.42em;
  animation:markBreatheSub 4.4s ease-in-out infinite;
}
@keyframes markBreathe{
  0%,100%{text-shadow:0 0 10px rgba(67,225,155,.34),0 0 24px rgba(12,196,129,.16)}
  50%{text-shadow:0 0 18px rgba(67,225,155,.72),0 0 40px rgba(12,196,129,.4)}
}
@keyframes markBreatheSub{
  0%,100%{opacity:.72;text-shadow:0 0 6px rgba(67,225,155,.18)}
  50%{opacity:1;text-shadow:0 0 12px rgba(67,225,155,.45)}
}
@media (prefers-reduced-motion: reduce){
  .logo-word{animation:none;text-shadow:0 0 14px rgba(67,225,155,.55),0 0 32px rgba(12,196,129,.3)}
  .logo-sub{animation:none}
}
@media (max-width:820px){
  .logo-word{font-size:16px;letter-spacing:.22em;margin-right:-.22em}
  .logo-sub{font-size:6.5px;letter-spacing:.36em;margin-right:-.36em}
}

/* ── Demo: luft under kortet ──────────────────────────────────────────────
   Avataren var sidans högsta block och tryckte bokningsknappen mot kanten.
   Ett mindre tak och tätare radavstånd ger drygt 50 px tillbaka, som lägger
   sig under knappen där de gör nytta. */
@media (max-width: 820px){
  /* Samma avatarkurva som Kontakt — det var den sidan som kändes rätt.
     Och samma komposition: texten till vänster, ansiktet till höger. */
  html.is-scroll #flux{--avatar: clamp(calc(96 * var(--k) * 1px), calc((18.528vh - 26.30px) * var(--k)), 122px)}
  html.is-scroll #flux .flux-columns{grid-template-columns:minmax(0,1fr) var(--avatar)}
  html.is-scroll #flux .flux-right{grid-column:2;grid-row:1}
  html.is-scroll #flux .flux-intro-left{grid-column:1;grid-row:1}
  /* Rutnätet stod på height:100% med space-between och åt därför upp all
     vinst — innehållet fyllde alltid kortet. Naturlig höjd i stället, så
     ligger slacken där den ska: under knappen. */
  html.is-scroll #flux .flux-columns{height:auto;align-content:start;row-gap:clamp(9px, 1.8vh, 16px)}
  /* Knappen förankras i botten med en egen luftrand under sig — då hamnar
     inte hela vinsten som ett hål på höga skärmar. */
  /* Knappen förankras i botten med egen luft både över och under — på
     korta skärmar tog den annars i förvalsknapparna. Orben ger tillbaka
     de pixlarna där; den är rund och tål att krympa. */
  html.is-scroll #flux .flux-book{margin-top:auto;padding-top:clamp(12px, 2.6vh, 24px);
    margin-bottom:clamp(12px, 3.6vh, 42px)}
  @media (max-height: 720px){
    html.is-scroll #flux .orb-wrap{transform:scale(.48);margin:-40px 0}
    html.is-scroll #flux .voice-label h2{font-size:15px}
  }
}

/* ── Demo på desktop: kortet fick inte plats ──────────────────────────────
   Ansiktet är 16:9 och satte radhöjden. På ett 900 px högt fönster blev
   stapeln 70 px för hög och en sida som ska vara låst fick en inre scroll.
   Tre grepp: avsluta-knappen göms tills det finns ett samtal att avsluta
   (samma regel som mobilen redan har), ansiktet tar den höjd som blir
   över, och vänsterspalten drar ihop sig med fönstret i stället för att
   stå kvar på sin fulla höjd. Över ~1000 px fönsterhöjd rör sig
   ingenting — där fanns plats från början. */
@media (min-width: 821px){
  html.is-scroll #flux .voice-panel:has(#starter-panel:not(.hidden)) .voice-btns{display:none}
  html.is-scroll #flux{--avatar-d: min(410px, calc((100vh - 250px) * 0.5625))}
  html.is-scroll #flux .flux-columns{grid-template-columns:minmax(0,1fr) var(--avatar-d)}
  html.is-scroll #flux .flux-right .alex-face{width:var(--avatar-d);max-width:none}
  html.is-scroll #flux .voice-panel{gap:clamp(8px, 2.2vh, 24px)}
  html.is-scroll #flux .flux-intro-left{margin-bottom:clamp(6px, 1.3vh, 12px)}
  html.is-scroll #flux .starter-panel{margin-top:clamp(2px, .7vh, 6px);padding-top:clamp(8px, 1.6vh, 14px)}
  html.is-scroll #flux .flux-book{margin-top:clamp(10px, 2vh, 18px)}
  @media (max-height: 960px){
    html.is-scroll #flux .orb-wrap{transform:scale(.82);margin:-13px 0}
  }
  /* Under ~820 px fönsterhöjd får instruktionsraden ge vika — orben och
     förvalen säger samma sak, och de går inte att korta. */
  @media (max-height: 820px){
    html.is-scroll #flux .intro-how{display:none}
  }
  /* Ett litet fönster på en bred skärm: typografin får gå ner ett snäpp
     hellre än att kortet får en egen scroll. */
  @media (max-height: 760px){
    html.is-scroll #flux .flux-intro-left .intro-h1{font-size:20px;margin-bottom:6px}
    html.is-scroll #flux .flux-intro-left .intro-desc{font-size:12.5px;line-height:1.45;margin-bottom:6px}
    html.is-scroll #flux .intro-kicker{font-size:9.5px}
    html.is-scroll #flux .voice-label h2{font-size:19px}
    html.is-scroll #flux .orb-wrap{transform:scale(.72);margin:-21px 0}
    html.is-scroll #flux .starter-btn{padding:8px 12px;font-size:12px}
  }
}

/* ── Tjänster och Kontakt på desktop: samma kur som Demo ──────────────────
   Sidorna var byggda för ett högt fönster. På en laptop med 700–768 px
   höjd rann korten ut under nederkanten och en låst sida fick en egen
   inre scroll. Ingenting tas bort — luften mellan blocken knyts till
   fönsterhöjden, och det rent dekorativa får ge vika först. Över ~800 px
   rör sig nästan ingenting: där fanns plats från början. */
@media (min-width: 821px){

  /* ---------- TJÄNSTER: bara luft att ge ---------- */
  html.is-scroll #neural .phil-inner{padding-top:clamp(18px, 4vh, 40px);padding-bottom:clamp(18px, 4vh, 40px)}
  html.is-scroll #neural .intro-kicker{margin-bottom:clamp(6px, 1.6vh, 14px)}
  html.is-scroll #neural .svc-grid{margin-top:clamp(10px, 2.6vh, 28px);margin-bottom:clamp(10px, 2.6vh, 28px);
    gap:clamp(8px, 1.6vh, 14px)}
  html.is-scroll #neural .svc-card{padding-top:clamp(10px, 2.2vh, 18px);padding-bottom:clamp(10px, 2.2vh, 18px)}
  html.is-scroll #neural .hero-tag{margin-top:clamp(12px, 3vh, 32px)}

  /* ---------- KONTAKT: kortet får sidans höjd ----------
     Här räckte det inte att klämma luft. Kortet växte med sitt innehåll
     och sköt ut under fönstret, och att krympa avataren gav ingenting —
     svarsrutan är flexibel och åt genast upp vinsten. Nu får kortet exakt
     sidans höjd, och de två elastiska ytorna (meddelandefältet och
     svarsrutan) krymper till det som blir över. Då kan det inte bli för
     högt, per konstruktion, oavsett fönster. */
  html.is-scroll #void .page-glass{height:100%}
  html.is-scroll #void .void-inner{height:100%;max-height:none;min-height:0}
  html.is-scroll #void .form-panel,
  html.is-scroll #void .scan-panel{min-height:0}
  html.is-scroll #void .form-panel form{min-height:0}
  /* Meddelandefältets grupp — den ligger direkt under rutnätet, inte i
     det. (.full sitter på telefonfältet i markup:en.) */
  html.is-scroll #void .form-panel form > .form-group{min-height:0;margin-top:clamp(6px, 2vh, 16px)}
  html.is-scroll #void .form-group textarea{min-height:clamp(40px, 8vh, 120px)}
  html.is-scroll #void .form-group input{min-height:clamp(30px, 4.4vh, 36px)}
  html.is-scroll #void .ai-response{min-height:0;margin-top:clamp(10px, 2.6vh, 24px);
    padding:clamp(12px, 2.6vh, 24px)}
  html.is-scroll #void{--avatar-v: min(220px, calc((100vh - 420px) * 0.5625))}
  html.is-scroll #void .scan-panel .alex-face,
  html.is-scroll #void .alex-face--sm{width:var(--avatar-v);max-width:none;flex:0 0 auto}
  html.is-scroll #void .form-panel{padding-top:clamp(16px, 3.4vh, 40px);padding-bottom:clamp(14px, 3vh, 40px)}
  html.is-scroll #void .scan-panel{padding-top:clamp(16px, 3.4vh, 40px);padding-bottom:clamp(14px, 3vh, 40px)}
  html.is-scroll #void .intro-kicker{margin-bottom:clamp(6px, 1.6vh, 14px)}
  html.is-scroll #void .form-grid{gap:clamp(7px, 1.7vh, 16px)}
  html.is-scroll #void .void-consent{margin:clamp(5px, 1.2vh, 16px) 0}

  /* Under ~760 px fönsterhöjd får det dekorativa ge vika före innehållet. */
  @media (max-height: 760px){
    html.is-scroll #neural .phil-h1{font-size:34px}
    html.is-scroll #void .intro-how{display:none}
    html.is-scroll #void .form-panel h2{font-size:26px}
  }
  /* Ett riktigt litet fönster på en bred skärm: typografin går ner ett
     snäpp till, och signaturraden under tjänsterna får stå över. */
  @media (max-height: 670px){
    html.is-scroll #neural .phil-h1{font-size:27px}
    html.is-scroll #neural .svc-card strong{font-size:14px}
    html.is-scroll #neural .svc-card p{font-size:12.5px;line-height:1.45}
    html.is-scroll #neural .hero-tag{display:none}
    html.is-scroll #void .form-panel h2{font-size:22px}
  }
}

/* ── Till toppen ──────────────────────────────────────────────────────────
   Högerkanten, en bit upp i högertummens båge. Ner-ikonen äger mitten,
   den här kanten — de konkurrerar aldrig. Syns först efter första sidan. */
.scroll-top{
  position:fixed;right:14px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:60;
  width:38px;height:38px;padding:0;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(67,225,155,.42);background:rgba(4,14,9,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--primary);cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:0;pointer-events:none;transform:translateY(6px) scale(.9);
  transition:opacity .35s ease,transform .35s ease;
}
.scroll-top.is-on{opacity:1;pointer-events:auto;transform:none}
.scroll-top:active{background:rgba(67,225,155,.24)}
.scroll-top svg{width:17px;height:17px;filter:drop-shadow(0 0 6px rgba(67,225,155,.7))}
/* Högerkant, lyft en bit upp i tumbågen — men på ett halvgenomskinligt
   fat så att den läser som ett reglage ovanpå kortet, inte som skräp. */
@media (max-width:820px){.scroll-top{right:10px;bottom:calc(4px + env(safe-area-inset-bottom));width:38px;height:38px}}