.svea-pw{position:relative!important;display:block!important;width:100%!important;min-width:0!important}
.svea-pw>input[type="password"],.svea-pw>input[data-svea-password="1"]{
  display:block!important;width:100%!important;min-width:0!important;max-width:none!important;
  box-sizing:border-box!important;padding-right:50px!important
}
.svea-pw-eye{
  position:absolute!important;right:8px!important;top:50%!important;transform:translateY(-50%) scale(1)!important;
  width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:9px!important;
  background:transparent!important;color:#8b95a5!important;box-shadow:none!important;filter:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;z-index:5!important;
  -webkit-appearance:none!important;appearance:none!important;opacity:1!important;
  transition:opacity .18s ease,background-color .18s ease,transform .18s cubic-bezier(.2,.8,.2,1)!important
}
.svea-pw-eye:hover{background:transparent!important;color:#8b95a5!important;opacity:1!important;filter:none!important;transform:translateY(-50%) scale(1.04)!important}
.svea-pw-eye:active{transform:translateY(-50%) scale(.94)!important}
.svea-pw-eye:focus-visible{outline:2px solid rgba(53,109,243,.55)!important;outline-offset:1px!important}
.svea-pw-eye svg{position:absolute!important;width:19px!important;height:19px!important;pointer-events:none!important;
 transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)!important}
.svea-pw-eye .svea-eye-open{opacity:1;transform:scale(1)}
.svea-pw-eye .svea-eye-closed{opacity:0;transform:scale(.72)}
.svea-pw-eye.on .svea-eye-open{opacity:0;transform:scale(.72)}
.svea-pw-eye.on .svea-eye-closed{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){.svea-pw-eye,.svea-pw-eye svg{transition:none!important}}

/* ---- extracted from V186 public head ---- */

:root{--bg:#f3f6fb;--ink:#101a2e;--green:#0b2245;--green2:#123867;--lime:#4f8cff;--muted:#69758a;--line:#dbe3ef;--white:#fff;--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden}button,input,textarea,select{font:inherit}.grain{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5vw;border-bottom:1px solid rgba(0,0,0,.08);position:relative;z-index:20}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-family:Manrope,sans-serif;font-weight:800;font-size:14px;letter-spacing:.11em}.brand-mark{width:31px;height:31px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;font-family:Manrope}.desktop-nav{display:flex;gap:28px}.desktop-nav a{color:inherit;text-decoration:none;font-size:14px}.header-actions{display:flex;align-items:center;gap:10px}.ghost-btn,.primary-btn,.light-btn,.text-btn,.outline-light{border:0;cursor:pointer}.ghost-btn{background:transparent;padding:12px 16px}.primary-btn{background:var(--ink);color:white;padding:15px 22px;border-radius:100px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:22px;font-weight:600}.primary-btn.small{padding:12px 18px}.menu-btn{display:none;border:0;background:none;font-size:24px}.hero{min-height:760px;position:relative;display:grid;grid-template-columns:1.05fr .95fr;padding:82px 4.5vw 72px;gap:50px;overflow:hidden}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,black,transparent)}.hero-content{position:relative;z-index:2;max-width:760px}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px;font-weight:700}.eyebrow span{width:28px;height:1px;background:currentColor}.hero h1,.intro h2,.portal-heading h2,.process h2,.reviews h2,.security h2,.newsletter h2,.faq h2,.cta h2{font-family:Manrope,sans-serif;letter-spacing:-.055em;line-height:.97;margin:24px 0;font-size:clamp(54px,6.7vw,106px)}.hero h1{font-size:clamp(57px,6.5vw,103px)}h1 em,h2 em{font-family:Georgia,serif;font-weight:400}.hero-copy{font-size:19px;line-height:1.6;max-width:650px;color:#58677d}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:35px}.text-btn{background:none;font-weight:600}.hero-proof{display:flex;gap:34px;margin-top:65px;padding-top:24px;border-top:1px solid var(--line);max-width:650px}.hero-proof div{display:flex;gap:9px;align-items:center}.hero-proof b{font-size:11px;color:#999}.hero-proof span{font-size:13px;font-weight:600}.hero-console{position:relative;display:flex;align-items:center;justify-content:center;z-index:2}.window{width:min(690px,100%);background:#0b1c37;border-radius:22px;box-shadow:0 40px 90px rgba(7,25,20,.2);overflow:hidden;transform:perspective(1100px) rotateY(-4deg) rotateX(2deg)}.window-top{height:42px;background:#10284c;display:flex;align-items:center;gap:6px;padding:0 14px;color:#90a2bd}.window-top span{width:7px;height:7px;border-radius:50%;background:#526681}.window-top small{margin:auto;font-size:10px}.dashboard-mini{display:grid;grid-template-columns:58px 1fr;min-height:420px}.mini-sidebar{border-right:1px solid #203b63;display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:28px}.mini-logo{width:28px;height:28px;border:1px solid #4f8cff;color:#4f8cff;border-radius:50%;display:grid;place-items:center}.mini-sidebar i{width:15px;height:15px;border:1px solid #7186a3;border-radius:4px}.mini-sidebar i.active{background:#4f8cff;border-color:#4f8cff}.mini-content{padding:30px;color:white}.mini-head{display:flex;justify-content:space-between;align-items:center}.mini-head div{display:flex;flex-direction:column}.mini-head small{color:#819089}.mini-head strong{font-size:22px}.status{font-size:10px;color:#4f8cff}.mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:27px}.mini-cards article,.chart-card{background:#102a50;border:1px solid #29476f;border-radius:13px;padding:16px;display:flex;flex-direction:column}.mini-cards small,.chart-card small{color:#8296b1}.mini-cards b{font-size:13px;margin:7px 0 15px}.mini-cards span{font-size:10px;color:#4f8cff}.chart-card{margin-top:12px}.chart-card div{display:flex;justify-content:space-between}.chart-card svg{height:150px;color:#4f8cff;margin-top:15px}.float-card{position:absolute;background:white;border-radius:14px;padding:12px 16px;box-shadow:0 18px 45px rgba(0,0,0,.12);display:flex;gap:10px;align-items:center}.float-card>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e7efff}.float-card div{display:flex;flex-direction:column}.float-card small{color:#8390a4}.fc1{left:-10px;bottom:105px}.fc2{right:-6px;top:112px}.logo-strip{min-height:72px;background:#091b37;color:#4f8cff;display:flex;align-items:center;justify-content:space-around;font-family:Manrope;font-weight:700;font-size:12px;letter-spacing:.15em;white-space:nowrap;overflow:hidden}.logo-strip i{font-style:normal}.section{padding-left:4.5vw;padding-right:4.5vw;max-width:1600px;margin:auto}.intro{padding-top:130px;padding-bottom:70px}.section-label{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;border-top:1px solid var(--line);padding-top:16px}.intro-grid{display:grid;grid-template-columns:1.5fr .5fr;gap:100px;align-items:end}.intro h2{font-size:clamp(44px,5.2vw,78px)}h2 span{color:#8a948f}.intro-grid p,.process-head p{color:#65758c;line-height:1.7}.services{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-bottom:140px}.service-card{border:1px solid var(--line);min-height:390px;padding:26px;border-radius:18px;display:flex;flex-direction:column;transition:.3s}.service-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.06)}.service-card.featured{background:var(--green);color:white;border-color:var(--green)}.service-no{font-size:11px;color:#8390a4}.service-icon{font-size:35px;margin:55px 0 20px}.service-card h3{font-family:Manrope;font-size:20px;margin:0 0 15px}.service-card p{font-size:14px;line-height:1.7;color:#6c7672}.service-card.featured p{color:#9ca8a3}.service-card a{margin-top:auto;text-decoration:none;color:inherit;font-weight:600;font-size:13px;display:flex;justify-content:space-between}.dark-section{background:#071a34;color:white;padding:130px 0}.portal-heading{display:grid;grid-template-columns:1fr 340px;gap:100px;align-items:end}.portal-heading h2{font-size:clamp(50px,5vw,82px)}.portal-heading p{color:#8da0bb;line-height:1.7}.eyebrow.muted{color:#9bb0ce}.portal-shell{margin-top:70px;display:grid;grid-template-columns:210px 1fr;min-height:650px}.portal-shell aside{background:#0b2242;border:1px solid #26352f;border-radius:20px 0 0 20px;padding:25px 15px;display:flex;flex-direction:column}.portal-logo{font-family:Manrope;font-weight:800;margin-bottom:40px;padding-left:10px}.portal-logo span{display:inline-grid;place-items:center;border:1px solid #4f8cff;color:#4f8cff;border-radius:50%;width:28px;height:28px;margin-right:8px}.pnav{border:0;background:transparent;color:#8497b1;text-align:left;padding:12px;border-radius:8px;display:flex;gap:10px;cursor:pointer}.pnav.active,.pnav:hover{background:#123766;color:white}.pnav b{margin-left:auto;background:#4f8cff;color:#0b1713;border-radius:20px;padding:1px 7px}.portal-user{margin-top:auto;border-top:1px solid #29476e;padding:18px 8px 0;display:flex;gap:10px}.portal-user>div{width:32px;height:32px;border-radius:50%;background:#dae8ff;color:#13284a;display:grid;place-items:center;font-size:11px}.portal-user span{display:flex;flex-direction:column;font-size:11px}.portal-user small{color:#819089}.portal-main{background:#f5f8fd;color:#14233a;border-radius:0 20px 20px 0;padding:35px;display:none}.portal-main.active{display:block}.portal-top{display:flex;justify-content:space-between;align-items:center}.portal-top small{color:#7c8da6}.portal-top h3{font-family:Manrope;font-size:26px;margin:5px 0}.outline-light{padding:11px 16px;background:white;border:1px solid #cfd9e8;border-radius:9px}.portal-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:35px}.pstat{background:white;border:1px solid #dfe7f2;border-radius:12px;padding:15px;display:flex;gap:10px;align-items:center}.picon{width:37px;height:37px;border-radius:8px;background:#edf3ff;display:grid;place-items:center}.pstat div{display:flex;flex-direction:column;min-width:0}.pstat small{color:#839088}.pstat b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pstat em{font-size:9px;color:#3f73d8;font-style:normal}.pstat button{margin-left:auto;border:0;background:none}.portal-bottom-grid{display:grid;grid-template-columns:1.6fr .7fr;gap:12px;margin-top:12px}.activity-card,.health-card,.settings-box{background:white;border:1px solid #dfe7f2;border-radius:12px;padding:20px}.card-title{display:flex;justify-content:space-between;font-size:12px}.card-title a{color:#5d76a0}.card-title span{color:#3f73d8}.activity{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:15px 0;border-bottom:1px solid #edf1f6}.activity span{width:28px;height:28px;border-radius:50%;background:#edf4ef;display:grid;place-items:center}.activity div{display:flex;flex-direction:column}.activity small,.activity time{font-size:10px;color:#8592a5}.health-ring{width:112px;height:112px;border:8px solid #4f8cff;border-radius:50%;margin:25px auto;display:grid;place-items:center;align-content:center}.health-ring b{font-size:30px}.health-ring small{font-size:10px}.health-row{display:flex;justify-content:space-between;font-size:11px;padding:7px 0}.access-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:30px}.access-grid article{background:white;border:1px solid #dfe7f2;border-radius:13px;padding:25px}.access-grid article>span{font-size:26px}.access-grid h4{margin-bottom:6px}.access-grid p{color:#7d8983;font-size:13px}.access-grid button,.security-list button{border:0;background:#edf3ef;padding:9px 12px;border-radius:8px}.tickets{margin-top:30px}.ticket{background:white;border:1px solid #dfe7f2;border-radius:12px;padding:18px;display:grid;grid-template-columns:10px 1fr auto 20px;gap:15px;align-items:center;margin-bottom:10px}.ticket-status{width:8px;height:8px;border-radius:50%;background:#e4b737}.ticket-status.solved{background:#54a56b}.ticket div{display:flex;flex-direction:column}.ticket small{color:#8497b1}.pill{background:#edf3ff;padding:5px 9px;border-radius:30px;font-size:10px}.pill.done{background:#edf4ff;color:#315fae}.integration-banner{margin-top:30px;background:#0b2244;color:white;border-radius:14px;padding:18px;display:flex;align-items:center;gap:15px}.integration-banner>span{width:44px;height:44px;border-radius:10px;background:#4f8cff;display:grid;place-items:center;font-weight:800}.integration-banner p{margin:4px 0;color:#9baec9}.integration-banner em{margin-left:auto;color:#4f8cff;font-size:11px}.invoice-table{margin-top:15px;background:white;border:1px solid #dfe7f2;border-radius:12px;overflow:hidden}.tr{display:grid;grid-template-columns:repeat(4,1fr);padding:15px;border-top:1px solid #edf1f6;font-size:12px}.tr.head{background:#f0f3f1;color:#7c8983;border-top:0}.paid{color:#376bbd}.security-list{margin-top:30px}.security-list article{background:white;border:1px solid #dfe7f2;border-radius:11px;padding:17px;display:grid;grid-template-columns:35px 1fr auto;align-items:center;margin-bottom:10px}.security-list article>span{color:#3d73c7}.security-list p{margin:3px 0;color:#7a899e;font-size:12px}.security-list em{font-style:normal;font-size:11px;color:#3f72bf}.settings-box{max-width:650px;margin-top:30px;display:grid;gap:15px}.settings-box label,.modal label,.cta label{display:grid;gap:7px;font-size:12px;font-weight:600}.settings-box input,.settings-box select,.modal input,.modal select,.modal textarea,.cta input,.cta select,.cta textarea,.newsletter input{border:1px solid #d7ded9;border-radius:9px;padding:13px;background:white;outline:none}.process{padding-top:135px;padding-bottom:135px}.process-head{display:grid;grid-template-columns:1.25fr .45fr;gap:100px;align-items:end}.process h2{font-size:clamp(45px,5vw,76px)}.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:70px;border-top:1px solid #cfd3cf}.steps article{padding:28px 25px 0 0;position:relative}.steps article b{font-size:11px;color:#8b948f}.step-dot{width:11px;height:11px;border-radius:50%;background:#0b2140;position:absolute;top:-6px}.steps h3{font-family:Manrope;margin-top:45px}.steps p{font-size:13px;line-height:1.65;color:#69736f}.cases{padding-bottom:140px}.case-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:15px;margin-top:50px}.mock{height:510px;border-radius:18px;overflow:hidden;position:relative}.beauty{background:radial-gradient(circle at 70% 40%,#41584e,transparent 25%),linear-gradient(120deg,#0a2140,#143a68);color:#e9d8a5}.fake-nav{padding:22px 28px;font-weight:600;letter-spacing:.08em;font-size:11px;display:flex;justify-content:space-between}.mock-copy{position:absolute;left:8%;bottom:12%}.mock-copy small{letter-spacing:.2em}.mock-copy h3{font-family:Georgia;font-size:65px;font-weight:400;line-height:.9;margin:15px 0}.mock-copy button{border:1px solid #e9d8a5;background:transparent;color:#e9d8a5;border-radius:30px;padding:12px 18px}.corporate{background:#d9ff62;padding:50px;color:#102018}.corp-orb{width:260px;height:260px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,transparent 18%),radial-gradient(circle at center,#2866a9,#0a1e3b 65%);position:absolute;right:-55px;top:60px}.corporate small{letter-spacing:.16em}.corporate h3{font-family:Manrope;font-size:58px;line-height:.92;position:absolute;bottom:40px}.case-meta{display:flex;justify-content:space-between;padding:17px 4px}.case-meta div{display:flex;flex-direction:column}.case-meta span{font-size:12px;color:#7c8681}.reviews{background:#d9ff62}.reviews-inner{padding-top:110px;padding-bottom:110px;display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.reviews h2{font-size:clamp(48px,5vw,78px)}.rating{display:flex;gap:14px;align-items:center}.rating b{font-size:35px}.rating span{letter-spacing:4px}.rating small{color:#526681}.review-track{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.review-track article{background:#f6ffdc;border-radius:18px;padding:30px;display:flex;flex-direction:column;min-height:330px}.stars{letter-spacing:4px}.review-track p{font-family:Manrope;font-size:18px;line-height:1.5}.review-track article>div:last-child{margin-top:auto;display:flex;gap:10px;align-items:center}.review-track article>div:last-child>span{width:38px;height:38px;background:#0a1f3c;color:white;border-radius:50%;display:grid;place-items:center;font-size:11px}.review-track b{display:flex;flex-direction:column}.review-track small{font-weight:400;color:#718071}.security{padding-top:140px;padding-bottom:140px;display:grid;grid-template-columns:1fr 1fr;gap:120px;align-items:center}.security h2{font-size:clamp(48px,5vw,75px)}.security-copy>p{max-width:620px;color:#68798f;line-height:1.7}.policy-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:30px}.policy-links button{background:transparent;border:1px solid var(--line);padding:14px;border-radius:9px;text-align:left;cursor:pointer}.security-visual{height:500px;position:relative;display:grid;place-items:center;background:radial-gradient(circle,#d8e4f4 0,transparent 58%)}.shield{width:150px;height:180px;background:#0c1c17;clip-path:polygon(50% 0,92% 16%,85% 72%,50% 100%,15% 72%,8% 16%);color:#4f8cff;display:grid;place-items:center;font-family:Manrope;font-size:50px;position:relative}.pulse{position:absolute;width:230px;height:230px;border:1px solid #9badc7;border-radius:50%;animation:pulse 2.5s infinite}@keyframes pulse{0%{transform:scale(.65);opacity:1}100%{transform:scale(1.45);opacity:0}}.sec-tag{position:absolute;background:white;padding:12px 14px;border-radius:10px;box-shadow:0 12px 35px rgba(0,0,0,.08);font-size:12px}.t1{left:5%;top:20%}.t2{right:2%;top:27%}.t3{left:0;bottom:23%}.t4{right:1%;bottom:17%}.newsletter{background:#e8e8e1;border-radius:24px;margin-bottom:140px;padding-top:65px;padding-bottom:65px;display:grid;grid-template-columns:1fr 1fr;gap:80px}.newsletter h2{font-size:clamp(40px,4vw,60px);margin:12px 0}.newsletter p{color:#68736e}.newsletter form{display:grid;grid-template-columns:1fr auto;gap:9px;align-content:center}.newsletter form label{grid-column:1/-1;font-size:11px;color:#6c7671}.form-msg{font-size:12px;margin-top:5px}.faq{padding-bottom:140px;display:grid;grid-template-columns:.65fr 1fr;gap:100px}.faq h2{font-size:clamp(48px,5vw,78px)}.faq-list details{border-top:1px solid #ccd1cd;padding:22px 0}.faq-list details:last-child{border-bottom:1px solid #ccd1cd}.faq-list summary{list-style:none;display:flex;justify-content:space-between;font-family:Manrope;font-weight:700;cursor:pointer}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:24px;font-weight:400}.faq-list p{color:#67726d;line-height:1.7;max-width:700px}.cta{background:#091712;color:white;padding:100px max(4.5vw,calc((100vw - 1600px)/2 + 4.5vw));display:grid;grid-template-columns:.8fr 1fr;gap:100px;position:relative;overflow:hidden}.cta-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:#143f76;filter:blur(130px);left:-300px;bottom:-420px}.cta>div,.cta>form{position:relative}.cta small{color:#4f8cff;letter-spacing:.18em}.cta h2{font-size:clamp(55px,6vw,90px)}.cta p{color:#91a4bf}.cta form{display:grid;gap:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cta input,.cta select,.cta textarea{background:#0f2a50;border-color:#31527c;color:white}.cta textarea{resize:vertical}.light-btn{background:#4f8cff;color:#0b1713;border-radius:100px;padding:15px 20px;font-weight:700}.footer-main{padding:70px 4.5vw;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:50px}.footer-main>div{display:flex;flex-direction:column;gap:10px}.footer-main b{font-size:12px;margin-bottom:8px}.footer-main a,.footer-main button{color:#69758a;text-decoration:none;border:0;background:none;text-align:left;padding:0;cursor:pointer}.footer-brand p{max-width:300px;color:#737d78}.socials{display:flex!important;flex-direction:row!important}.socials a{width:34px;height:34px;border:1px solid #cfd4d1;border-radius:50%;display:grid;place-items:center;font-size:10px}.footer-bottom{border-top:1px solid var(--line);padding:22px 4.5vw;display:flex;justify-content:space-between;font-size:11px;color:#79827e}.chat-launch{position:fixed;right:20px;bottom:20px;z-index:70;background:#0c1c17;color:white;border:0;border-radius:15px;padding:11px 15px;display:flex;gap:10px;align-items:center;box-shadow:0 15px 45px rgba(0,0,0,.25);cursor:pointer}.chat-launch>span{width:35px;height:35px;border-radius:50%;background:#4f8cff;color:#0b2140;display:grid;place-items:center}.chat-launch div{display:flex;flex-direction:column;text-align:left}.chat-launch small{color:#9aa7a1}.chat-panel{position:fixed;right:20px;bottom:90px;width:360px;height:520px;background:white;border-radius:18px;box-shadow:0 20px 70px rgba(0,0,0,.25);z-index:80;display:none;overflow:hidden}.chat-panel.open{display:flex;flex-direction:column}.chat-head{background:#0b1b16;color:white;padding:16px;display:flex;justify-content:space-between}.chat-head>div{display:flex;gap:10px}.chat-head span{width:32px;height:32px;border-radius:50%;background:#4f8cff;color:#0b2140;display:grid;place-items:center}.chat-head b,.chat-head small{display:block}.chat-head small{color:#4f8cff}.chat-head button{background:none;border:0;color:white;font-size:24px}.chat-body{flex:1;padding:16px;overflow:auto;background:#f4f6f3}.bot-msg,.user-msg{padding:12px 14px;border-radius:13px;max-width:85%;font-size:13px;line-height:1.5;margin-bottom:10px}.bot-msg{background:white}.user-msg{background:#10241c;color:white;margin-left:auto}.quick{display:flex;gap:6px;flex-wrap:wrap}.quick button{background:#edf1ed;border:1px solid #d5ddd7;border-radius:30px;padding:7px 10px;font-size:11px}.chat-input{display:flex;padding:10px;border-top:1px solid #e1e4e2}.chat-input input{flex:1;border:0;outline:0}.chat-input button{width:35px;height:35px;border:0;border-radius:50%;background:#0b2244;color:white}.ai-note{font-size:9px;color:#8a938f;text-align:center;padding-bottom:7px}.cookie-banner{position:fixed;z-index:90;left:20px;right:20px;bottom:20px;background:#091f3d;color:white;border-radius:15px;padding:18px 20px;display:none;justify-content:space-between;align-items:center;box-shadow:0 20px 70px rgba(0,0,0,.25)}.cookie-banner.show{display:flex}.cookie-banner p{margin:5px 0;color:#9dafc8;font-size:12px}.cookie-banner>div:last-child{display:flex;gap:7px}.ghost-cookie,.accept-cookie{padding:10px 13px;border-radius:8px;border:1px solid #435b7c;background:transparent;color:white}.accept-cookie{background:#4f8cff;color:#0b1713;border-color:#4f8cff}.modal{position:fixed;inset:0;background:rgba(3,10,7,.68);backdrop-filter:blur(10px);display:none;place-items:center;z-index:100;padding:20px}.modal.open{display:grid}.modal-card{background:#f6f8fc;border-radius:20px;padding:34px;width:min(520px,100%);position:relative;max-height:88vh;overflow:auto}.modal-close{position:absolute;right:17px;top:13px;border:0;background:none;font-size:27px;cursor:pointer}.modal-logo{width:50px;height:50px;border-radius:50%;background:#091f3d;color:#4f8cff;display:grid;place-items:center;font-family:Manrope;font-size:20px}.login-card>small,.ticket-card>small{letter-spacing:.14em;color:#66758b}.login-card h3,.ticket-card h3,.preview-card h3{font-family:Manrope;font-size:30px;margin:12px 0}.login-card>p,.preview-card p{color:#6d7a8e;line-height:1.6}.modal form{display:grid;gap:13px}.login-options{display:flex;justify-content:space-between;font-size:11px}.login-options label{display:flex}.demo-hint{color:#8997aa;text-align:center}.ticket-card{width:min(650px,100%)}.policy-card{width:min(780px,100%)}.policy-card h2{font-family:Manrope;font-size:34px}.policy-card h3{margin-top:25px}.policy-card p,.policy-card li{color:#66736c;line-height:1.7}.preview-card{text-align:center}.preview-card .primary-btn{margin:auto}.modal-close-action{border:0}.menu-open .desktop-nav{display:flex}
@media(max-width:1100px){.desktop-nav{display:none;position:absolute;top:88px;left:0;right:0;background:var(--bg);padding:25px;flex-direction:column;border-bottom:1px solid var(--line)}.menu-btn{display:block}.header-actions{margin-left:auto}.hero{grid-template-columns:1fr;padding-top:60px}.hero-console{margin-top:20px}.intro-grid,.portal-heading,.process-head,.reviews-inner,.security,.faq,.cta{grid-template-columns:1fr}.services{grid-template-columns:1fr 1fr}.portal-shell{grid-template-columns:75px 1fr}.portal-shell aside{padding:25px 10px}.portal-logo{font-size:0}.pnav span,.portal-user span{display:none}.portal-stat-grid{grid-template-columns:1fr 1fr}.case-grid{grid-template-columns:1fr}.newsletter{margin-left:4.5vw;margin-right:4.5vw}.footer-main{grid-template-columns:1.5fr 1fr 1fr}.footer-main>div:last-child{grid-column:2}.reviews-inner{gap:30px}}@media(max-width:700px){.site-header{height:72px}.brand{font-size:12px}.header-actions .primary-btn{display:none}.hero{padding-left:20px;padding-right:20px}.hero h1{font-size:52px}.hero-copy{font-size:16px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-proof{gap:15px;flex-wrap:wrap}.window{transform:none}.dashboard-mini{grid-template-columns:44px 1fr;min-height:340px}.mini-content{padding:18px}.mini-cards{grid-template-columns:1fr}.mini-cards article:nth-child(n+2){display:none}.float-card{display:none}.logo-strip{justify-content:flex-start;gap:25px;padding:0 20px}.section{padding-left:20px;padding-right:20px}.intro{padding-top:90px}.intro-grid{gap:10px}.services{grid-template-columns:1fr}.dark-section{padding:90px 0}.portal-shell{padding:0 10px;grid-template-columns:1fr}.portal-shell aside{border-radius:16px 16px 0 0;flex-direction:row;overflow:auto;gap:4px}.portal-logo,.portal-user{display:none}.pnav{white-space:nowrap}.pnav span{display:block}.portal-main{border-radius:0 0 16px 16px;padding:18px}.portal-stat-grid,.portal-bottom-grid,.access-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.mock{height:380px}.fake-nav span{display:none}.mock-copy h3{font-size:48px}.review-track{grid-template-columns:1fr}.review-track article:last-child{display:none}.policy-links{grid-template-columns:1fr}.newsletter{grid-template-columns:1fr;margin-bottom:90px}.newsletter form{grid-template-columns:1fr}.newsletter form button{width:100%}.cta{padding:80px 20px}.form-row{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-main>div:last-child{grid-column:auto}.footer-bottom{gap:12px;flex-direction:column}.chat-panel{left:10px;right:10px;bottom:80px;width:auto}.cookie-banner{flex-direction:column;align-items:flex-start;gap:14px}.cookie-banner>div:last-child{width:100%;flex-wrap:wrap}.cookie-banner button{flex:1}.portal-top{align-items:flex-start;gap:10px;flex-direction:column}.tr{grid-template-columns:1fr 1fr}.tr span:nth-child(2){display:none}.corporate h3{font-size:45px}}

  
/* V11: cleaner hero text — no boxes behind the opening copy */
.hero-content,.hero-content h1,.hero-content .hero-copy,.hero-content .eyebrow,
.hero-proof,.hero-proof>div{
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.hero-content h1,.hero-content .hero-copy,.hero-content .eyebrow{border:0!important}

/* V11: standalone public pages */
body.site-subpage main{min-height:70vh}
body.site-subpage .page-only{display:none!important}
body.site-subpage .public-page-hero{
  display:block;
  padding:84px 4.5vw 42px;
  max-width:1600px;
  margin:0 auto;
}
.public-page-hero{display:none}
.public-page-hero small{
  color:#4f8cff;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.public-page-hero h1{
  font-family:Manrope,sans-serif;
  font-size:clamp(48px,6vw,88px);
  letter-spacing:-.055em;
  line-height:.98;
  margin:16px 0 18px;
}
.public-page-hero p{max-width:720px;color:#65758c;font-size:18px;line-height:1.65}
body.site-subpage .subpage-section{
  display:block!important;
  padding-top:45px!important;
  padding-bottom:110px!important;
}
body.site-subpage .dark-section.subpage-section{
  padding-top:70px!important;
}
.desktop-nav a.active-page{font-weight:800;color:#2f68d8}
@media(max-width:700px){
  body.site-subpage .public-page-hero{padding:54px 20px 25px}
  .public-page-hero h1{font-size:48px}
}


/* =========================
   V12 — Clean Premium System
   ========================= */
:root{
  --bg:#f7f9fc;
  --surface:#ffffff;
  --surface-2:#f0f4fa;
  --ink:#0b1324;
  --muted:#69758a;
  --line:#e3e9f2;
  --blue:#2f6df6;
  --blue-2:#78a5ff;
  --navy:#081b3a;
  --navy-2:#0e2a54;
  --shadow:0 18px 60px rgba(24,50,95,.09);
  --radius:22px;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
}
.grain{display:none!important}

/* Header */
.site-header{
  position:sticky!important;
  top:0;
  z-index:90;
  height:76px;
  padding:0 max(24px,4.5vw);
  background:rgba(247,249,252,.90);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(11,19,36,.07);
}
.brand{
  font-size:13px;
  letter-spacing:.14em;
}
.brand-mark{
  width:32px;height:32px;
  border-color:var(--blue);
  color:var(--blue);
}
.desktop-nav{gap:8px}
.desktop-nav a{
  padding:10px 13px;
  border-radius:999px;
  color:#46546b;
  font-size:13px;
  font-weight:600;
  transition:.2s ease;
}
.desktop-nav a:hover,.desktop-nav a.active-page{
  color:var(--ink);
  background:#eaf0fa;
}
.header-actions{gap:8px}
.ghost-btn{
  color:#394960;
  font-weight:600;
  border-radius:999px;
}
.ghost-btn:hover{background:#eaf0fa}
.primary-btn,.light-btn{
  background:var(--ink)!important;
  color:white!important;
  border-radius:999px!important;
  box-shadow:none!important;
  font-weight:700!important;
  transition:transform .2s ease,background .2s ease;
}
.primary-btn:hover,.light-btn:hover{transform:translateY(-1px);background:#15223b!important}

/* Hero */
.hero{
  min-height:auto!important;
  padding:88px max(24px,4.5vw) 96px!important;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.78fr)!important;
  gap:80px!important;
  max-width:1600px;
  margin:auto;
  align-items:center;
}
.hero-grid{
  background-image:
    radial-gradient(circle at 15% 10%,rgba(47,109,246,.10),transparent 32%),
    radial-gradient(circle at 82% 28%,rgba(120,165,255,.10),transparent 28%)!important;
  background-size:auto!important;
  mask-image:none!important;
}
.hero-content{max-width:770px}
.eyebrow{
  color:#47617f;
  font-size:11px;
  letter-spacing:.16em;
}
.eyebrow span{background:var(--blue)}
.hero h1{
  font-size:clamp(54px,6.1vw,94px)!important;
  line-height:.98!important;
  letter-spacing:-.06em!important;
  margin:20px 0 24px!important;
  max-width:880px;
}
.hero h1 em{
  color:var(--blue);
  font-family:Manrope,sans-serif!important;
  font-style:normal;
  font-weight:700;
}
.hero-copy{
  color:#58677d!important;
  font-size:18px!important;
  max-width:650px;
  line-height:1.7!important;
}
.hero-actions{gap:14px!important;margin-top:32px!important}
.hero-actions .text-btn{
  padding:13px 16px;
  border-radius:999px;
  color:#31435d;
}
.hero-actions .text-btn:hover{background:#eaf0fa}
.hero-proof{
  margin-top:44px!important;
  padding-top:20px!important;
  gap:24px!important;
  border-color:var(--line)!important;
}
.hero-proof div{gap:7px!important}
.hero-proof b{color:var(--blue)!important}
.hero-proof span{font-size:12px!important;color:#526177}

/* Hero visual: simplify */
.hero-console{justify-content:flex-end!important}
.window{
  transform:none!important;
  border-radius:24px!important;
  background:var(--navy)!important;
  box-shadow:0 30px 80px rgba(10,32,70,.20)!important;
  border:1px solid rgba(255,255,255,.08);
}
.window-top{background:#0d2549!important}
.dashboard-mini{min-height:390px!important}
.mini-content{padding:28px!important}
.mini-cards article,.chart-card{
  background:#102d58!important;
  border-color:#21477a!important;
}
.float-card{display:none!important}

/* Remove ticker clutter */
.logo-strip{display:none!important}

/* General sections */
.section{
  max-width:1440px!important;
  padding-left:max(24px,4.5vw)!important;
  padding-right:max(24px,4.5vw)!important;
}
.intro{
  padding-top:100px!important;
  padding-bottom:48px!important;
}
.section-label{
  border:0!important;
  padding:0!important;
  color:#63738b;
  font-size:11px!important;
}
.intro-grid{
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.55fr)!important;
  gap:70px!important;
}
.intro h2{
  font-size:clamp(42px,4.8vw,72px)!important;
  line-height:1.02!important;
}
.intro h2 span,.process h2 span,.faq h2 span,.security h2 span{color:#76869e!important}

/* Services */
.services{
  gap:16px!important;
  padding-bottom:110px!important;
}
.service-card{
  min-height:320px!important;
  background:var(--surface);
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  padding:26px!important;
  box-shadow:none!important;
}
.service-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:var(--shadow)!important;
}
.service-card.featured{
  background:var(--navy)!important;
  border-color:var(--navy)!important;
}
.service-icon{
  margin:34px 0 18px!important;
  color:var(--blue);
  font-size:29px!important;
}
.service-card.featured .service-icon{color:#8fb2ff}
.service-card h3{font-size:19px!important}
.service-card p{color:#67758a!important;line-height:1.65!important}
.service-card.featured p{color:#aab9d2!important}
.service-card a{color:#2f6df6!important}
.service-card.featured a{color:#a9c3ff!important}

/* Client Hub promo */
.dark-section{
  background:var(--navy)!important;
  padding:100px 0!important;
}
.portal-heading{
  grid-template-columns:minmax(0,1fr) 360px!important;
  gap:70px!important;
}
.portal-heading h2{
  font-size:clamp(46px,5vw,76px)!important;
  margin:16px 0!important;
}
.portal-shell{
  margin-top:48px!important;
  min-height:560px!important;
  grid-template-columns:190px 1fr!important;
}
.portal-shell aside{
  background:#0c2548!important;
  border-color:#214066!important;
  border-radius:18px 0 0 18px!important;
}
.portal-main{
  border-radius:0 18px 18px 0!important;
  padding:28px!important;
}
.portal-stat-grid{gap:10px!important;margin-top:24px!important}
.pstat,.activity-card,.health-card,.settings-box,.access-grid article,.ticket,.invoice-table,.security-list article{
  border-color:#e2e8f1!important;
  box-shadow:none!important;
}
.health-ring{border-color:var(--blue)!important}

/* Process */
.process{
  padding-top:110px!important;
  padding-bottom:110px!important;
}
.process-head{gap:70px!important}
.process h2{font-size:clamp(44px,4.8vw,72px)!important}
.steps{margin-top:52px!important}
.steps article{padding-right:38px!important}
.step-dot{background:var(--blue)!important}

/* Cases */
.cases{padding-bottom:110px!important}
.case-grid{gap:18px!important;margin-top:38px!important}
.mock{height:430px!important;border-radius:20px!important}
.beauty{
  background:
    radial-gradient(circle at 70% 40%,rgba(98,150,255,.28),transparent 28%),
    linear-gradient(120deg,#071d3e,#174c88)!important;
}
.corporate{
  background:linear-gradient(135deg,#cfe0ff,#8cb6ff)!important;
}
.corp-orb{
  background:
    radial-gradient(circle at 35% 35%,#fff,transparent 18%),
    radial-gradient(circle at center,#4e8be9,#123d79 65%)!important;
}

/* Reviews: calmer */
.reviews{
  background:#eaf1ff!important;
}
.reviews-inner{
  padding-top:90px!important;
  padding-bottom:90px!important;
  gap:60px!important;
}
.review-track article{
  background:white!important;
  min-height:280px!important;
  border:1px solid #dfe7f2;
}
.review-track p{font-size:17px!important}

/* Security */
.security{
  padding-top:110px!important;
  padding-bottom:110px!important;
  gap:80px!important;
}
.security-visual{
  height:430px!important;
  background:radial-gradient(circle,rgba(47,109,246,.13),transparent 60%)!important;
}
.shield{background:var(--navy)!important;color:#7fa8ff!important}

/* Newsletter */
.newsletter{
  background:#edf3fc!important;
  margin-bottom:110px!important;
  padding-top:56px!important;
  padding-bottom:56px!important;
  gap:60px!important;
}
.newsletter h2{font-size:clamp(38px,4vw,56px)!important}

/* FAQ */
.faq{
  padding-bottom:110px!important;
  gap:80px!important;
}
.faq h2{font-size:clamp(44px,4.8vw,70px)!important}
.faq-list details{padding:20px 0!important}

/* Contact */
.cta{
  background:var(--navy)!important;
  padding-top:90px!important;
  padding-bottom:90px!important;
  gap:80px!important;
}
.cta-glow{
  background:#164f9f!important;
  opacity:.28;
}
.cta h2{font-size:clamp(50px,5.4vw,80px)!important}
.cta small{color:#83a9ff!important}
.cta input,.cta select,.cta textarea{
  background:#0d2a53!important;
  border-color:#2a4d79!important;
}
.cta input:focus,.cta select:focus,.cta textarea:focus{
  border-color:#78a5ff!important;
  outline:2px solid rgba(120,165,255,.15);
}

/* Footer */
.footer-main{
  max-width:1440px;
  margin:auto;
  padding-top:62px!important;
  padding-bottom:62px!important;
}
.footer-main a,.footer-main button{color:#68778d!important}
.socials a{border-color:#d7e0ec!important}
.footer-bottom{border-color:var(--line)!important}

/* Login / modal */
.modal{
  background:rgba(10,21,42,.60)!important;
  backdrop-filter:blur(14px)!important;
}
.modal-card{
  background:#fff!important;
  border-radius:24px!important;
  box-shadow:0 30px 100px rgba(13,31,66,.22)!important;
  border:1px solid rgba(15,31,60,.07);
}
.modal-logo{
  background:var(--navy)!important;
  color:#8db0ff!important;
}
.login-card h3,.ticket-card h3,.preview-card h3{letter-spacing:-.035em!important}
.modal input,.modal select,.modal textarea{
  border-radius:12px!important;
  border-color:#dbe3ef!important;
  padding:14px!important;
}
.modal input:focus,.modal select:focus,.modal textarea:focus{
  border-color:#7ea6ff!important;
  outline:3px solid rgba(47,109,246,.10)!important;
}

/* Chat toned down */
.chat-launch{
  background:var(--navy)!important;
  border-radius:999px!important;
}
.chat-launch>span{background:#4f8cff!important;color:white!important}
.chat-head{background:var(--navy)!important}
.chat-head span{background:#4f8cff!important;color:white!important}
.user-msg{background:#153b73!important}

/* Subpages */
body.site-subpage .public-page-hero{
  padding-top:78px!important;
  padding-bottom:34px!important;
}
.public-page-hero small{color:var(--blue)!important}
.public-page-hero h1{
  max-width:880px;
  font-size:clamp(48px,5.5vw,80px)!important;
}
.public-page-hero p{color:#64748a!important}
body.site-subpage .subpage-section{
  padding-top:28px!important;
  padding-bottom:100px!important;
}

/* Responsive */
@media(max-width:1100px){
  .hero{
    grid-template-columns:1fr!important;
    gap:46px!important;
    padding-top:64px!important;
  }
  .hero-console{justify-content:center!important}
  .window{max-width:760px}
  .intro-grid,.portal-heading,.process-head,.reviews-inner,.security,.faq,.cta{
    grid-template-columns:1fr!important;
  }
  .services{grid-template-columns:repeat(2,1fr)!important}
  .portal-shell{grid-template-columns:76px 1fr!important}
}
@media(max-width:700px){
  .site-header{height:68px!important;padding:0 18px!important}
  .hero{padding:54px 20px 70px!important}
  .hero h1{font-size:47px!important}
  .hero-copy{font-size:16px!important}
  .hero-actions{align-items:stretch!important}
  .hero-actions .primary-btn,.hero-actions .text-btn{width:100%;justify-content:center}
  .hero-proof{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .window{border-radius:18px!important}
  .dashboard-mini{grid-template-columns:44px 1fr!important}
  .mini-content{padding:17px!important}
  .services{grid-template-columns:1fr!important}
  .service-card{min-height:auto!important}
  .portal-shell{grid-template-columns:1fr!important;padding:0 14px!important}
  .portal-shell aside{border-radius:16px 16px 0 0!important}
  .portal-main{border-radius:0 0 16px 16px!important}
  .portal-heading{padding-left:20px!important;padding-right:20px!important}
  .steps{grid-template-columns:1fr!important}
  .steps article{padding:20px 0 26px!important}
  .step-dot{display:none}
  .case-grid{grid-template-columns:1fr!important}
  .mock{height:340px!important}
  .newsletter{margin-left:18px!important;margin-right:18px!important}
  .footer-main{grid-template-columns:1fr 1fr!important}
  .footer-brand{grid-column:1/-1!important}
}


/* =========================================================
   MOBILE OPTIMIZATION — public website
   ========================================================= */
@media(max-width:780px){
  html,body{max-width:100%;overflow-x:hidden!important}
  body{font-size:15px!important}

  .site-header{
    height:66px!important;
    padding:0 16px!important;
    gap:10px!important;
  }
  .brand{font-size:11px!important;letter-spacing:.12em!important}
  .brand-mark{width:30px!important;height:30px!important}
  .desktop-nav{display:none!important}
  .header-actions{
    margin-left:auto!important;
    gap:6px!important;
  }
  .header-actions .ghost-btn{
    padding:9px 11px!important;
    font-size:11px!important;
  }
  .header-actions .primary-btn{
    padding:10px 13px!important;
    font-size:11px!important;
  }

  .hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:34px!important;
    min-height:auto!important;
    padding:44px 18px 64px!important;
    overflow:hidden!important;
  }
  .hero-content{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  .eyebrow{
    font-size:9px!important;
    letter-spacing:.14em!important;
  }
  .hero h1{
    font-size:44px!important;
    line-height:1.02!important;
    letter-spacing:-.045em!important;
    max-width:100%!important;
    margin:16px 0 20px!important;
    overflow-wrap:break-word!important;
  }
  .hero h1 em{
    font-size:34px!important;
    line-height:1.05!important;
  }
  .hero-copy{
    font-size:16px!important;
    line-height:1.6!important;
    max-width:100%!important;
  }
  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:24px!important;
  }
  .hero-actions .primary-btn,
  .hero-actions .text-btn{
    width:100%!important;
    justify-content:center!important;
    text-align:center!important;
    min-height:50px!important;
  }
  .hero-proof{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-top:28px!important;
    padding-top:18px!important;
  }
  .hero-proof div{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:10px!important;
  }

  /* Dashboard preview: mobile-safe */
  .hero-console{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    justify-content:center!important;
    overflow:visible!important;
  }
  .hero-console .window{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    border-radius:18px!important;
    transform:none!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .hero-console .window-top{
    height:40px!important;
    padding:0 12px!important;
    font-size:9px!important;
  }
  .hero-console .dashboard-mini{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .hero-console .mini-sidebar{
    width:42px!important;
    min-width:42px!important;
    padding:14px 5px!important;
  }
  .hero-console .mini-sidebar .mini-logo{
    width:28px!important;height:28px!important;font-size:12px!important;
  }
  .hero-console .mini-sidebar i{
    width:16px!important;height:16px!important;margin-top:18px!important;
  }
  .hero-console .mini-content{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:16px 12px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .hero-console .mini-head{
    gap:4px!important;
    margin-bottom:12px!important;
  }
  .hero-console .mini-head small{font-size:10px!important}
  .hero-console .mini-head strong{font-size:18px!important}
  .hero-console .mini-cards{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .hero-console .mini-cards article,
  .hero-console .mini-cards article:nth-child(3){
    grid-column:auto!important;
    width:100%!important;
    min-width:0!important;
    padding:11px 12px!important;
    box-sizing:border-box!important;
  }
  .hero-console .mini-cards article small{font-size:10px!important}
  .hero-console .mini-cards article b{
    font-size:12px!important;
    white-space:normal!important;
  }
  .hero-console .mini-cards article span{font-size:9px!important}
  .hero-console .chart-card{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin-top:9px!important;
    padding:12px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .hero-console .chart-card>div{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px!important;
  }
  .hero-console .chart-card>div small{font-size:10px!important}
  .hero-console .chart-card>div b{font-size:10px!important;white-space:nowrap!important}
  .hero-console .chart-card svg{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:105px!important;
    overflow:hidden!important;
  }

  .section,
  .dark-section,
  .reviews,
  .newsletter,
  .cta{
    width:100%!important;
    max-width:100%!important;
    padding-left:18px!important;
    padding-right:18px!important;
    box-sizing:border-box!important;
  }
  .section{padding-top:70px!important;padding-bottom:70px!important}

  .intro-grid,
  .portal-heading,
  .process-head,
  .reviews-inner,
  .security,
  .faq,
  .cta,
  .newsletter{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .intro h2,
  .portal-heading h2,
  .process h2,
  .security h2,
  .faq h2,
  .cta h2,
  .newsletter h2{
    font-size:38px!important;
    line-height:1.05!important;
    overflow-wrap:break-word!important;
  }

  .services{grid-template-columns:1fr!important;gap:12px!important}
  .service-card{
    min-height:auto!important;
    padding:22px!important;
  }

  .portal-shell{
    grid-template-columns:1fr!important;
    padding:0!important;
    min-height:auto!important;
  }
  .portal-shell aside{
    display:none!important;
  }
  .portal-main{
    border-radius:16px!important;
    padding:16px!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .portal-stat-grid{grid-template-columns:1fr!important}
  .portal-panels{grid-template-columns:1fr!important}
  .invoice-table{overflow:auto!important}

  .steps{
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  .steps article{
    padding:20px 0!important;
    border-bottom:1px solid rgba(0,0,0,.08)!important;
  }
  .step-dot{display:none!important}

  .case-grid{grid-template-columns:1fr!important}
  .mock{height:300px!important}

  .review-track{
    grid-auto-columns:88%!important;
    gap:12px!important;
  }

  .security-visual{height:300px!important}

  .newsletter{
    margin:0 18px 70px!important;
    width:calc(100% - 36px)!important;
    padding:28px 20px!important;
  }
  .newsletter-form{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .faq{padding-bottom:70px!important}
  .faq-list summary{
    font-size:15px!important;
    gap:12px!important;
  }

  .cta{
    padding-top:60px!important;
    padding-bottom:60px!important;
  }
  .cta-form{width:100%!important}
  .form-grid{grid-template-columns:1fr!important}
  .cta input,.cta select,.cta textarea{
    font-size:16px!important; /* prevents iOS zoom */
  }

  .footer-main{
    grid-template-columns:1fr 1fr!important;
    gap:30px 18px!important;
    padding:42px 18px!important;
  }
  .footer-brand{grid-column:1/-1!important}
  .footer-bottom{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
    padding:20px 18px!important;
  }

  .modal{
    padding:12px!important;
    align-items:center!important;
  }
  .modal-card{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100vh - 24px)!important;
    overflow-y:auto!important;
    border-radius:18px!important;
    padding:24px 18px!important;
  }
  .modal input,.modal select,.modal textarea{font-size:16px!important}

  .chat-launch{
    right:12px!important;
    bottom:12px!important;
    max-width:calc(100vw - 24px)!important;
    padding:10px 12px!important;
  }
  .chat-launch div small{display:none!important}
  .chat-panel{
    left:12px!important;
    right:12px!important;
    bottom:72px!important;
    width:auto!important;
    max-width:none!important;
    height:min(560px,calc(100vh - 95px))!important;
  }
}

@media(max-width:420px){
  .site-header .brand span:last-child{font-size:10px!important}
  .header-actions .ghost-btn{display:none!important}
  .hero h1{font-size:39px!important}
  .hero h1 em{font-size:30px!important}
  .intro h2,.portal-heading h2,.process h2,.security h2,.faq h2,.cta h2,.newsletter h2{font-size:34px!important}
  .footer-main{grid-template-columns:1fr!important}
}


/* =========================================================
   FINAL DESKTOP HERO — exact title hierarchy + full card
   ========================================================= */
@media(min-width:1101px){
  .hero{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:1480px!important;
    margin:0 auto!important;
    padding:82px 34px 86px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 570px!important;
    gap:54px!important;
    align-items:center!important;
    overflow:visible!important;
  }

  .hero-content{
    min-width:0!important;
    max-width:760px!important;
  }

  /* Exactly two lines. Second sentence = 20px smaller. */
  .hero-title-final{
    display:block!important;
    margin:20px 0 24px!important;
    max-width:720px!important;
    line-height:1!important;
    letter-spacing:-.05em!important;
  }
  .hero-title-final > span{
    display:block!important;
    font-family:Manrope,sans-serif!important;
    font-size:60px!important;
    line-height:1.02!important;
    font-weight:700!important;
    font-style:normal!important;
    color:#0b1324!important;
    white-space:nowrap!important;
  }
  .hero-title-final > em{
    display:block!important;
    margin-top:9px!important;
    font-family:Georgia,serif!important;
    font-size:40px!important;
    line-height:1.05!important;
    font-weight:400!important;
    font-style:italic!important;
    letter-spacing:-.022em!important;
    color:#4f8cff!important;
    white-space:nowrap!important;
  }

  /* Fixed, fully-contained dashboard visual */
  .hero-console{
    box-sizing:border-box!important;
    width:570px!important;
    max-width:570px!important;
    min-width:570px!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
  }
  .hero-console .window{
    box-sizing:border-box!important;
    width:570px!important;
    max-width:570px!important;
    min-width:570px!important;
    margin:0!important;
    transform:none!important;
    overflow:hidden!important;
    border-radius:22px!important;
  }
  .hero-console .window-top{
    box-sizing:border-box!important;
    width:100%!important;
  }

  .hero-console .dashboard-mini{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .hero-console .mini-sidebar{
    box-sizing:border-box!important;
    width:52px!important;
    min-width:52px!important;
    padding:18px 0!important;
  }
  .hero-console .mini-content{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:24px 18px 20px!important;
    overflow:hidden!important;
  }

  .hero-console .mini-head{
    width:100%!important;
    min-width:0!important;
    gap:10px!important;
  }
  .hero-console .mini-head strong{
    font-size:20px!important;
  }
  .hero-console .status{
    display:none!important;
  }

  .hero-console .mini-cards{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin-top:22px!important;
    overflow:hidden!important;
  }
  .hero-console .mini-cards article,
  .hero-console .mini-cards article:nth-child(3){
    box-sizing:border-box!important;
    grid-column:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:12px 10px!important;
    overflow:hidden!important;
  }
  .hero-console .mini-cards article small{
    font-size:10px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .hero-console .mini-cards article b{
    display:block!important;
    max-width:100%!important;
    margin:5px 0 11px!important;
    font-size:11px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .hero-console .mini-cards article span{
    font-size:9px!important;
    white-space:nowrap!important;
  }

  .hero-console .chart-card{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-top:10px!important;
    padding:13px!important;
    overflow:hidden!important;
  }
  .hero-console .chart-card > div{
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
  }
  .hero-console .chart-card > div small{
    min-width:0!important;
    font-size:10px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .hero-console .chart-card > div b{
    flex:0 0 auto!important;
    margin:0!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }
  .hero-console .chart-card svg{
    box-sizing:border-box!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:132px!important;
    margin-top:10px!important;
    overflow:hidden!important;
  }
}

/* Slightly smaller desktop/laptop, but still two-line title + full card */
@media(min-width:1101px) and (max-width:1300px){
  .hero{
    max-width:1240px!important;
    grid-template-columns:minmax(0,1fr) 520px!important;
    gap:34px!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }
  .hero-title-final > span{font-size:56px!important}
  .hero-title-final > em{font-size:36px!important}
  .hero-console,
  .hero-console .window{
    width:520px!important;
    max-width:520px!important;
    min-width:520px!important;
  }
  .hero-console .mini-content{padding:20px 14px 18px!important}
}


/* =========================================================
   FIRST SCREEN CLEAN
   - Hero fills first viewport
   - Next section is not visible initially
   - Scrolling still works
   - Scrollbar is hidden
   ========================================================= */

/* Hide scrollbar but keep scroll functionality */
html, body{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}

/* Desktop: make first screen self-contained */
@media(min-width:1101px){
  .hero{
    min-height:calc(100vh - 76px)!important;
    padding-top:54px!important;
    padding-bottom:54px!important;
    align-content:center!important;
    box-sizing:border-box!important;
  }
}

/* Tablet/mobile */
@media(max-width:1100px){
  .hero{
    min-height:calc(100svh - 66px)!important;
    align-content:center!important;
    box-sizing:border-box!important;
  }
}


/* ===== V13: SEPARATE PUBLIC PAGES ===== */
body.subpage-mode .hero,
body.subpage-mode #home,
body.subpage-mode #hem{
  display:none!important;
}
body.subpage-mode main > section,
body.subpage-mode main > div.section,
body.subpage-mode .page-section{
  display:none;
}
body.subpage-mode main > .active-page-section{
  display:block!important;
}
body.subpage-mode footer{
  display:block!important;
}
body.subpage-mode .active-page-section{
  min-height:calc(100vh - 76px - 330px);
  padding-top:90px!important;
  padding-bottom:90px!important;
}
@media(max-width:780px){
  body.subpage-mode .active-page-section{
    min-height:auto;
    padding-top:55px!important;
    padding-bottom:65px!important;
  }
}

.login-create-links{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;font-family:Manrope,sans-serif;font-size:14px;font-weight:800}.login-create-links a{color:#34413b;text-decoration:none}.login-create-links a:hover{text-decoration:underline}.login-create-links span{color:#a5ada9}.login-card h3{margin-top:0!important}
.login-create-links{
  margin-top:10px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
}
.login-create-links a{
  font-size:12px!important;
  line-height:1.4!important;
  font-weight:500!important;
  color:#8a9490!important;
  text-decoration:none!important;
}
.login-create-links a:hover{
  color:#34413b!important;
  text-decoration:underline!important;
}


.public-banner{background:#000;color:#fff;text-align:center;padding:10px 18px;font:700 13px/1.4 "DM Sans",sans-serif;letter-spacing:.01em;position:relative;z-index:120}
@media(max-width:700px){.public-banner{padding:9px 12px;font-size:12px}}

/* V23 — public header logo */
.site-header .brand-logo-only{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  padding:0!important;
  margin:0!important;
  text-decoration:none!important;
}
.site-header .brand-logo-only img{
  display:block!important;
  width:auto!important;
  height:34px!important;
  max-width:210px!important;
  object-fit:contain!important;
}
@media(max-width:700px){
  .site-header .brand-logo-only img{
    height:28px!important;
    max-width:160px!important;
  }
}


/* V24 — textlogo i publika headern */
.site-header .brand-text-logo{
  display:flex!important;
  align-items:center!important;
  color:#000!important;
  font-family:inherit!important;
  font-size:29px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:-0.5px!important;
  text-transform:none!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.site-header .brand-text-logo:hover{
  color:#000!important;
}
@media(max-width:700px){
  .site-header .brand-text-logo{
    font-size:24px!important;
  }
}


/* V27 — iOS-inspired floating mobile hamburger */
@media(max-width:780px){
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:150!important;
    background:rgba(247,249,252,.78)!important;
    backdrop-filter:blur(18px) saturate(1.15)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.15)!important;
  }

  .ios-menu-btn{
    display:flex!important;
    position:fixed!important;
    top:14px!important;
    right:14px!important;
    z-index:220!important;
    width:48px!important;
    height:48px!important;
    border-radius:18px!important;
    border:1px solid rgba(255,255,255,.55)!important;
    background:rgba(255,255,255,.72)!important;
    box-shadow:
      0 10px 30px rgba(15,25,45,.14),
      inset 0 1px 0 rgba(255,255,255,.75)!important;
    backdrop-filter:blur(18px) saturate(1.25)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.25)!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    flex-direction:column!important;
    padding:0!important;
    color:#111!important;
    cursor:pointer!important;
  }
  .ios-menu-btn span{
    display:block!important;
    width:18px!important;
    height:2px!important;
    border-radius:999px!important;
    background:#111!important;
    transition:transform .22s ease,opacity .22s ease!important;
  }
  .ios-menu-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)!important}
  .ios-menu-btn.open span:nth-child(2){opacity:0!important}
  .ios-menu-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important}

  .mobile-menu-panel{
    position:fixed!important;
    inset:0!important;
    z-index:210!important;
    display:none!important;
    align-items:flex-start!important;
    justify-content:flex-end!important;
    padding:74px 12px 12px!important;
    background:rgba(10,18,34,.16)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
  }
  .mobile-menu-panel.open{display:flex!important}
  .mobile-menu-sheet{
    width:min(320px,calc(100vw - 24px))!important;
    border-radius:24px!important;
    padding:16px!important;
    background:rgba(255,255,255,.88)!important;
    border:1px solid rgba(255,255,255,.65)!important;
    box-shadow:0 24px 70px rgba(8,20,45,.20)!important;
    backdrop-filter:blur(22px) saturate(1.2)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.2)!important;
  }
  .mobile-menu-sheet nav{
    display:grid!important;
    gap:6px!important;
  }
  .mobile-menu-sheet nav a,
  .mobile-portal-link{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:46px!important;
    padding:0 14px!important;
    border-radius:14px!important;
    color:#111!important;
    text-decoration:none!important;
    font-family:Manrope,sans-serif!important;
    font-size:15px!important;
    font-weight:700!important;
    background:transparent!important;
    border:0!important;
    width:100%!important;
    text-align:left!important;
  }
  .mobile-menu-sheet nav a:hover,
  .mobile-portal-link:hover{
    background:rgba(0,0,0,.055)!important;
  }
  .mobile-portal-link{
    margin-top:8px!important;
    background:#000!important;
    color:#fff!important;
    justify-content:center!important;
  }

  /* Hide old mobile nav presentation so only the floating menu is used */
  body.menu-open .desktop-nav,
  .menu-open .desktop-nav{
    display:none!important;
  }
}

@media(min-width:781px){
  .ios-menu-btn,.mobile-menu-panel{display:none!important}
}


/* V28 — force the mobile menu bubble to stay fixed to the viewport */
@media(max-width:780px){
  .ios-menu-btn{
    position:fixed!important;
    top:14px!important;
    right:14px!important;
    left:auto!important;
    bottom:auto!important;
    transform:none!important;
    margin:0!important;
    z-index:99999!important;
    isolation:isolate!important;
  }

  /* Prevent any transformed ancestor from trapping fixed positioning */
  .site-header,
  header,
  body,
  html{
    transform:none!important;
    filter:none!important;
    perspective:none!important;
  }

  .mobile-menu-panel{
    position:fixed!important;
    inset:0!important;
    z-index:99998!important;
  }
}


/* =========================================================
   V30 — balanced scroll animations
   Safe by default: footer/content never depend on JS.
   ========================================================= */
.reveal-up,.reveal-soft,.reveal-left,.reveal-right,.reveal-pop,.reveal-icon{opacity:1;transform:none}
html.motion-ready .reveal-up:not(.motion-in){opacity:0;transform:translateY(28px)}
html.motion-ready .reveal-soft:not(.motion-in){opacity:0;transform:translateY(18px) scale(.985)}
html.motion-ready .reveal-left:not(.motion-in){opacity:0;transform:translateX(-26px)}
html.motion-ready .reveal-right:not(.motion-in){opacity:0;transform:translateX(26px)}
html.motion-ready .reveal-pop:not(.motion-in){opacity:0;transform:translateY(10px) scale(.96)}
html.motion-ready .reveal-icon:not(.motion-in){opacity:.25;transform:scale(.85) rotate(-4deg)}
.reveal-up,.reveal-soft,.reveal-left,.reveal-right,.reveal-pop,.reveal-icon{
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--delay,0ms)
}
.motion-in{opacity:1!important;transform:none!important}
.motion-line{position:relative}
.motion-line::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;opacity:.14;
  transition:width .9s cubic-bezier(.22,.61,.36,1)
}
.motion-line.motion-in::after{width:100%}
.service-card,.case,.review-track article,.security-list article,.portal-shell,.pstat{
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease!important
}
@media(hover:hover){
  .service-card:hover,.case:hover,.review-track article:hover,.security-list article:hover{transform:translateY(-4px)!important}
  .primary-btn:hover,.light-btn:hover{transform:translateY(-2px)!important}
}
.section-label.motion-in,.eyebrow.motion-in{animation:labelSettle .65s ease both}
@keyframes labelSettle{from{letter-spacing:.18em;opacity:.45}to{letter-spacing:.13em;opacity:1}}
footer,.footer-main,.footer-main>div,.footer-bottom{opacity:1!important;transform:none!important;visibility:visible!important}
@media(prefers-reduced-motion:reduce){
  html.motion-ready .reveal-up,html.motion-ready .reveal-soft,html.motion-ready .reveal-left,
  html.motion-ready .reveal-right,html.motion-ready .reveal-pop,html.motion-ready .reveal-icon{
    opacity:1!important;transform:none!important;transition:none!important
  }
  .motion-line::after{width:100%!important;transition:none!important}
}


/* V31 — requested hero refinements */
@media (min-width: 901px){
  .hero-title .accent,
  .hero h1 em,
  .hero h1 i{
    font-style:normal!important;
  }

  /* Move the lower hero action/benefit area down a little */
  .hero-actions{
    margin-top:42px!important;
  }
  .hero-proof,
  .hero-features,
  .hero-meta{
    margin-top:42px!important;
  }
}


/* V32 — match "Ett starkare företag." to the muted gray used in "digitala motor." */
@media (min-width: 901px){
  .hero-title .accent,
  .hero h1 em,
  .hero h1 i{
    color:#76869e!important;
    font-style:normal!important;
  }
}


/* V33 — exact left alignment between the two hero headline lines */
@media (min-width: 901px){
  .hero-title,
  .hero h1{
    text-align:left!important;
  }

  .hero-title .accent,
  .hero h1 em,
  .hero h1 i{
    display:block!important;
    margin-left:0!important;
    padding-left:0!important;
    text-indent:0!important;
    transform:none!important;
  }
}


/* V34 — compact final contact section */
@media (min-width: 901px){
  .cta{
    min-height:auto!important;
    height:auto!important;
    padding-top:88px!important;
    padding-bottom:88px!important;
    align-items:center!important;
  }

  .cta > div,
  .cta > form{
    align-self:center!important;
  }

  .cta h2{
    margin-top:0!important;
  }

  .cta form{
    margin-top:0!important;
    margin-bottom:0!important;
  }
}

/* Keep it comfortably sized on mobile too */
@media (max-width: 900px){
  .cta{
    min-height:auto!important;
    height:auto!important;
    padding-top:64px!important;
    padding-bottom:64px!important;
  }
}


/* V35 — contact section fits within one desktop viewport */
@media (min-width: 901px){
  .cta{
    box-sizing:border-box!important;
    min-height:calc(100vh - 76px)!important;
    height:calc(100vh - 76px)!important;
    max-height:calc(100vh - 76px)!important;
    padding:34px max(36px,4.5vw)!important;
    display:grid!important;
    grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr)!important;
    gap:58px!important;
    align-items:center!important;
    overflow:hidden!important;
  }

  .cta > div,
  .cta > form{
    align-self:center!important;
    min-width:0!important;
  }

  .cta h2{
    font-size:clamp(46px,4.7vw,68px)!important;
    line-height:.98!important;
    margin:10px 0 16px!important;
    max-width:560px!important;
  }

  .cta p{
    margin:0!important;
    max-width:520px!important;
    line-height:1.55!important;
  }

  .cta form,
  .cta-form{
    margin:0!important;
    padding:0!important;
  }

  .cta .form-row,
  .cta .form-grid{
    gap:12px 14px!important;
  }

  .cta label{
    margin:0!important;
    font-size:12px!important;
  }

  .cta input,
  .cta select{
    min-height:44px!important;
    height:44px!important;
    padding:10px 13px!important;
  }

  .cta textarea{
    min-height:88px!important;
    height:88px!important;
    padding:11px 13px!important;
    resize:none!important;
  }

  .cta button,
  .cta .primary-btn{
    min-height:48px!important;
    height:48px!important;
    margin-top:10px!important;
  }

  .cta .form-msg{
    margin-top:8px!important;
  }
}

/* Smaller laptops / shorter desktop screens */
@media (min-width: 901px) and (max-height: 760px){
  .cta{
    padding-top:22px!important;
    padding-bottom:22px!important;
    gap:42px!important;
  }
  .cta h2{
    font-size:clamp(40px,4vw,58px)!important;
    margin-bottom:12px!important;
  }
  .cta p{
    font-size:14px!important;
  }
  .cta input,
  .cta select{
    min-height:40px!important;
    height:40px!important;
  }
  .cta textarea{
    min-height:72px!important;
    height:72px!important;
  }
  .cta button,
  .cta .primary-btn{
    min-height:44px!important;
    height:44px!important;
  }
}


/* =========================================================
   V36 — restored contact form + animated structured background
   ========================================================= */

.cta{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:
    radial-gradient(circle at 18% 80%, rgba(61,120,255,.22), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(71,110,190,.16), transparent 28%),
    linear-gradient(135deg,#071a35 0%,#0a2347 46%,#081b38 100%)!important;
}

/* Moving grid/mesh structure */
.cta::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-2;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:52px 52px;
  transform:rotate(-7deg) scale(1.08);
  animation:ctaGridMove 22s linear infinite;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.92),rgba(0,0,0,.35));
}

/* Soft animated glow line */
.cta::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:-170px;
  bottom:-260px;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(64,129,255,.36) 0%,rgba(64,129,255,.12) 38%,transparent 70%);
  filter:blur(10px);
  animation:ctaGlowFloat 10s ease-in-out infinite alternate;
}

@keyframes ctaGridMove{
  from{transform:translate3d(0,0,0) rotate(-7deg) scale(1.08)}
  to{transform:translate3d(52px,52px,0) rotate(-7deg) scale(1.08)}
}
@keyframes ctaGlowFloat{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(90px,-35px,0) scale(1.12)}
}

/* Restore a natural two-column layout and ensure the form is visible */
@media (min-width:901px){
  .cta{
    min-height:620px!important;
    height:auto!important;
    max-height:none!important;
    padding:72px max(42px,5vw)!important;
    display:grid!important;
    grid-template-columns:minmax(0,.82fr) minmax(500px,1fr)!important;
    gap:72px!important;
    align-items:center!important;
  }

  .cta > div,
  .cta > form,
  .cta .cta-form{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    position:relative!important;
    z-index:2!important;
    min-width:0!important;
  }

  .cta h2{
    font-size:clamp(48px,4.6vw,70px)!important;
    line-height:.98!important;
    margin:12px 0 18px!important;
    max-width:560px!important;
  }

  .cta p{
    max-width:500px!important;
    margin:0!important;
    line-height:1.6!important;
  }

  .cta form{
    width:100%!important;
    max-width:680px!important;
    margin:0!important;
  }

  .cta .form-row,
  .cta .form-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:13px 14px!important;
  }

  .cta label{
    display:block!important;
    margin:0!important;
  }

  .cta input,
  .cta select{
    display:block!important;
    width:100%!important;
    min-height:46px!important;
    height:46px!important;
    box-sizing:border-box!important;
  }

  .cta textarea{
    display:block!important;
    width:100%!important;
    min-height:104px!important;
    height:104px!important;
    box-sizing:border-box!important;
    resize:vertical!important;
  }

  .cta button,
  .cta .primary-btn{
    width:100%!important;
    min-height:50px!important;
    height:50px!important;
    margin-top:12px!important;
  }
}

/* Shorter laptop screens: slightly tighter but never hide the form */
@media (min-width:901px) and (max-height:760px){
  .cta{
    min-height:560px!important;
    padding-top:48px!important;
    padding-bottom:48px!important;
    gap:50px!important;
  }
  .cta h2{
    font-size:clamp(42px,4vw,58px)!important;
  }
  .cta textarea{
    min-height:84px!important;
    height:84px!important;
  }
}

/* Mobile */
@media (max-width:900px){
  .cta{
    min-height:auto!important;
    height:auto!important;
    max-height:none!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:34px!important;
    padding:58px 18px!important;
  }

  .cta > div,
  .cta > form,
  .cta .cta-form{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    position:relative!important;
    z-index:2!important;
  }

  .cta .form-row,
  .cta .form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .cta input,
  .cta select,
  .cta textarea{
    width:100%!important;
    box-sizing:border-box!important;
  }

  .cta textarea{
    min-height:110px!important;
    height:110px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .cta::before,
  .cta::after{
    animation:none!important;
  }
}


/* V37 — footer social links */
.socials{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:14px!important;
  margin-top:12px!important;
}
.socials a{
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  border:1px solid #d4d9e0!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  color:#111827!important;
  background:transparent!important;
  transition:transform .22s ease, background-color .22s ease, border-color .22s ease!important;
}
.socials a:hover{
  transform:translateY(-2px)!important;
  background:#111827!important;
  border-color:#111827!important;
  color:#fff!important;
}
.socials svg{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  pointer-events:none!important;
}


/* V38 — cleaner footer branding */
footer .footer-brand .brand-mark,
footer .footer-brand .logo-mark,
footer .footer-brand .brand-icon,
footer .footer-brand > a > span:first-child{
  display:none!important;
}

footer .footer-brand .brand-name,
footer .footer-brand .logo-text,
footer .footer-brand > a{
  font-size:22px!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
  line-height:1!important;
  color:#0a0f1c!important;
}


/* V39 — unified SVEA STUDIO typography */

/* Footer: twice the previous 22px size */
footer .footer-brand .brand,
footer .footer-brand .brand-name,
footer .footer-brand .logo-text,
footer .footer-brand > a{
  font-size:44px!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
  line-height:1!important;
  color:#0a0f1c!important;
}

/* Header: same typography/style as footer, sized appropriately for navigation */
header .brand,
header .brand-name,
header .logo-text,
header .site-brand,
header .site-logo{
  font-family:inherit!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
  color:#0a0f1c!important;
  text-transform:uppercase!important;
  font-style:normal!important;
}

/* Keep the header practical in height while matching the footer's visual style */
header .brand,
header .brand-name,
header .logo-text{
  font-size:28px!important;
  line-height:1!important;
}

@media (max-width:900px){
  footer .footer-brand .brand,
  footer .footer-brand .brand-name,
  footer .footer-brand .logo-text,
  footer .footer-brand > a{
    font-size:34px!important;
  }

  header .brand,
  header .brand-name,
  header .logo-text{
    font-size:24px!important;
  }
}


/* V40 — swap header/footer SVEA STUDIO typography */

/* HEADER = previous footer look */
header .brand,
header .brand-name,
header .logo-text,
header .site-brand,
header .site-logo{
  font-family:inherit!important;
  font-size:44px!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
  line-height:1!important;
  color:#0a0f1c!important;
  text-transform:uppercase!important;
  font-style:normal!important;
}

/* FOOTER = previous header look */
footer .footer-brand .brand,
footer .footer-brand .brand-name,
footer .footer-brand .logo-text,
footer .footer-brand > a{
  font-family:inherit!important;
  font-size:28px!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
  line-height:1!important;
  color:#0a0f1c!important;
  text-transform:uppercase!important;
  font-style:normal!important;
}

/* Responsive equivalents are swapped too */
@media (max-width:900px){
  header .brand,
  header .brand-name,
  header .logo-text,
  header .site-brand,
  header .site-logo{
    font-size:34px!important;
  }

  footer .footer-brand .brand,
  footer .footer-brand .brand-name,
  footer .footer-brand .logo-text,
  footer .footer-brand > a{
    font-size:24px!important;
  }
}


/* V41 — AI chatbot removed */
.chat-launch,.chat-panel,#chatLaunch,#chatPanel{display:none!important;}

/* =========================================================
   V43 — clean contact section
   ========================================================= */
.cta{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(0,.82fr) minmax(500px,1fr)!important;
  gap:72px!important;
  align-items:center!important;
  min-height:680px!important;
  height:auto!important;
  max-height:none!important;
  padding:82px max(42px,6vw)!important;
  background:
    radial-gradient(circle at 12% 86%,rgba(65,126,255,.23),transparent 34%),
    linear-gradient(135deg,#071a35 0%,#0a2347 45%,#081b38 100%)!important;
}
.cta::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:-2;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:58px 58px;
  transform:rotate(-6deg);
  animation:contactGrid 28s linear infinite;
  pointer-events:none;
}
@keyframes contactGrid{
  from{translate:0 0}
  to{translate:58px 58px}
}
.cta::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:440px;
  height:440px;
  border-radius:50%;
  left:-130px;
  bottom:-250px;
  background:radial-gradient(circle,rgba(54,117,255,.34),rgba(54,117,255,.08) 45%,transparent 72%);
  filter:blur(12px);
  animation:contactGlow 9s ease-in-out infinite alternate;
}
@keyframes contactGlow{
  to{transform:translate(80px,-36px) scale(1.12)}
}

.contact-copy{
  position:relative!important;
  z-index:2!important;
  max-width:560px!important;
  color:#fff!important;
}
.contact-copy > small{
  display:block!important;
  margin-bottom:18px!important;
  color:#8fb4ff!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.18em!important;
}
.contact-copy h2{
  margin:0 0 20px!important;
  max-width:560px!important;
  color:#fff!important;
  font-size:clamp(48px,5vw,76px)!important;
  line-height:.96!important;
  letter-spacing:-.055em!important;
}
.contact-copy h2 em{
  color:#a9b6cb!important;
  font-family:inherit!important;
  font-style:normal!important;
  font-weight:inherit!important;
}
.contact-copy p{
  max-width:510px!important;
  margin:0!important;
  color:#aebbd0!important;
  font-size:16px!important;
  line-height:1.65!important;
}
.contact-points{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px 22px!important;
  margin-top:34px!important;
  color:#d9e2ef!important;
  font-size:11px!important;
  font-weight:700!important;
}
.contact-points span{
  white-space:nowrap!important;
}

.contact-card{
  position:relative!important;
  z-index:3!important;
  display:block!important;
  width:100%!important;
  max-width:650px!important;
  min-width:0!important;
  margin:0!important;
  padding:28px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.20)!important;
  color:#0b1324!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.contact-form-head{
  display:flex!important;
  justify-content:space-between!important;
  gap:20px!important;
  align-items:flex-start!important;
  margin-bottom:22px!important;
}
.contact-form-head small{
  display:block!important;
  margin-bottom:5px!important;
  color:#7a8799!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.16em!important;
}
.contact-form-head h3{
  margin:0!important;
  color:#0b1324!important;
  font-size:22px!important;
  line-height:1.15!important;
  letter-spacing:-.025em!important;
}
.contact-step{
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  border:1px solid #dde3eb!important;
  border-radius:50%!important;
  color:#677589!important;
  font-size:10px!important;
  font-weight:800!important;
}
.contact-card .form-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:13px!important;
}
.contact-card label{
  display:block!important;
  margin:0 0 13px!important;
  color:#374151!important;
  font-size:11px!important;
  font-weight:800!important;
}
.contact-card .optional{
  color:#9aa3af!important;
  font-weight:500!important;
}
.contact-card input,
.contact-card select,
.contact-card textarea{
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  margin-top:7px!important;
  border:1px solid #dce2e9!important;
  border-radius:12px!important;
  outline:0!important;
  background:#f7f8fa!important;
  color:#101827!important;
  font:500 14px/1.4 Manrope,sans-serif!important;
  box-shadow:none!important;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease!important;
}
.contact-card input,
.contact-card select{
  height:46px!important;
  min-height:46px!important;
  padding:0 13px!important;
}
.contact-card textarea{
  min-height:98px!important;
  height:98px!important;
  padding:12px 13px!important;
  resize:vertical!important;
}
.contact-card input:focus,
.contact-card select:focus,
.contact-card textarea:focus{
  border-color:#91a0b5!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(10,35,71,.06)!important;
}
.contact-submit{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
  height:50px!important;
  min-height:50px!important;
  margin-top:3px!important;
  border:0!important;
  border-radius:999px!important;
  background:#091324!important;
  color:#fff!important;
  font:800 14px/1 Manrope,sans-serif!important;
  cursor:pointer!important;
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease!important;
}
.contact-submit:hover{
  background:#172338!important;
  transform:translateY(-1px)!important;
  box-shadow:0 10px 24px rgba(9,19,36,.16)!important;
}
.contact-note{
  margin-top:11px!important;
  color:#929ba7!important;
  text-align:center!important;
  font-size:9px!important;
  line-height:1.45!important;
}
.contact-card .form-msg{
  margin-top:8px!important;
  color:#1f2937!important;
  text-align:center!important;
  font-size:11px!important;
}

/* Separate pages: Services, Projects and Process never show contact section */
body.subpage-mode[data-current-page="tjanster"] #contact,
body.subpage-mode[data-current-page="process"] #contact{
  display:none!important;
}

@media(max-width:1100px){
  .cta{
    grid-template-columns:minmax(0,.75fr) minmax(470px,1fr)!important;
    gap:42px!important;
    padding-left:32px!important;
    padding-right:32px!important;
  }
  .contact-copy h2{font-size:clamp(44px,5vw,62px)!important}
}
@media(max-width:900px){
  .cta{
    grid-template-columns:1fr!important;
    gap:38px!important;
    min-height:auto!important;
    padding:64px 18px!important;
  }
  .contact-copy{max-width:650px!important}
  .contact-card{max-width:650px!important;padding:22px!important}
}
@media(max-width:580px){
  .contact-card .form-row{grid-template-columns:1fr!important;gap:0!important}
  .contact-copy h2{font-size:44px!important}
  .contact-points{display:grid!important;gap:8px!important}
  .contact-card{border-radius:20px!important;padding:19px!important}
}
@media(prefers-reduced-motion:reduce){
  .cta::before,.cta::after{animation:none!important}
}


/* V44 — compact contact block: full section fits on desktop */
@media (min-width:901px){
  .cta{
    grid-template-columns:minmax(320px,.72fr) minmax(500px,1fr)!important;
    gap:56px!important;
    align-items:center!important;
    min-height:0!important;
    height:auto!important;
    padding:42px max(42px,6vw)!important;
  }

  .contact-copy{
    align-self:center!important;
    max-width:500px!important;
  }
  .contact-copy > small{
    margin-bottom:12px!important;
  }
  .contact-copy h2{
    margin-bottom:14px!important;
    font-size:clamp(42px,4.25vw,64px)!important;
    line-height:.94!important;
  }
  .contact-copy p{
    max-width:470px!important;
    font-size:14px!important;
    line-height:1.55!important;
  }
  .contact-points{
    margin-top:22px!important;
    gap:8px 18px!important;
    font-size:10px!important;
  }

  .contact-card{
    max-width:620px!important;
    padding:20px 22px!important;
    border-radius:20px!important;
  }
  .contact-form-head{
    margin-bottom:13px!important;
  }
  .contact-form-head small{
    margin-bottom:3px!important;
  }
  .contact-form-head h3{
    font-size:19px!important;
  }
  .contact-step{
    width:32px!important;
    height:32px!important;
    flex-basis:32px!important;
  }
  .contact-card .form-row{
    gap:11px!important;
  }
  .contact-card label{
    margin-bottom:8px!important;
    font-size:10px!important;
  }
  .contact-card input,
  .contact-card select{
    height:39px!important;
    min-height:39px!important;
    margin-top:5px!important;
    border-radius:10px!important;
    font-size:13px!important;
  }
  .contact-card textarea{
    min-height:64px!important;
    height:64px!important;
    margin-top:5px!important;
    padding:9px 12px!important;
    border-radius:10px!important;
    font-size:13px!important;
  }
  .contact-submit{
    height:42px!important;
    min-height:42px!important;
    margin-top:1px!important;
    font-size:13px!important;
  }
  .contact-note{
    margin-top:7px!important;
    font-size:8px!important;
  }
  .contact-card .form-msg{
    margin-top:5px!important;
  }
}

/* Slightly shorter still on laptop-height screens */
@media (min-width:901px) and (max-height:820px){
  .cta{
    padding-top:28px!important;
    padding-bottom:28px!important;
  }
  .contact-copy h2{
    font-size:clamp(40px,4vw,58px)!important;
  }
  .contact-points{
    margin-top:16px!important;
  }
  .contact-card{
    padding-top:17px!important;
    padding-bottom:17px!important;
  }
  .contact-card textarea{
    height:56px!important;
    min-height:56px!important;
  }
}


/* V45 — large contact form, shorter blue section */
@media (min-width:901px){
  .cta{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    grid-template-columns:minmax(330px,.78fr) minmax(560px,1.12fr)!important;
    gap:62px!important;
    align-items:center!important;
    padding-top:30px!important;
    padding-bottom:30px!important;
  }

  .contact-copy{
    max-width:520px!important;
  }
  .contact-copy > small{
    margin-bottom:12px!important;
  }
  .contact-copy h2{
    font-size:clamp(46px,4.6vw,68px)!important;
    line-height:.96!important;
    margin:0 0 16px!important;
  }
  .contact-copy p{
    font-size:15px!important;
    line-height:1.58!important;
  }
  .contact-points{
    margin-top:20px!important;
    gap:10px 20px!important;
    font-size:10px!important;
  }

  /* Restore the form's visual size without making the section tall */
  .contact-card{
    width:100%!important;
    max-width:700px!important;
    padding:25px 27px!important;
    border-radius:24px!important;
  }
  .contact-form-head{
    margin-bottom:18px!important;
  }
  .contact-form-head h3{
    font-size:22px!important;
  }
  .contact-step{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }

  .contact-card .form-row{
    gap:14px!important;
  }
  .contact-card label{
    margin-bottom:11px!important;
    font-size:11px!important;
  }
  .contact-card input,
  .contact-card select{
    height:45px!important;
    min-height:45px!important;
    margin-top:6px!important;
    padding-left:13px!important;
    padding-right:13px!important;
    border-radius:12px!important;
    font-size:14px!important;
  }
  .contact-card textarea{
    height:86px!important;
    min-height:86px!important;
    margin-top:6px!important;
    padding:11px 13px!important;
    border-radius:12px!important;
    font-size:14px!important;
  }
  .contact-submit{
    height:48px!important;
    min-height:48px!important;
    margin-top:3px!important;
    font-size:14px!important;
  }
  .contact-note{
    margin-top:9px!important;
    font-size:9px!important;
  }
}

/* On shorter laptop screens keep only the outer blue padding tight;
   do not shrink the form itself. */
@media (min-width:901px) and (max-height:820px){
  .cta{
    padding-top:20px!important;
    padding-bottom:20px!important;
  }
  .contact-copy h2{
    font-size:clamp(44px,4.25vw,62px)!important;
  }
}


/* =========================================================
   V46 — contact section inspired by supplied reference image
   ========================================================= */
.contact-ref{
  position:relative!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr)!important;
  gap:78px!important;
  align-items:center!important;
  min-height:0!important;
  height:auto!important;
  padding:62px max(46px,5.5vw)!important;
  background:
    radial-gradient(circle at 8% 88%,rgba(64,55,255,.34),transparent 30%),
    radial-gradient(circle at 78% 12%,rgba(42,69,170,.18),transparent 24%),
    linear-gradient(135deg,#050712 0%,#070b18 48%,#08101e 100%)!important;
  color:#fff!important;
}
.contact-ref::before{
  content:"";
  position:absolute;
  inset:-15%;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:62px 62px;
  transform:rotate(-5deg);
  animation:contactRefGrid 30s linear infinite;
}
@keyframes contactRefGrid{
  to{translate:62px 62px}
}
.contact-left,
.contact-ref-form{
  position:relative!important;
  z-index:2!important;
}
.contact-left{
  max-width:520px!important;
  align-self:center!important;
}
.contact-pill{
  display:inline-flex!important;
  align-items:center!important;
  min-height:34px!important;
  padding:0 14px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.54)!important;
  color:#d7dfec!important;
  font-size:12px!important;
  font-weight:700!important;
  margin-bottom:24px!important;
}
.contact-left h2{
  margin:0 0 18px!important;
  color:#fff!important;
  font-size:clamp(48px,5vw,76px)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
}
.contact-left h2 span{
  color:#9da8bd!important;
  font-style:normal!important;
}
.contact-left p{
  max-width:470px!important;
  margin:0 0 18px!important;
  color:#b3bdd0!important;
  font-size:16px!important;
  line-height:1.62!important;
}
.contact-mail{
  display:inline-block!important;
  color:#8797ff!important;
  font-size:16px!important;
  text-decoration:none!important;
  font-weight:700!important;
}
.contact-mail:hover{text-decoration:underline!important}

.contact-ref-form{
  display:block!important;
  width:100%!important;
  max-width:680px!important;
  margin:0!important;
  padding:0!important;
}
.contact-ref-form .form-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}
.contact-ref-form label{
  display:block!important;
  margin:0 0 13px!important;
  color:#f2f4f8!important;
  font-size:12px!important;
  font-weight:750!important;
}
.contact-ref-form .optional{
  color:#7f8ba0!important;
  font-weight:500!important;
}
.field-wrap{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  width:100%!important;
  min-height:50px!important;
  margin-top:7px!important;
  padding:0 14px!important;
  border:1px solid rgba(169,181,204,.28)!important;
  border-radius:999px!important;
  background:#111827!important;
  box-sizing:border-box!important;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease!important;
}
.field-wrap:focus-within{
  border-color:#6d75ff!important;
  background:#141d31!important;
  box-shadow:0 0 0 3px rgba(95,84,255,.12)!important;
}
.field-icon{
  flex:0 0 auto!important;
  width:20px!important;
  color:#c9d1df!important;
  font-size:14px!important;
  text-align:center!important;
}
.contact-ref-form input,
.contact-ref-form select{
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
  font:500 14px/1.4 Manrope,sans-serif!important;
}
.contact-ref-form input::placeholder,
.contact-ref-form textarea::placeholder{
  color:#7f8ba0!important;
}
.contact-ref-form select{
  appearance:none!important;
  -webkit-appearance:none!important;
}
.contact-ref-form select option{
  background:#111827!important;
  color:#fff!important;
}
.contact-ref-form textarea{
  width:100%!important;
  min-height:112px!important;
  height:112px!important;
  margin-top:7px!important;
  padding:14px 16px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(169,181,204,.28)!important;
  border-radius:18px!important;
  outline:0!important;
  resize:vertical!important;
  background:#111827!important;
  color:#fff!important;
  font:500 14px/1.5 Manrope,sans-serif!important;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease!important;
}
.contact-ref-form textarea:focus{
  border-color:#6d75ff!important;
  background:#141d31!important;
  box-shadow:0 0 0 3px rgba(95,84,255,.12)!important;
}
.privacy-check{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  margin:4px 0 16px!important;
  color:#b8c1d1!important;
  font-size:11px!important;
  font-weight:500!important;
  line-height:1.45!important;
}
.privacy-check input{
  width:17px!important;
  height:17px!important;
  min-height:17px!important;
  flex:0 0 17px!important;
  margin-top:1px!important;
  accent-color:#655cff!important;
}
.contact-ref-submit{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
  min-height:52px!important;
  height:52px!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#5245ff,#6757f6)!important;
  color:#fff!important;
  font:800 14px/1 Manrope,sans-serif!important;
  box-shadow:0 12px 30px rgba(82,69,255,.22)!important;
  cursor:pointer!important;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease!important;
}
.contact-ref-submit:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.06)!important;
  box-shadow:0 15px 36px rgba(82,69,255,.30)!important;
}
.contact-ref-form .form-msg{
  margin-top:10px!important;
  color:#dce3ee!important;
  text-align:center!important;
  font-size:11px!important;
}

@media(max-width:1000px){
  .contact-ref{
    grid-template-columns:1fr!important;
    gap:42px!important;
    padding:58px 28px!important;
  }
  .contact-left{max-width:650px!important}
  .contact-ref-form{max-width:650px!important}
}
@media(max-width:620px){
  .contact-ref{
    padding:48px 18px!important;
  }
  .contact-ref-form .form-row{
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  .contact-left h2{
    font-size:44px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .contact-ref::before{animation:none!important}
}


/* V47 — clean fields + original Svea Studio blue contact background */
.contact-ref{
  background:
    radial-gradient(circle at 8% 88%,rgba(45,104,215,.72),transparent 34%),
    linear-gradient(105deg,#2059a8 0%,#0b2347 42%,#071a36 68%,#071a36 100%)!important;
}
.field-wrap{
  gap:0!important;
  padding-left:18px!important;
}


/* =========================================================
   V48 — white contact section + free-text subject + refined consent
   ========================================================= */
.contact-ref{
  background:#fff!important;
  color:#081426!important;
}
.contact-ref::before{
  opacity:.32!important;
  background-image:
    radial-gradient(circle at 8% 88%,rgba(102,117,138,.14),transparent 31%),
    linear-gradient(rgba(8,20,38,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(8,20,38,.025) 1px,transparent 1px)!important;
}
.contact-pill{
  border-color:#d9e0ea!important;
  background:#f2f5f9!important;
  color:#4c5b70!important;
}
.contact-left h2{color:#081426!important}
.contact-left h2 span{color:#66758a!important}
.contact-left p{color:#637187!important}
.contact-mail{color:#235fcb!important}

.contact-ref-form label{
  color:#152238!important;
}
.field-wrap,
.contact-ref-form textarea{
  border-color:#d8e0ea!important;
  background:#f7f9fc!important;
  color:#101b2d!important;
}
.field-wrap:focus-within,
.contact-ref-form textarea:focus{
  border-color:#0c1728!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(8,20,38,.07)!important;
}
.contact-ref-form input,
.contact-ref-form select,
.contact-ref-form textarea{
  color:#101b2d!important;
}
.contact-ref-form input::placeholder,
.contact-ref-form textarea::placeholder{
  color:#8a96a8!important;
}

/* Hide native checkbox and use a larger, polished custom control. */
.privacy-check{
  position:relative!important;
  display:grid!important;
  grid-template-columns:22px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:start!important;
  margin:6px 0 18px!important;
  padding:13px 15px!important;
  border:1px solid #e0e6ee!important;
  border-radius:14px!important;
  background:#f8fafc!important;
  cursor:pointer!important;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease!important;
}
.privacy-check:hover{
  border-color:#c9d2df!important;
  background:#f5f8fb!important;
}
.privacy-check:focus-within{
  border-color:#8f9daf!important;
  box-shadow:0 0 0 3px rgba(8,20,38,.06)!important;
}
.privacy-check > input{
  position:absolute!important;
  opacity:0!important;
  width:1px!important;
  height:1px!important;
  pointer-events:none!important;
}
.privacy-box{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:22px!important;
  height:22px!important;
  margin-top:1px!important;
  border:1.5px solid #aeb9c8!important;
  border-radius:7px!important;
  background:#fff!important;
  box-sizing:border-box!important;
  transition:all .18s ease!important;
}
.privacy-box svg{
  width:14px!important;
  height:14px!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  opacity:0!important;
  transform:scale(.65)!important;
  transition:opacity .16s ease,transform .16s ease!important;
}
.privacy-check > input:checked + .privacy-box{
  border-color:#081426!important;
  background:#081426!important;
}
.privacy-check > input:checked + .privacy-box svg{
  opacity:1!important;
  transform:scale(1)!important;
}
.privacy-copy{
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
  color:#28364a!important;
}
.privacy-copy strong{
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:750!important;
}
.privacy-copy small{
  color:#78869a!important;
  font-size:10.5px!important;
  line-height:1.45!important;
  font-weight:500!important;
}
.contact-ref-submit{
  background:#081426!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(8,20,38,.14)!important;
}
.contact-ref-submit:hover{
  filter:none!important;
  background:#111f34!important;
  box-shadow:0 15px 32px rgba(8,20,38,.18)!important;
}
.contact-ref-form .form-msg{color:#536176!important}


/* V49 — compact, simple consent row */
.privacy-check{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:5px 0 15px!important;
  padding:7px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.privacy-check:hover,
.privacy-check:focus-within{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.privacy-check > input{
  position:absolute!important;
  opacity:0!important;
  width:1px!important;
  height:1px!important;
  pointer-events:none!important;
}
.privacy-box{
  flex:0 0 19px!important;
  width:19px!important;
  height:19px!important;
  margin:0!important;
  border:1.5px solid #aeb9c8!important;
  border-radius:5px!important;
  background:#fff!important;
}
.privacy-box svg{
  width:12px!important;
  height:12px!important;
}
.privacy-copy{
  display:block!important;
  color:#5f6d80!important;
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:550!important;
  letter-spacing:0!important;
}


/* V50 — checkbox and consent text locked to one horizontal row */
.privacy-check{
  display:grid!important;
  grid-template-columns:19px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:10px!important;
  width:100%!important;
  max-width:none!important;
  padding:7px 0!important;
}
.privacy-box{
  grid-column:1!important;
  grid-row:1!important;
  margin:0!important;
}
.privacy-copy{
  grid-column:2!important;
  grid-row:1!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
}
@media(max-width:620px){
  .privacy-copy{
    white-space:normal!important;
  }
}


/* V51 — definitive consent alignment fix */
.contact-ref-form .privacy-row{
  display:block!important;
  width:100%!important;
  margin:5px 0 15px!important;
  padding:0!important;
}
.contact-ref-form .privacy-row .privacy-check{
  position:relative!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:auto!important;
  max-width:100%!important;
  min-height:22px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.contact-ref-form .privacy-row .privacy-check > input{
  position:absolute!important;
  opacity:0!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}
.contact-ref-form .privacy-row .privacy-box{
  position:relative!important;
  display:flex!important;
  flex:0 0 19px!important;
  align-items:center!important;
  justify-content:center!important;
  width:19px!important;
  height:19px!important;
  min-width:19px!important;
  min-height:19px!important;
  margin:0!important;
  padding:0!important;
  border:1.5px solid #aeb9c8!important;
  border-radius:5px!important;
  background:#fff!important;
  box-sizing:border-box!important;
}
.contact-ref-form .privacy-row .privacy-copy{
  position:relative!important;
  display:block!important;
  flex:0 1 auto!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  color:#5f6d80!important;
  font-size:11px!important;
  line-height:19px!important;
  font-weight:550!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
@media(max-width:620px){
  .contact-ref-form .privacy-row .privacy-check{
    align-items:flex-start!important;
  }
  .contact-ref-form .privacy-row .privacy-copy{
    white-space:normal!important;
    line-height:1.4!important;
  }
}


/* V52 — one authentic Google review */
.review-track:has(.real-google-review){
  grid-template-columns:minmax(0,1fr)!important;
}
.real-google-review{
  width:100%!important;
  max-width:760px!important;
}
.real-google-review p{
  line-height:1.7!important;
}



/* V53 — contact block decorative effect is neutral gray, not blue */
.contact-section,
.contact-wrap,
.contact-block,
.contact-page,
.contact-area {
  --contact-glow: rgba(102,117,138,.16);
}
.contact-section::before,
.contact-section::after,
.contact-wrap::before,
.contact-wrap::after,
.contact-block::before,
.contact-block::after,
.contact-page::before,
.contact-page::after,
.contact-area::before,
.contact-area::after {
  background: radial-gradient(circle, rgba(102,117,138,.16) 0%, rgba(102,117,138,.08) 34%, rgba(102,117,138,0) 72%) !important;
}

/* =========================================================
   V58 — public-site polish only
   Kundportal/admin backend untouched.
   ========================================================= */

/* --- Refined portal demo on desktop --- */
.portal-demo-polished{
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 28px 90px rgba(4,15,35,.26)!important;
  background:linear-gradient(145deg,#0a2348,#0c2b57)!important;
  transform:none!important;
}
.portal-demo-polished .portal-main{
  background:#f8fafc!important;
}
.portal-demo-polished .pstat,
.portal-demo-polished .activity-card,
.portal-demo-polished .health-card{
  border-color:#e4e9f0!important;
  box-shadow:0 8px 20px rgba(13,30,58,.05)!important;
}
.portal-demo-polished .health-ring{
  border-color:#7d8da5!important;
}
.portal-demo-polished aside{
  background:#0b1d3a!important;
}

/* --- Contact final polish --- */
.contact-ref{
  border-top:1px solid #eef1f5!important;
  border-bottom:1px solid #eef1f5!important;
}
.contact-left h2{
  max-width:620px!important;
}
.contact-ref-form{
  border-radius:22px!important;
}
.contact-ref-form input,
.contact-ref-form textarea{
  -webkit-appearance:none!important;
  appearance:none!important;
}
.contact-ref-submit{
  letter-spacing:-.01em!important;
}
.contact-ref-submit:active{
  transform:translateY(0)!important;
}
.contact-ref-form .form-msg{
  min-height:16px!important;
  font-weight:700!important;
}

/* --- Small general polish --- */
.service-card,
.case,
.review-track article,
.contact-ref-form{
  backface-visibility:hidden;
}
.section-label,
.eyebrow{
  text-rendering:optimizeLegibility;
}
a,button{
  -webkit-tap-highlight-color:transparent;
}

/* --- Mobile: cleaner, lighter, more intentional --- */
@media(max-width:780px){
  /* Hide the portal demo entirely on mobile, as requested. */
  .portal-shell,
  .portal-demo-polished,
  .dark-section .portal-shell{
    display:none!important;
  }

  /* Keep the portal section copy but remove oversized empty spacing. */
  .dark-section{
    padding-top:64px!important;
    padding-bottom:64px!important;
  }
  .portal-heading{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .portal-heading h2{
    font-size:40px!important;
    line-height:1.02!important;
  }
  .portal-heading p{
    font-size:15px!important;
    line-height:1.6!important;
    max-width:100%!important;
  }

  /* Contact form: mobile-first usability */
  .contact-ref{
    padding:52px 18px 56px!important;
    gap:30px!important;
  }
  .contact-left{
    max-width:100%!important;
  }
  .contact-left h2{
    font-size:42px!important;
    line-height:.98!important;
    margin-bottom:14px!important;
  }
  .contact-left p{
    font-size:15px!important;
  }
  .contact-ref-form{
    width:100%!important;
    max-width:100%!important;
  }
  .contact-ref-form .form-row{
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  .field-wrap{
    min-height:48px!important;
  }
  .contact-ref-form input{
    font-size:16px!important; /* Prevent iOS zoom */
  }
  .contact-ref-form textarea{
    min-height:118px!important;
    height:118px!important;
    font-size:16px!important;
  }
  .privacy-copy{
    white-space:normal!important;
  }
  .contact-ref-submit{
    min-height:52px!important;
    height:52px!important;
    font-size:15px!important;
  }

  /* Better breathing room between page sections on phones */
  .section{
    padding-top:64px!important;
    padding-bottom:64px!important;
  }
  .services,
  .cases,
  .process,
  .security,
  .faq{
    gap:18px!important;
  }

  /* Reviews */
  .reviews-inner{
    gap:26px!important;
  }
  .real-google-review{
    max-width:100%!important;
  }
  .real-google-review p{
    font-size:15px!important;
    line-height:1.65!important;
  }
}

/* Extra-small phones */
@media(max-width:390px){
  .contact-left h2{font-size:38px!important}
  .portal-heading h2{font-size:36px!important}
}


/* =========================================================
   V59 — clear contact-form result popup
   ========================================================= */
.contact-result-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.contact-result-modal.open{display:flex}
.contact-result-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,12,24,.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:contactBackdropIn .22s ease both;
}
.contact-result-card{
  position:relative;
  z-index:1;
  width:min(440px,100%);
  padding:34px 32px 28px;
  border:1px solid #e3e8ef;
  border-radius:26px;
  background:rgba(255,255,255,.97);
  box-shadow:0 30px 90px rgba(5,16,35,.22);
  text-align:center;
  animation:contactPopupIn .32s cubic-bezier(.2,.75,.3,1) both;
}
.contact-result-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  min-height:34px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#f2f5f8;
  color:#59677a;
  font-size:21px;
  line-height:1;
  cursor:pointer;
}
.contact-result-icon{
  width:54px;
  height:54px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#081426;
  color:#fff;
  font-size:23px;
  font-weight:800;
}
.contact-result-card small{
  display:block;
  margin-bottom:8px;
  color:#7a8799;
  font-size:9px;
  font-weight:850;
  letter-spacing:.16em;
}
.contact-result-card h3{
  margin:0 0 10px;
  color:#0a1424;
  font-size:28px;
  line-height:1.08;
  letter-spacing:-.035em;
}
.contact-result-card p{
  max-width:340px;
  margin:0 auto 22px;
  color:#69778a;
  font-size:14px;
  line-height:1.6;
}
.contact-result-button{
  width:100%;
  min-height:48px;
  margin:0;
  border:0;
  border-radius:999px;
  background:#081426;
  color:#fff;
  font:800 14px/1 Manrope,sans-serif;
  cursor:pointer;
}
.contact-result-modal.error .contact-result-icon{
  background:#f3f5f7;
  color:#0a1424;
}
@keyframes contactPopupIn{
  from{opacity:0;transform:translateY(14px) scale(.975)}
  to{opacity:1;transform:none}
}
@keyframes contactBackdropIn{
  from{opacity:0}
  to{opacity:1}
}
@media(max-width:520px){
  .contact-result-modal{padding:14px}
  .contact-result-card{
    padding:30px 22px 22px;
    border-radius:22px;
  }
  .contact-result-card h3{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
  .contact-result-card,.contact-result-backdrop{animation:none}
}


/* V62 — dölj synliga scrollbars, behåll scrollfunktionen */
html,body,*{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}


/* =========================================================
   V66 — unique visual identity for each service card
   ========================================================= */
.services .service-card{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease!important;
}
.services .service-card::before,
.services .service-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
}
.services .service-card:hover{
  transform:translateY(-5px)!important;
  box-shadow:0 20px 45px rgba(16,28,48,.10)!important;
}

/* 01 — premium dark technical grid */
.service-card-1{
  background:
    radial-gradient(circle at 82% 18%,rgba(73,132,255,.18),transparent 28%),
    linear-gradient(145deg,#091c3a 0%,#0a244a 100%)!important;
}
.service-card-1::before{
  inset:-30%!important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)!important;
  background-size:34px 34px!important;
  transform:rotate(-8deg)!important;
  animation:serviceGridDrift 24s linear infinite!important;
  opacity:.45!important;
}
.service-card-1::after{
  width:170px!important;
  height:170px!important;
  right:-70px!important;
  bottom:-85px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(73,132,255,.28),transparent 68%)!important;
}

/* 02 — conversion: diagonal rhythm and light accent */
.service-card-2{
  background:linear-gradient(135deg,#fff 0%,#fbfcff 100%)!important;
}
.service-card-2::before{
  width:190px!important;
  height:190px!important;
  top:-70px!important;
  right:-70px!important;
  border-radius:42px!important;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(66,105,246,.10) 0 9px,
      transparent 9px 22px
    )!important;
  transform:rotate(8deg)!important;
  animation:serviceFloatA 8s ease-in-out infinite alternate!important;
}
.service-card-2::after{
  left:24px!important;
  right:24px!important;
  bottom:0!important;
  height:2px!important;
  background:linear-gradient(90deg,transparent,#4f72ff,transparent)!important;
  opacity:.35!important;
}

/* 03 — support: soft technical rings/orbit */
.service-card-3{
  background:
    radial-gradient(circle at 85% 18%,rgba(128,145,174,.10),transparent 30%),
    #fff!important;
}
.service-card-3::before{
  width:150px!important;
  height:150px!important;
  right:-42px!important;
  top:-38px!important;
  border:1px solid rgba(93,113,144,.18)!important;
  border-radius:50%!important;
  box-shadow:
    0 0 0 18px rgba(93,113,144,.045),
    0 0 0 36px rgba(93,113,144,.025)!important;
  animation:serviceOrbit 10s linear infinite!important;
}
.service-card-3::after{
  width:8px!important;
  height:8px!important;
  right:76px!important;
  top:38px!important;
  border-radius:50%!important;
  background:#5d7190!important;
  box-shadow:0 0 0 6px rgba(93,113,144,.10)!important;
}

/* 04 — AI: subtle connected-node pattern */
.service-card-4{
  background:linear-gradient(145deg,#fff 0%,#fafbfe 100%)!important;
}
.service-card-4::before{
  inset:0!important;
  opacity:.50!important;
  background-image:
    radial-gradient(circle at 78% 24%,rgba(71,109,255,.55) 0 2px,transparent 3px),
    radial-gradient(circle at 87% 39%,rgba(71,109,255,.34) 0 2px,transparent 3px),
    radial-gradient(circle at 70% 48%,rgba(71,109,255,.28) 0 2px,transparent 3px),
    linear-gradient(120deg,transparent 62%,rgba(71,109,255,.10) 62.3%,transparent 62.7%),
    linear-gradient(45deg,transparent 72%,rgba(71,109,255,.08) 72.3%,transparent 72.7%)!important;
  animation:servicePulse 6s ease-in-out infinite alternate!important;
}
.service-card-4::after{
  width:120px!important;
  height:120px!important;
  right:-35px!important;
  bottom:-45px!important;
  border-radius:36px!important;
  background:linear-gradient(145deg,rgba(71,109,255,.10),rgba(71,109,255,.02))!important;
  transform:rotate(18deg)!important;
}

@keyframes serviceGridDrift{
  from{transform:translate3d(0,0,0) rotate(-8deg)}
  to{transform:translate3d(34px,34px,0) rotate(-8deg)}
}
@keyframes serviceFloatA{
  from{transform:translateY(0) rotate(8deg)}
  to{transform:translateY(12px) rotate(13deg)}
}
@keyframes serviceOrbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes servicePulse{
  from{opacity:.32}
  to{opacity:.62}
}

@media(max-width:780px){
  .services .service-card{
    min-height:auto!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .service-card-1::before,
  .service-card-2::before,
  .service-card-3::before,
  .service-card-4::before{
    animation:none!important;
  }
}


/* =========================================================
   V68 — Drift & support: rotating gear.
   Cards 01, 02 and 04 remain as in V66.
   ========================================================= */
.service-card-3{
  background:
    radial-gradient(circle at 85% 18%,rgba(128,145,174,.10),transparent 30%),
    #fff!important;
}
.service-card-3::before{
  content:"⚙"!important;
  position:absolute!important;
  width:auto!important;
  height:auto!important;
  right:28px!important;
  top:20px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:none!important;
  color:rgba(93,113,144,.18)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:92px!important;
  line-height:1!important;
  transform-origin:50% 50%!important;
  animation:serviceGearSpin 12s linear infinite!important;
}
.service-card-3::after{
  content:""!important;
  position:absolute!important;
  width:48px!important;
  height:48px!important;
  right:50px!important;
  top:42px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(255,255,255,.96) 0 26%,transparent 28%)!important;
  box-shadow:none!important;
  opacity:.75!important;
}
@keyframes serviceGearSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){
  .service-card-3::before{animation:none!important}
}


/* =========================================================
   V69 — advanced mechanical gear system for Drift & support
   ========================================================= */

/* Hide the simpler V68 pseudo-gear */
.service-card-3::before,
.service-card-3::after{
  content:none!important;
}

.service-card-3{
  background:
    radial-gradient(circle at 86% 18%,rgba(103,121,151,.10),transparent 30%),
    linear-gradient(145deg,#fff 0%,#fbfcfe 100%)!important;
}

.gear-system{
  position:absolute!important;
  right:18px!important;
  top:18px!important;
  width:150px!important;
  height:112px!important;
  pointer-events:none!important;
  z-index:1!important;
  opacity:.72!important;
}

.gear{
  position:absolute!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  filter:drop-shadow(0 5px 10px rgba(47,62,88,.08))!important;
}

/* Teeth created from conic segments, not a font glyph */
.gear::before{
  content:""!important;
  position:absolute!important;
  inset:-8px!important;
  border-radius:50%!important;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(96,113,142,.42) 0deg 8deg,
      transparent 8deg 16deg
    )!important;
  -webkit-mask:
    radial-gradient(circle,transparent 0 56%,#000 57% 78%,transparent 79%)!important;
  mask:
    radial-gradient(circle,transparent 0 56%,#000 57% 78%,transparent 79%)!important;
}

.gear::after{
  content:""!important;
  position:absolute!important;
  inset:8px!important;
  border-radius:50%!important;
  border:2px solid rgba(96,113,142,.34)!important;
  box-shadow:
    inset 0 0 0 7px rgba(112,128,153,.055),
    0 0 0 1px rgba(255,255,255,.7)!important;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(239,242,247,.74) 48%,rgba(218,225,235,.45))!important;
}

.gear > span{
  position:relative!important;
  z-index:2!important;
  width:24%!important;
  aspect-ratio:1!important;
  border-radius:50%!important;
  background:#fff!important;
  border:2px solid rgba(96,113,142,.34)!important;
  box-shadow:
    0 0 0 6px rgba(96,113,142,.055),
    inset 0 2px 4px rgba(28,39,58,.05)!important;
}

.gear-large{
  width:82px!important;
  height:82px!important;
  right:8px!important;
  top:3px!important;
  animation:gearLargeSpin 12s linear infinite!important;
}

.gear-small{
  width:55px!important;
  height:55px!important;
  left:8px!important;
  bottom:0!important;
  animation:gearSmallSpin 8s linear infinite!important;
}

.gear-small::before{
  inset:-7px!important;
  background:
    repeating-conic-gradient(
      from 4deg,
      rgba(96,113,142,.35) 0deg 11deg,
      transparent 11deg 22deg
    )!important;
}

.gear-connector{
  position:absolute!important;
  width:44px!important;
  height:2px!important;
  left:50px!important;
  top:65px!important;
  background:linear-gradient(90deg,rgba(111,128,155,.05),rgba(111,128,155,.28),rgba(111,128,155,.05))!important;
  transform:rotate(-28deg)!important;
  transform-origin:center!important;
}

/* Small technical accent dots */
.gear-system::after{
  content:""!important;
  position:absolute!important;
  right:7px!important;
  bottom:4px!important;
  width:4px!important;
  height:4px!important;
  border-radius:50%!important;
  background:#6f8198!important;
  box-shadow:
    -13px 6px 0 rgba(111,129,152,.45),
    -26px 2px 0 rgba(111,129,152,.24)!important;
  animation:gearStatusBlink 2.4s ease-in-out infinite!important;
}

@keyframes gearLargeSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes gearSmallSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}
@keyframes gearStatusBlink{
  0%,100%{opacity:.38}
  50%{opacity:1}
}

@media(max-width:780px){
  .gear-system{
    right:12px!important;
    top:14px!important;
    transform:scale(.86)!important;
    transform-origin:top right!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .gear-large,.gear-small,.gear-system::after{
    animation:none!important;
  }
}


/* =========================================================
   V71 — dedicated Services page demo
   Homepage service cards remain unchanged.
   ========================================================= */
.services-page{
  padding:0!important;
  background:#f6f8fb!important;
}
body.subpage-mode .services-page.active-page-section{
  display:block!important;
  padding:0!important;
  min-height:auto!important;
}

.services-page-hero{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr);
  gap:72px;
  align-items:center;
  min-height:640px;
  padding:78px max(48px,6vw);
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 18%,rgba(89,132,226,.09),transparent 31%),
    #f6f8fb;
}
.services-page-copy{
  max-width:650px;
}
.services-page-copy .eyebrow{
  margin-bottom:22px;
}
.services-page-copy h1{
  margin:0 0 22px;
  color:#081426;
  font-size:clamp(52px,5.4vw,82px);
  line-height:.96;
  letter-spacing:-.06em;
}
.services-page-copy h1 span{
  color:#7f8da2;
}
.services-page-copy p{
  max-width:590px;
  margin:0;
  color:#65748a;
  font-size:17px;
  line-height:1.7;
}
.services-page-actions{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-top:34px;
}
.services-text-link{
  color:#25354d;
  font-weight:800;
  font-size:14px;
}

/* website demo */
.services-web-demo{
  position:relative;
  width:100%;
  max-width:680px;
  justify-self:end;
  padding:26px 0 30px;
}
.web-demo-browser{
  overflow:hidden;
  border:1px solid #d8e0ea;
  border-radius:24px;
  background:#fff;
  box-shadow:0 34px 90px rgba(31,48,78,.16);
  transform:perspective(1200px) rotateY(-3deg) rotateX(1deg);
  transform-origin:center;
  animation:webDemoFloat 7s ease-in-out infinite alternate;
}
.web-demo-top{
  height:46px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 16px;
  background:#0b1d3a;
}
.web-demo-top > span{
  width:7px;height:7px;border-radius:50%;
  background:#72829a;
}
.web-demo-top small{
  margin-left:auto;
  margin-right:auto;
  color:#93a2b8;
  font-size:9px;
}
.web-demo-body{
  padding:19px;
  background:#f8fafc;
}
.web-demo-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 4px 19px;
}
.web-demo-nav strong{
  font-size:12px;
  letter-spacing:.11em;
  color:#13223a;
}
.web-demo-nav div{
  display:flex;gap:7px;
}
.web-demo-nav i{
  width:28px;height:4px;border-radius:9px;background:#cbd4e0;
}
.web-demo-hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  min-height:300px;
  padding:30px;
  border-radius:17px;
  background:linear-gradient(135deg,#eaf0f8,#f7f9fc);
}
.web-demo-copy{
  align-self:center;
}
.web-demo-copy > b{
  display:block;
  width:58px;height:6px;border-radius:99px;background:#8092aa;margin-bottom:17px;
}
.web-demo-copy h3{
  margin:0 0 16px;
  max-width:270px;
  color:#0a1830;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.045em;
}
.web-demo-copy p{
  width:92%;height:7px;border-radius:99px;background:#c7d1dd;margin:0 0 8px;
}
.web-demo-copy p + p{width:72%}
.web-demo-copy button{
  margin-top:17px;
  padding:10px 17px;
  border-radius:999px;
  background:#0a1830;
  color:#fff;
  font-size:10px;
}
.web-demo-visual{
  position:relative;
  min-height:225px;
}
.web-demo-card{
  position:absolute;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 18px 40px rgba(28,47,78,.12);
}
.web-demo-card.one{
  inset:16px 20px 52px 3px;
  background:linear-gradient(145deg,#142e55,#1c4778);
  transform:rotate(-4deg);
}
.web-demo-card.two{
  width:58%;height:46%;
  right:-2px;bottom:11px;
  background:#fff;
  transform:rotate(6deg);
}
.web-demo-orb{
  position:absolute;
  width:86px;height:86px;
  right:28px;top:45px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    0 0 0 15px rgba(255,255,255,.06),
    0 0 0 30px rgba(255,255,255,.035);
}
.web-demo-badge{
  position:absolute;
  display:grid;
  gap:2px;
  padding:13px 16px;
  border:1px solid #dce3ec;
  border-radius:14px;
  background:rgba(255,255,255,.96);
  box-shadow:0 15px 40px rgba(25,43,72,.10);
  backdrop-filter:blur(10px);
}
.web-demo-badge b{font-size:13px;color:#15243a}
.web-demo-badge small{font-size:9px;color:#7e8b9d}
.badge-speed{left:-26px;bottom:1px}
.badge-mobile{right:-20px;top:4px}

/* included services */
.services-focus{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:70px;
  padding:92px max(48px,6vw);
  background:#fff;
}
.services-focus-intro{
  max-width:450px;
}
.services-focus-intro small,
.services-final-cta > small{
  color:#77869a;
  font-size:10px;
  font-weight:850;
  letter-spacing:.16em;
}
.services-focus-intro h2{
  margin:14px 0 17px;
  color:#0a1526;
  font-size:44px;
  line-height:1.04;
  letter-spacing:-.045em;
}
.services-focus-intro p{
  color:#6c798b;
  line-height:1.7;
}
.services-focus-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid #e3e8ef;
  border-left:1px solid #e3e8ef;
}
.services-focus-grid article{
  min-height:215px;
  padding:27px;
  border-right:1px solid #e3e8ef;
  border-bottom:1px solid #e3e8ef;
  transition:background .22s ease,transform .22s ease;
}
.services-focus-grid article:hover{
  background:#f8fafc;
}
.services-focus-grid article span{
  color:#8b99aa;
  font-size:10px;
  font-weight:800;
}
.services-focus-grid article h3{
  margin:32px 0 10px;
  color:#101b2d;
  font-size:20px;
}
.services-focus-grid article p{
  margin:0;
  color:#748195;
  font-size:13px;
  line-height:1.65;
}

/* simple process strip */
.services-process-strip{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto 1fr auto;
  align-items:center;
  gap:22px;
  padding:34px max(48px,6vw);
  background:#0a1d3a;
  color:#fff;
}
.services-process-strip > div{
  display:grid;
  gap:3px;
}
.services-process-strip small{
  color:#6988bb;
  font-size:9px;
  font-weight:800;
}
.services-process-strip b{
  font-size:12px;
  white-space:nowrap;
}
.services-process-strip i{
  display:block;
  height:1px;
  background:linear-gradient(90deg,#38567f,#1b3457);
}

/* final CTA */
.services-final-cta{
  padding:100px max(48px,6vw);
  text-align:center;
  background:#f6f8fb;
}
.services-final-cta h2{
  max-width:780px;
  margin:16px auto 16px;
  color:#091426;
  font-size:clamp(42px,4.5vw,68px);
  line-height:1;
  letter-spacing:-.05em;
}
.services-final-cta p{
  max-width:610px;
  margin:0 auto 28px;
  color:#6b788a;
  line-height:1.65;
}

@keyframes webDemoFloat{
  from{transform:perspective(1200px) translateY(0) rotateY(-3deg) rotateX(1deg)}
  to{transform:perspective(1200px) translateY(-8px) rotateY(-1deg) rotateX(0)}
}

@media(max-width:980px){
  .services-page-hero{
    grid-template-columns:1fr;
    gap:50px;
    padding:64px 28px;
  }
  .services-web-demo{
    justify-self:center;
    max-width:700px;
  }
  .services-focus{
    grid-template-columns:1fr;
    gap:40px;
    padding:72px 28px;
  }
}
@media(max-width:780px){
  .services-page-hero{
    padding:52px 18px 60px;
    min-height:auto;
  }
  .services-page-copy h1{
    font-size:46px;
  }
  .services-page-copy p{
    font-size:15px;
  }
  .services-page-actions{
    align-items:stretch;
    flex-direction:column;
    gap:15px;
  }
  .services-page-actions .primary-btn{
    width:100%;
    justify-content:center;
  }
  .services-web-demo{
    display:none; /* cleaner mobile page */
  }
  .services-focus{
    padding:60px 18px;
  }
  .services-focus-intro h2{
    font-size:38px;
  }
  .services-focus-grid{
    grid-template-columns:1fr;
  }
  .services-focus-grid article{
    min-height:auto;
  }
  .services-process-strip{
    grid-template-columns:1fr;
    gap:14px;
    padding:30px 18px;
  }
  .services-process-strip i{
    width:1px;height:18px;margin-left:5px;
    background:#2c476c;
  }
  .services-final-cta{
    padding:72px 18px;
  }
}
@media(prefers-reduced-motion:reduce){
  .web-demo-browser{animation:none}
}


/* =========================================================
   V72 — simple services page in Svea Studio style
   ========================================================= */
.services-page-simple{
  padding:0!important;
  background:#f6f8fb!important;
}
body.subpage-mode .services-page-simple.active-page-section{
  display:block!important;
  padding:0!important;
  min-height:auto!important;
}

.services-simple-hero{
  padding:86px max(52px,6vw) 72px!important;
  border-bottom:1px solid #e3e8ef!important;
  background:
    radial-gradient(circle at 15% 10%,rgba(73,115,208,.08),transparent 30%),
    #f6f8fb!important;
}
.services-simple-hero .eyebrow{
  margin-bottom:24px!important;
}
.services-simple-hero h1{
  margin:0 0 22px!important;
  max-width:980px!important;
  color:#081426!important;
  font-size:clamp(56px,6vw,92px)!important;
  line-height:.94!important;
  letter-spacing:-.06em!important;
}
.services-simple-hero h1 span{
  color:#7d8ca1!important;
}
.services-simple-hero p{
  max-width:650px!important;
  margin:0!important;
  color:#66758a!important;
  font-size:17px!important;
  line-height:1.7!important;
}

.services-simple-list{
  padding:0 max(52px,6vw)!important;
  background:#fff!important;
}
.service-line{
  display:grid!important;
  grid-template-columns:90px minmax(260px,.75fr) minmax(360px,1.25fr)!important;
  gap:42px!important;
  align-items:start!important;
  padding:62px 0!important;
  border-bottom:1px solid #e3e8ef!important;
}
.service-line-index{
  padding-top:6px!important;
  color:#8d99a9!important;
  font-size:11px!important;
  font-weight:800!important;
}
.service-line-title small{
  display:block!important;
  margin-bottom:10px!important;
  color:#8995a5!important;
  font-size:9px!important;
  font-weight:850!important;
  letter-spacing:.15em!important;
}
.service-line-title h2{
  margin:0!important;
  color:#0a1526!important;
  font-size:clamp(38px,4vw,62px)!important;
  line-height:1!important;
  letter-spacing:-.05em!important;
}
.service-line-copy{
  max-width:700px!important;
}
.service-line-copy p{
  margin:0 0 14px!important;
  color:#45546a!important;
  font-size:17px!important;
  line-height:1.7!important;
}
.service-line-copy .service-line-note{
  margin-bottom:0!important;
  color:#8290a2!important;
  font-size:14px!important;
}

.services-simple-bottom{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-end!important;
  gap:40px!important;
  padding:72px max(52px,6vw) 84px!important;
  background:#f6f8fb!important;
}
.services-simple-bottom small{
  display:block!important;
  margin-bottom:12px!important;
  color:#8895a6!important;
  font-size:9px!important;
  font-weight:850!important;
  letter-spacing:.15em!important;
}
.services-simple-bottom h2{
  max-width:760px!important;
  margin:0!important;
  color:#0a1526!important;
  font-size:clamp(38px,4.2vw,62px)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
}
.services-simple-bottom .primary-btn{
  flex:0 0 auto!important;
}

@media(max-width:900px){
  .service-line{
    grid-template-columns:54px 1fr!important;
    gap:20px 24px!important;
  }
  .service-line-copy{
    grid-column:2!important;
  }
}
@media(max-width:700px){
  .services-simple-hero{
    padding:58px 18px 50px!important;
  }
  .services-simple-hero h1{
    font-size:48px!important;
  }
  .services-simple-hero p{
    font-size:15px!important;
  }
  .services-simple-list{
    padding:0 18px!important;
  }
  .service-line{
    grid-template-columns:1fr!important;
    gap:13px!important;
    padding:44px 0!important;
  }
  .service-line-index,
  .service-line-copy{
    grid-column:1!important;
  }
  .service-line-title h2{
    font-size:40px!important;
  }
  .service-line-copy p{
    font-size:15px!important;
  }
  .services-simple-bottom{
    align-items:stretch!important;
    flex-direction:column!important;
    padding:56px 18px 64px!important;
  }
  .services-simple-bottom h2{
    font-size:40px!important;
  }
  .services-simple-bottom .primary-btn{
    width:100%!important;
    justify-content:center!important;
  }
}


/* V74 — service detail layout, no long service cards */
.service-feature{
  padding:78px max(52px,6vw);
  background:#fff;
  border-bottom:1px solid #e3e8ef;
}
.service-feature-seo{
  background:#f6f8fb;
}
.service-feature-head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.7fr);
  gap:80px;
  align-items:end;
  margin-bottom:52px;
}
.service-feature-head small{
  display:block;
  margin-bottom:16px;
  color:#8390a2;
  font-size:10px;
  font-weight:850;
  letter-spacing:.16em;
}
.service-feature-head h2{
  margin:0;
  max-width:720px;
  color:#081426;
  font-size:clamp(46px,5vw,72px);
  line-height:.98;
  letter-spacing:-.055em;
}
.service-feature-head h2 span{color:#7d8ca1}
.service-feature-head > p{
  margin:0;
  color:#68778b;
  font-size:16px;
  line-height:1.7;
}
.service-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid #dfe5ed;
  border-left:1px solid #dfe5ed;
}
.feature-item{
  position:relative;
  min-height:190px;
  padding:28px 30px;
  border-right:1px solid #dfe5ed;
  border-bottom:1px solid #dfe5ed;
  background:rgba(255,255,255,.55);
  transition:background .2s ease,transform .2s ease;
}
.service-feature-seo .feature-item{background:rgba(255,255,255,.38)}
.feature-item:hover{background:#fff}
.feature-item > span{
  color:#3677ff;
  font-size:10px;
  font-weight:850;
}
.feature-item h3{
  margin:32px 0 10px;
  color:#101b2d;
  font-size:20px;
  letter-spacing:-.02em;
}
.feature-item p{
  max-width:520px;
  margin:0;
  color:#718095;
  font-size:14px;
  line-height:1.65;
}
@media(max-width:900px){
  .service-feature-head{grid-template-columns:1fr;gap:24px}
}
@media(max-width:700px){
  .service-feature{padding:54px 18px}
  .service-feature-head{margin-bottom:34px}
  .service-feature-head h2{font-size:42px}
  .service-feature-head > p{font-size:15px}
  .service-feature-grid{grid-template-columns:1fr}
  .feature-item{min-height:auto;padding:24px}
  .feature-item h3{margin-top:22px}
}




/* =========================================================
   V76 — Tjänster: visible only on ?page=tjanster + example-style boxes
   ========================================================= */
.services-page{
  display:none;
}
body.subpage-mode .services-page.active-page-section{
  display:block!important;
}
body:not(.subpage-mode) .services-page{
  display:none!important;
}

/* The four homepage service cards remain untouched. */
body.subpage-mode .services-preview{
  display:none!important;
}

/* Service-page presentation */
.services-page-simple{
  background:#f7f9fc!important;
  padding:72px max(42px,6vw) 92px!important;
}
.services-simple-hero{
  max-width:1180px;
  margin:0 auto 72px;
}
.services-simple-hero h1{
  color:#071326!important;
}
.services-simple-hero h1 span{
  color:#7f8da2!important;
}
.services-simple-hero p{
  color:#6f7e94!important;
  max-width:720px;
}

.service-feature{
  max-width:1180px;
  margin:0 auto;
  padding:54px 0 68px;
  border-top:1px solid #dce3ec;
}
.service-feature-head{
  margin-bottom:34px;
}
.service-feature-head small{
  color:#3977ff!important;
}
.service-feature-head h2{
  color:#071326!important;
}
.service-feature-head h2 span{
  color:#7f8da2!important;
}
.service-feature-head p{
  color:#6f7e94!important;
}

/* Four boxes, same visual idea as the supplied example */
.service-feature-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:20px!important;
}
.service-feature-grid .feature-item{
  position:relative;
  overflow:hidden;
  min-height:190px;
  padding:32px!important;
  border:1px solid #dce3ec!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 14px 38px rgba(16,36,66,.045);
  transition:transform .28s ease,box-shadow .28s ease;
}
.service-feature-grid .feature-item::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-58px;
  top:-68px;
  border-radius:50%;
  background:#edf3ff;
  transition:transform .4s ease;
}
.service-feature-grid .feature-item:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(16,36,66,.075);
}
.service-feature-grid .feature-item:hover::after{
  transform:scale(1.12);
}
.service-feature-grid .feature-item > *{
  position:relative;
  z-index:1;
}
.service-feature-grid .feature-item > span{
  display:flex!important;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  margin:0 0 27px!important;
  border-radius:11px;
  background:#f0f5ff;
  color:#3977ff!important;
  font-size:12px!important;
  font-weight:800;
}
.service-feature-grid .feature-item h3{
  margin:0 0 10px!important;
  color:#071326!important;
  font-size:22px!important;
}
.service-feature-grid .feature-item p{
  margin:0!important;
  color:#718096!important;
  font-size:16px!important;
  line-height:1.6!important;
}

/* SEO gets a slightly different subtle structure */
.service-feature-seo .feature-item::after{
  border-radius:0;
  transform:rotate(34deg);
  background:repeating-linear-gradient(
    90deg,
    #f0f4fa 0 13px,
    transparent 13px 25px
  );
}
.service-feature-seo .feature-item:hover::after{
  transform:rotate(39deg) scale(1.08);
}

.services-simple-bottom{
  max-width:1180px;
  margin:16px auto 0;
}

@media(max-width:760px){
  .services-page-simple{padding:46px 18px 68px!important}
  .services-simple-hero{margin-bottom:48px}
  .service-feature{padding:40px 0 50px}
  .service-feature-grid{grid-template-columns:1fr!important;gap:14px!important}
  .service-feature-grid .feature-item{min-height:0;padding:25px 23px!important}
}


/* =========================================================
   V77 — iOS 26-inspired floating island header
   Public header only. Portal/admin/backend untouched.
   ========================================================= */

/* Desktop / tablet */
@media (min-width: 781px){
  .site-header{
    position:sticky!important;
    top:14px!important;
    z-index:180!important;

    width:min(1180px,calc(100% - 36px))!important;
    height:64px!important;
    margin:14px auto 0!important;
    padding:0 14px 0 22px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;

    border:1px solid rgba(255,255,255,.72)!important;
    border-radius:999px!important;
    background:rgba(246,248,251,.74)!important;

    backdrop-filter:blur(26px) saturate(1.35)!important;
    -webkit-backdrop-filter:blur(26px) saturate(1.35)!important;

    box-shadow:
      0 14px 40px rgba(11,23,43,.10),
      0 2px 8px rgba(11,23,43,.04),
      inset 0 1px 0 rgba(255,255,255,.92),
      inset 0 -1px 0 rgba(94,110,135,.05)!important;

    transition:
      width .28s ease,
      background .28s ease,
      box-shadow .28s ease,
      transform .28s ease!important;
  }

  .site-header::before{
    content:""!important;
    position:absolute!important;
    inset:1px!important;
    z-index:-1!important;
    border-radius:inherit!important;
    pointer-events:none!important;
    background:
      linear-gradient(
        115deg,
        rgba(255,255,255,.42),
        rgba(255,255,255,.08) 38%,
        rgba(255,255,255,.20) 62%,
        rgba(255,255,255,.04)
      )!important;
  }

  .site-header .brand-text-logo{
    flex:0 0 auto!important;
    margin:0!important;
    color:#090d14!important;
    font-size:20px!important;
    font-weight:950!important;
    letter-spacing:.095em!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .site-header .desktop-nav{
    display:flex!important;
    position:static!important;
    flex:1 1 auto!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }

  .site-header .desktop-nav a{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:40px!important;
    padding:0 13px!important;
    border-radius:999px!important;

    color:#515d6f!important;
    font-size:12px!important;
    font-weight:720!important;
    letter-spacing:-.01em!important;

    transition:
      color .18s ease,
      background .18s ease,
      transform .18s ease!important;
  }

  .site-header .desktop-nav a:hover{
    color:#101722!important;
    background:rgba(255,255,255,.58)!important;
    transform:translateY(-1px)!important;
  }

  .site-header .header-actions{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    margin:0!important;
  }

  .site-header .header-actions .ghost-btn{
    height:42px!important;
    min-height:42px!important;
    padding:0 15px!important;
    border:1px solid rgba(87,102,125,.14)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.50)!important;
    color:#1a2332!important;
    box-shadow:none!important;
  }

  .site-header .header-actions .primary-btn{
    height:42px!important;
    min-height:42px!important;
    padding:0 18px!important;
    border-radius:999px!important;
    background:#0a1424!important;
    color:#fff!important;
    box-shadow:
      0 7px 18px rgba(8,20,36,.14),
      inset 0 1px 0 rgba(255,255,255,.12)!important;
  }

  .site-header .header-actions .ghost-btn:hover{
    background:rgba(255,255,255,.78)!important;
  }

  .site-header .header-actions .primary-btn:hover{
    background:#111f34!important;
    transform:translateY(-1px)!important;
  }

  .site-header .ios-menu-btn{
    display:none!important;
  }
}

/* Mobile island: brand + floating menu, no portal mockup changes */
@media (max-width:780px){
  .site-header{
    position:sticky!important;
    top:10px!important;
    z-index:180!important;

    width:calc(100% - 24px)!important;
    height:58px!important;
    margin:10px 12px 0!important;
    padding:0 10px 0 17px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;

    border:1px solid rgba(255,255,255,.76)!important;
    border-radius:999px!important;
    background:rgba(247,249,252,.76)!important;

    backdrop-filter:blur(24px) saturate(1.35)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.35)!important;

    box-shadow:
      0 12px 34px rgba(12,24,44,.10),
      inset 0 1px 0 rgba(255,255,255,.92)!important;
  }

  .site-header .brand-text-logo{
    margin:0!important;
    max-width:calc(100% - 62px)!important;
    color:#090d14!important;
    font-size:17px!important;
    font-weight:950!important;
    letter-spacing:.095em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

  .site-header .desktop-nav,
  .site-header .header-actions{
    display:none!important;
  }

  /* Keep the already working mobile button, but visually integrate it into the island */
  .site-header .ios-menu-btn{
    display:flex!important;
    position:absolute!important;
    top:5px!important;
    right:5px!important;
    left:auto!important;
    bottom:auto!important;

    width:48px!important;
    height:48px!important;
    margin:0!important;

    border:1px solid rgba(255,255,255,.62)!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.64)!important;

    backdrop-filter:blur(18px) saturate(1.25)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.25)!important;

    box-shadow:
      0 6px 16px rgba(15,25,45,.09),
      inset 0 1px 0 rgba(255,255,255,.88)!important;

    transform:none!important;
    z-index:4!important;
  }
}

/* Prevent the island from touching the screen on very narrow phones */
@media (max-width:360px){
  .site-header{
    width:calc(100% - 16px)!important;
    margin-left:8px!important;
    margin-right:8px!important;
  }
  .site-header .brand-text-logo{
    font-size:15px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header,
  .site-header *{
    transition:none!important;
  }
}


/* V78 — Tjänster-fliken är avsiktligt tom tills vidare */
body.subpage-mode .services-page.active-page-section{
  display:block!important;
  min-height:calc(100vh - 120px)!important;
  padding:0!important;
  margin:0!important;
  background:#f7f9fc!important;
}
body.subpage-mode[data-current-page="tjanster"] .services-preview{
  display:none!important;
}


/* =========================================================
   V79 — Tjänster / Hemsidor
   Floating island cards in Svea Studio visual language.
   ========================================================= */
body.subpage-mode .services-page.active-page-section{
  min-height:calc(100vh - 96px)!important;
  padding:72px 0 96px!important;
  background:
    radial-gradient(circle at 13% 12%,rgba(121,139,166,.12),transparent 28%),
    radial-gradient(circle at 90% 82%,rgba(205,214,226,.22),transparent 25%),
    #f6f8fb!important;
}

.svc-shell{
  width:min(1360px,calc(100% - 80px));
  margin:0 auto;
}
.svc-eyebrow{
  margin-bottom:28px;
  color:#78869a;
  font-size:12px;
  font-weight:800;
  letter-spacing:.20em;
}
.svc-intro{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.65fr);
  align-items:end;
  gap:80px;
  margin-bottom:58px;
}
.svc-intro h1{
  margin:0;
  max-width:850px;
  color:#081221;
  font-size:clamp(54px,5.6vw,88px);
  line-height:.94;
  letter-spacing:-.065em;
  font-weight:800;
}
.svc-intro h1 span{
  color:#8492a7;
}
.svc-intro>p{
  margin:0 0 8px;
  max-width:520px;
  color:#66758b;
  font-size:17px;
  line-height:1.7;
}

.svc-island-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.svc-island{
  position:relative;
  min-height:280px;
  overflow:hidden;
  padding:34px 36px 32px;
  border:1px solid rgba(109,128,154,.15);
  border-radius:34px;
  background:rgba(255,255,255,.72);
  box-shadow:
    0 22px 55px rgba(28,45,70,.065),
    inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.svc-island:hover{
  transform:translateY(-5px);
  border-color:rgba(71,103,151,.24);
  box-shadow:
    0 28px 65px rgba(28,45,70,.10),
    inset 0 1px 0 rgba(255,255,255,.96);
}
.svc-island::after{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  right:-75px;
  top:-95px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(122,145,178,.13),rgba(122,145,178,0) 70%);
  pointer-events:none;
}
.svc-number{
  display:block;
  margin-bottom:46px;
  color:#8d9aab;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
.svc-island h2{
  position:relative;
  z-index:2;
  margin:0 0 13px;
  color:#0b1525;
  font-size:27px;
  line-height:1.1;
  letter-spacing:-.035em;
}
.svc-island p{
  position:relative;
  z-index:2;
  max-width:560px;
  margin:0;
  color:#69788d;
  font-size:15.5px;
  line-height:1.65;
}

/* Four subtle individual island identities */
.svc-island-a{
  background:
    linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),
    linear-gradient(120deg,rgba(11,31,58,.07),transparent 48%);
}
.svc-island-b::before{
  content:"";
  position:absolute;
  inset:auto -20px -80px auto;
  width:260px;
  height:180px;
  border:1px solid rgba(102,125,159,.10);
  border-radius:50%;
  transform:rotate(-18deg);
}
.svc-island-c{
  background:
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(244,247,251,.76));
}
.svc-island-d::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.42;
  background-image:
    linear-gradient(rgba(108,128,157,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(108,128,157,.06) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to left,#000,transparent 62%);
  -webkit-mask-image:linear-gradient(to left,#000,transparent 62%);
}

/* Minimal custom line visuals — no emoji/icon-font dependency */
.svc-mini-visual{
  position:absolute;
  top:34px;
  right:36px;
  width:68px;
  height:50px;
  opacity:.55;
}
.svc-browser{
  border:2px solid #7e91ab;
  border-radius:9px;
}
.svc-browser::after{
  content:"";
  position:absolute;
  left:0;right:0;top:13px;
  height:2px;background:#7e91ab;
}
.svc-browser span{
  position:relative;
  display:inline-block;
  width:4px;height:4px;
  margin:5px 0 0 6px;
  border-radius:50%;
  background:#7e91ab;
  vertical-align:top;
}
.svc-phone{
  width:31px;
  right:48px;
  border:2px solid #7e91ab;
  border-radius:10px;
}
.svc-phone::before{
  content:"";
  position:absolute;
  left:8px;right:8px;top:5px;
  height:2px;border-radius:2px;background:#7e91ab;
}
.svc-phone span{
  position:absolute;
  width:5px;height:5px;
  bottom:5px;left:50%;
  border:1.5px solid #7e91ab;
  border-radius:50%;
  transform:translateX(-50%);
}
.svc-speed{
  width:72px;
  height:42px;
  border:2px solid #7e91ab;
  border-bottom:0;
  border-radius:72px 72px 0 0;
  transform:translateY(7px);
}
.svc-speed::after{
  content:"";
  position:absolute;
  width:27px;height:2px;
  left:34px;bottom:2px;
  background:#7e91ab;
  transform-origin:left center;
  transform:rotate(-42deg);
}
.svc-speed i{
  position:absolute;
  width:2px;height:8px;
  top:6px;left:50%;
  background:#7e91ab;
  transform-origin:1px 29px;
}
.svc-speed i:nth-child(1){transform:rotate(-52deg)}
.svc-speed i:nth-child(2){transform:rotate(0)}
.svc-speed i:nth-child(3){transform:rotate(52deg)}
.svc-flow span{
  position:absolute;
  width:12px;height:12px;
  border:2px solid #7e91ab;
  border-radius:50%;
}
.svc-flow span:nth-child(1){left:0;top:19px}
.svc-flow span:nth-child(2){right:0;top:0}
.svc-flow span:nth-child(3){right:0;bottom:0}
.svc-flow::before,.svc-flow::after{
  content:"";
  position:absolute;
  width:48px;height:2px;
  left:10px;top:25px;
  background:#7e91ab;
  transform-origin:left center;
}
.svc-flow::before{transform:rotate(-22deg)}
.svc-flow::after{transform:rotate(22deg)}

@media(max-width:900px){
  body.subpage-mode .services-page.active-page-section{padding:54px 0 72px!important}
  .svc-shell{width:min(100% - 34px,760px)}
  .svc-intro{grid-template-columns:1fr;gap:22px;margin-bottom:38px}
  .svc-intro h1{font-size:clamp(46px,11vw,70px)}
  .svc-intro>p{font-size:16px}
  .svc-island-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  body.subpage-mode .services-page.active-page-section{padding-top:42px!important}
  .svc-shell{width:calc(100% - 24px)}
  .svc-eyebrow{margin-bottom:20px}
  .svc-intro{margin-bottom:28px}
  .svc-intro h1{font-size:44px;line-height:.98}
  .svc-island{min-height:245px;padding:27px 25px 26px;border-radius:28px}
  .svc-number{margin-bottom:43px}
  .svc-island h2{font-size:24px}
  .svc-mini-visual{top:27px;right:25px;transform:scale(.88);transform-origin:top right}
  .svc-phone{right:32px}
}
@media(prefers-reduced-motion:reduce){
  .svc-island{transition:none}
}


/* =========================================================
   V81 — second service: SEO & Synlighet
   Same floating-island language as Hemsidor, adapted to SEO.
   ========================================================= */
.svc-divider{
  width:min(1360px,calc(100% - 80px));
  height:1px;
  margin:20px auto 74px;
  background:linear-gradient(90deg,transparent,#d8e0ea 12%,#d8e0ea 88%,transparent);
}
.svc-shell-seo{
  padding-bottom:8px;
}
.svc-shell-seo .svc-intro h1{
  max-width:980px;
}
.svc-shell-seo .svc-island{
  background:rgba(255,255,255,.76);
}
.svc-seo-a::before,
.svc-seo-b::before,
.svc-seo-c::before,
.svc-seo-d::before{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:.38;
}
.svc-seo-a::before{
  width:180px;height:180px;
  right:-42px;bottom:-72px;
  border-radius:50%;
  border:1px solid rgba(116,137,166,.16);
  box-shadow:0 0 0 22px rgba(116,137,166,.045),0 0 0 44px rgba(116,137,166,.025);
}
.svc-seo-b::before{
  inset:0;
  background-image:
    radial-gradient(circle at 82% 28%,rgba(111,133,166,.12) 0 3px,transparent 4px),
    radial-gradient(circle at 72% 50%,rgba(111,133,166,.09) 0 3px,transparent 4px),
    radial-gradient(circle at 88% 68%,rgba(111,133,166,.08) 0 3px,transparent 4px);
}
.svc-seo-c::before{
  width:190px;height:95px;
  right:20px;bottom:18px;
  border-left:1px solid rgba(103,125,158,.10);
  border-bottom:1px solid rgba(103,125,158,.10);
  transform:skewY(-7deg);
}
.svc-seo-d::before{
  width:145px;height:145px;
  right:-35px;top:-42px;
  background:repeating-conic-gradient(
    from 0deg,
    rgba(116,137,166,.08) 0 8deg,
    transparent 8deg 20deg
  );
  border-radius:50%;
}

/* Search icon */
.svc-search{
  width:54px;height:54px;
}
.svc-search::before{
  content:"";
  position:absolute;
  width:25px;height:25px;
  left:6px;top:4px;
  border:2px solid #7e91ab;
  border-radius:50%;
}
.svc-search::after{
  content:"";
  position:absolute;
  width:22px;height:2px;
  left:29px;top:31px;
  background:#7e91ab;
  transform:rotate(45deg);
  transform-origin:left center;
}

/* Location pin */
.svc-pin{
  width:46px;height:54px;
}
.svc-pin::before{
  content:"";
  position:absolute;
  width:27px;height:34px;
  left:9px;top:2px;
  border:2px solid #7e91ab;
  border-radius:18px 18px 22px 22px;
  transform:rotate(45deg);
}
.svc-pin::after{
  content:"";
  position:absolute;
  width:7px;height:7px;
  left:19px;top:13px;
  border:2px solid #7e91ab;
  border-radius:50%;
  background:#fff;
}

/* Trend icon */
.svc-trend{
  width:66px;height:48px;
}
.svc-trend::before{
  content:"";
  position:absolute;
  left:5px;right:5px;bottom:7px;
  height:2px;
  background:linear-gradient(90deg,#7e91ab 0 24%,transparent 24% 31%,#7e91ab 31% 54%,transparent 54% 61%,#7e91ab 61%);
  transform:rotate(-18deg);
}
.svc-trend::after{
  content:"";
  position:absolute;
  width:12px;height:12px;
  right:4px;top:6px;
  border-top:2px solid #7e91ab;
  border-right:2px solid #7e91ab;
}

/* Star / trust icon */
.svc-star{
  width:52px;height:52px;
}
.svc-star::before{
  content:"";
  position:absolute;
  left:11px;top:8px;
  width:28px;height:28px;
  border:2px solid #7e91ab;
  transform:rotate(45deg);
}
.svc-star::after{
  content:"";
  position:absolute;
  left:23px;top:0;
  width:4px;height:48px;
  border-radius:99px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.4);
}

/* Wide "Vad som ingår" island */
.svc-includes{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:56px;
  align-items:start;
  margin-top:22px;
  padding:38px 40px;
  border:1px solid rgba(109,128,154,.15);
  border-radius:34px;
  background:rgba(255,255,255,.76);
  box-shadow:
    0 22px 55px rgba(28,45,70,.055),
    inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.svc-includes .svc-eyebrow{
  margin-bottom:12px;
}
.svc-includes h2{
  margin:0;
  max-width:420px;
  color:#0b1525;
  font-size:32px;
  line-height:1.08;
  letter-spacing:-.04em;
}
.svc-check-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 24px;
}
.svc-check-grid span{
  position:relative;
  padding-left:27px;
  color:#647388;
  font-size:14px;
  line-height:1.45;
}
.svc-check-grid span::before{
  content:"✓";
  position:absolute;
  left:0;top:-1px;
  width:18px;height:18px;
  display:grid;
  place-items:center;
  border:1px solid #ccd6e3;
  border-radius:50%;
  color:#61758f;
  background:#f6f8fb;
  font-size:10px;
  font-weight:900;
}

@media(max-width:900px){
  .svc-divider{
    width:calc(100% - 34px);
    margin:10px auto 54px;
  }
  .svc-includes{
    grid-template-columns:1fr;
    gap:28px;
  }
}
@media(max-width:560px){
  .svc-divider{
    width:calc(100% - 24px);
    margin:4px auto 42px;
  }
  .svc-includes{
    padding:27px 24px;
    border-radius:28px;
  }
  .svc-includes h2{
    font-size:27px;
  }
  .svc-check-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
}


/* V82 — "Vad som ingår" även för Hemsida */
.svc-includes-home{
  margin-top:22px;
  margin-bottom:74px;
  background:
    radial-gradient(circle at 92% 18%,rgba(121,143,174,.08),transparent 24%),
    rgba(255,255,255,.76);
}
.svc-includes-home .svc-check-grid span::before{
  background:#f3f6fa;
  color:#5f748f;
}
@media(max-width:900px){
  .svc-includes-home{margin-bottom:54px}
}
@media(max-width:560px){
  .svc-includes-home{margin-bottom:42px}
}


/* =========================================================
   V83 — match both "Vad som ingår" islands
   ========================================================= */
.svc-includes,
.svc-includes-home{
  display:grid!important;
  grid-template-columns:.78fr 1.22fr!important;
  gap:44px!important;
  align-items:center!important;

  width:100%!important;
  min-height:0!important;
  margin-top:22px!important;
  padding:30px 34px!important;

  border:1px solid rgba(109,128,154,.15)!important;
  border-radius:30px!important;
  background:rgba(255,255,255,.76)!important;

  box-shadow:
    0 18px 46px rgba(28,45,70,.05),
    inset 0 1px 0 rgba(255,255,255,.94)!important;

  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

.svc-includes-home{
  margin-bottom:74px!important;
}

.svc-includes .svc-eyebrow,
.svc-includes-home .svc-eyebrow{
  margin-bottom:10px!important;
}

.svc-includes h2,
.svc-includes-home h2{
  margin:0!important;
  max-width:390px!important;
  color:#0b1525!important;
  font-size:29px!important;
  line-height:1.08!important;
  letter-spacing:-.04em!important;
}

.svc-includes .svc-check-grid,
.svc-includes-home .svc-check-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:11px 22px!important;
}

.svc-includes .svc-check-grid span,
.svc-includes-home .svc-check-grid span{
  padding-left:25px!important;
  font-size:13.5px!important;
  line-height:1.4!important;
}

.svc-includes .svc-check-grid span::before,
.svc-includes-home .svc-check-grid span::before{
  width:17px!important;
  height:17px!important;
  font-size:9px!important;
}

@media(max-width:900px){
  .svc-includes,
  .svc-includes-home{
    grid-template-columns:1fr!important;
    gap:24px!important;
    padding:28px!important;
  }
  .svc-includes-home{margin-bottom:54px!important}
}

@media(max-width:560px){
  .svc-includes,
  .svc-includes-home{
    padding:24px 22px!important;
    border-radius:26px!important;
  }
  .svc-includes h2,
  .svc-includes-home h2{
    font-size:26px!important;
  }
  .svc-includes .svc-check-grid,
  .svc-includes-home .svc-check-grid{
    grid-template-columns:1fr!important;
  }
  .svc-includes-home{margin-bottom:42px!important}
}


/* =========================================================
   V84 — ultra clean Services page
   Smaller cards, calmer hierarchy, more whitespace.
   ========================================================= */
body.subpage-mode .services-page.active-page-section{
  padding:58px 0 82px!important;
  background:
    radial-gradient(circle at 12% 8%,rgba(128,145,169,.075),transparent 24%),
    #f7f9fc!important;
}

.services-page .svc-shell{
  width:min(1180px,calc(100% - 64px))!important;
}

.services-page .svc-eyebrow{
  margin-bottom:18px!important;
  font-size:10px!important;
  letter-spacing:.18em!important;
  color:#8a97a8!important;
}

.services-page .svc-intro{
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.55fr)!important;
  gap:64px!important;
  margin-bottom:34px!important;
}

.services-page .svc-intro h1{
  max-width:760px!important;
  font-size:clamp(46px,4.6vw,68px)!important;
  line-height:.97!important;
  letter-spacing:-.055em!important;
}

.services-page .svc-intro>p{
  max-width:430px!important;
  margin-bottom:3px!important;
  font-size:14.5px!important;
  line-height:1.62!important;
}

/* Smaller, cleaner 4-card grid */
.services-page .svc-island-grid{
  gap:14px!important;
}

.services-page .svc-island{
  min-height:188px!important;
  padding:22px 24px 21px!important;
  border-radius:24px!important;
  border-color:rgba(115,132,155,.12)!important;
  background:rgba(255,255,255,.70)!important;
  box-shadow:
    0 10px 30px rgba(28,45,70,.035),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
}

.services-page .svc-island:hover{
  transform:translateY(-2px)!important;
  box-shadow:
    0 14px 34px rgba(28,45,70,.055),
    inset 0 1px 0 rgba(255,255,255,.94)!important;
}

.services-page .svc-island::after{
  width:150px!important;
  height:150px!important;
  right:-55px!important;
  top:-68px!important;
  opacity:.72!important;
}

.services-page .svc-number{
  margin-bottom:28px!important;
  font-size:10px!important;
}

.services-page .svc-island h2{
  margin-bottom:8px!important;
  font-size:20px!important;
  letter-spacing:-.025em!important;
}

.services-page .svc-island p{
  max-width:480px!important;
  font-size:13px!important;
  line-height:1.52!important;
}

/* Make the decorative symbols quieter and smaller */
.services-page .svc-mini-visual{
  top:21px!important;
  right:23px!important;
  transform:scale(.68)!important;
  transform-origin:top right!important;
  opacity:.35!important;
}
.services-page .svc-phone{
  right:28px!important;
}
.services-page .svc-seo-a::before,
.services-page .svc-seo-b::before,
.services-page .svc-seo-c::before,
.services-page .svc-seo-d::before{
  opacity:.20!important;
}

/* Compact matching include islands */
.services-page .svc-includes,
.services-page .svc-includes-home{
  grid-template-columns:.62fr 1.38fr!important;
  gap:34px!important;
  margin-top:14px!important;
  padding:23px 26px!important;
  border-radius:24px!important;
  box-shadow:
    0 10px 30px rgba(28,45,70,.03),
    inset 0 1px 0 rgba(255,255,255,.92)!important;
}

.services-page .svc-includes-home{
  margin-bottom:52px!important;
}

.services-page .svc-includes .svc-eyebrow,
.services-page .svc-includes-home .svc-eyebrow{
  margin-bottom:7px!important;
}

.services-page .svc-includes h2,
.services-page .svc-includes-home h2{
  max-width:310px!important;
  font-size:23px!important;
  line-height:1.08!important;
}

.services-page .svc-check-grid{
  gap:8px 18px!important;
}

.services-page .svc-check-grid span{
  padding-left:22px!important;
  font-size:12px!important;
  line-height:1.38!important;
}

.services-page .svc-check-grid span::before{
  width:15px!important;
  height:15px!important;
  font-size:8px!important;
}

/* Calm separation between services */
.services-page .svc-divider{
  width:min(1180px,calc(100% - 64px))!important;
  margin:0 auto 48px!important;
  opacity:1!important;
}

.services-page .svc-shell-seo{
  padding-bottom:0!important;
}

/* Remove visual clutter from individual card textures */
.services-page .svc-island-b::before,
.services-page .svc-island-c::before,
.services-page .svc-island-d::before{
  opacity:.18!important;
}

@media(max-width:900px){
  body.subpage-mode .services-page.active-page-section{
    padding:46px 0 64px!important;
  }
  .services-page .svc-shell{
    width:min(720px,calc(100% - 34px))!important;
  }
  .services-page .svc-intro{
    grid-template-columns:1fr!important;
    gap:16px!important;
    margin-bottom:28px!important;
  }
  .services-page .svc-intro h1{
    font-size:clamp(42px,9vw,60px)!important;
  }
  .services-page .svc-island{
    min-height:172px!important;
  }
  .services-page .svc-includes,
  .services-page .svc-includes-home{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .services-page .svc-divider{
    width:calc(100% - 34px)!important;
    margin-bottom:42px!important;
  }
}

@media(max-width:560px){
  body.subpage-mode .services-page.active-page-section{
    padding:38px 0 54px!important;
  }
  .services-page .svc-shell{
    width:calc(100% - 24px)!important;
  }
  .services-page .svc-intro h1{
    font-size:39px!important;
  }
  .services-page .svc-intro>p{
    font-size:14px!important;
  }
  .services-page .svc-island-grid{
    gap:10px!important;
  }
  .services-page .svc-island{
    min-height:158px!important;
    padding:19px 20px!important;
    border-radius:21px!important;
  }
  .services-page .svc-number{
    margin-bottom:24px!important;
  }
  .services-page .svc-island h2{
    font-size:19px!important;
  }
  .services-page .svc-island p{
    font-size:12.5px!important;
  }
  .services-page .svc-mini-visual{
    top:18px!important;
    right:19px!important;
    transform:scale(.60)!important;
  }
  .services-page .svc-includes,
  .services-page .svc-includes-home{
    padding:21px 20px!important;
    border-radius:21px!important;
  }
  .services-page .svc-includes h2,
  .services-page .svc-includes-home h2{
    font-size:21px!important;
  }
  .services-page .svc-check-grid{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .services-page .svc-includes-home{
    margin-bottom:42px!important;
  }
  .services-page .svc-divider{
    width:calc(100% - 24px)!important;
    margin-bottom:36px!important;
  }
}


/* =========================================================
   V85 — Fix first "Vad som ingår"
   Same width/proportions as SEO service #2.
   ========================================================= */
.services-page .svc-shell > .svc-includes,
.services-page .svc-shell > .svc-includes-home{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

.services-page .svc-includes-home{
  display:grid!important;
  grid-template-columns:.62fr 1.38fr!important;
  gap:34px!important;
  align-items:center!important;
  margin-top:14px!important;
  margin-bottom:52px!important;
  padding:23px 26px!important;
  border:1px solid rgba(109,128,154,.15)!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.76)!important;
  box-shadow:
    0 10px 30px rgba(28,45,70,.03),
    inset 0 1px 0 rgba(255,255,255,.92)!important;
}

.services-page .svc-includes-home .svc-check-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px 18px!important;
}

@media(max-width:900px){
  .services-page .svc-includes-home{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
}

@media(max-width:560px){
  .services-page .svc-includes-home{
    padding:21px 20px!important;
    border-radius:21px!important;
    margin-bottom:42px!important;
  }
  .services-page .svc-includes-home .svc-check-grid{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
}


/* =========================================================
   V87 — Cal demo buttons + tighter, cleaner home spacing
   ========================================================= */

/* Buttons remain visually identical to links, with no native button chrome */
.cal-demo-btn{
  font-family:inherit!important;
  cursor:pointer!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.site-header .cal-demo-btn{
  border:0!important;
}
.hero-demo-btn{
  border:0!important;
}

/* Cleaner desktop header island */
@media(min-width:781px){
  .site-header{
    top:10px!important;
    width:min(1160px,calc(100% - 44px))!important;
    height:60px!important;
    margin-top:10px!important;
    padding-left:20px!important;
    padding-right:10px!important;
    box-shadow:
      0 10px 30px rgba(11,23,43,.075),
      0 1px 4px rgba(11,23,43,.025),
      inset 0 1px 0 rgba(255,255,255,.9)!important;
  }
  .site-header .brand-text-logo{
    font-size:19px!important;
  }
  .site-header .desktop-nav a{
    min-height:36px!important;
    padding:0 11px!important;
  }
  .site-header .header-actions .ghost-btn,
  .site-header .header-actions .primary-btn{
    height:40px!important;
    min-height:40px!important;
  }
}

/* Remove the oversized dead zone above the hero content */
@media(min-width:981px){
  .hero{
    min-height:0!important;
    padding-top:82px!important;
    padding-bottom:76px!important;
  }
  .hero-inner,
  .hero-grid{
    align-items:center!important;
  }
  .hero-copy{
    margin-bottom:24px!important;
  }
  .hero-actions{
    margin-top:0!important;
    gap:14px!important;
  }
  .hero-proof{
    margin-top:32px!important;
    padding-top:20px!important;
  }
}

/* Mobile: keep the island compact and both Cal triggers easy to tap */
@media(max-width:780px){
  .site-header{
    top:8px!important;
    margin-top:8px!important;
  }
  .hero{
    padding-top:48px!important;
    padding-bottom:54px!important;
  }
  .hero-actions{
    gap:10px!important;
  }
  .hero-demo-btn{
    width:100%!important;
    justify-content:center!important;
  }
}


/* =========================================================
   V88 — mobile polish
   Match desktop colors, spacing and visual language.
   ========================================================= */
@media(max-width:780px){

  /* Global mobile palette */
  body,
  main,
  .page,
  .section,
  .subpage-section{
    background:#f7f9fc!important;
    color:#0a1424!important;
  }

  /* Header island — same palette as desktop */
  .site-header{
    background:rgba(246,248,251,.78)!important;
    border:1px solid rgba(255,255,255,.78)!important;
    box-shadow:
      0 10px 28px rgba(11,23,43,.08),
      inset 0 1px 0 rgba(255,255,255,.94)!important;
  }
  .site-header .brand-text-logo{
    color:#090d14!important;
  }

  /* Hero */
  .hero{
    background:
      radial-gradient(circle at 14% 10%,rgba(104,132,177,.10),transparent 30%),
      #f7f9fc!important;
    min-height:auto!important;
    padding:44px 16px 50px!important;
  }

  .hero h1,
  .hero-title{
    color:#071326!important;
  }

  .hero h1 em,
  .hero-title em,
  .hero-subline{
    color:#8492a7!important;
  }

  .hero-copy,
  .hero p{
    color:#66758b!important;
  }

  .hero .eyebrow,
  .hero-eyebrow{
    color:#5f718b!important;
  }

  .hero .primary-btn,
  .hero-demo-btn{
    background:#0a1424!important;
    color:#fff!important;
    border:0!important;
    box-shadow:0 8px 20px rgba(10,20,36,.12)!important;
  }

  .hero .text-btn{
    color:#26364f!important;
  }

  .hero-proof{
    border-top:1px solid rgba(86,108,139,.12)!important;
  }
  .hero-proof b{
    color:#3977ff!important;
  }
  .hero-proof span{
    color:#66758b!important;
  }

  /* Portal preview on mobile: compact but keep same navy palette */
  .portal-preview,
  .portal-demo,
  .browser-card,
  .preview-shell{
    background:#0b2346!important;
    color:#fff!important;
  }

  /* Homepage service preview cards */
  .services-preview,
  .services{
    background:#f7f9fc!important;
  }

  .services-preview .service-card,
  .services .service-card{
    border-color:#dce3ec!important;
  }

  .services-preview .service-card:not(.featured),
  .services .service-card:not(.featured){
    background:#fff!important;
    color:#0a1424!important;
  }

  .services-preview .service-card.featured,
  .services .service-card.featured{
    background:linear-gradient(145deg,#091c3a 0%,#0a244a 100%)!important;
  }

  .services-preview .service-card h3,
  .services .service-card h3{
    color:#0a1424!important;
  }
  .services-preview .service-card.featured h3,
  .services .service-card.featured h3{
    color:#fff!important;
  }

  .services-preview .service-card p,
  .services .service-card p{
    color:#718096!important;
  }
  .services-preview .service-card.featured p{
    color:#b8c5d6!important;
  }

  /* Services page */
  body.subpage-mode .services-page.active-page-section{
    background:#f7f9fc!important;
  }
  .services-page .svc-intro h1{
    color:#071326!important;
  }
  .services-page .svc-intro h1 span{
    color:#8492a7!important;
  }
  .services-page .svc-intro>p{
    color:#66758b!important;
  }
  .services-page .svc-island,
  .services-page .svc-includes,
  .services-page .svc-includes-home{
    background:rgba(255,255,255,.78)!important;
    border-color:rgba(109,128,154,.14)!important;
  }

  /* Contact */
  .contact-ref,
  .cta.contact-ref{
    background:
      radial-gradient(circle at 8% 88%,rgba(126,143,169,.10),transparent 28%),
      #fff!important;
  }
  .contact-ref h2,
  .contact-left h2{
    color:#071326!important;
  }
  .contact-ref h2 span,
  .contact-left h2 span{
    color:#8492a7!important;
  }
  .contact-ref p,
  .contact-left p{
    color:#6d7c90!important;
  }
  .contact-ref-form input,
  .contact-ref-form textarea,
  .contact-ref-form select{
    background:#f7f9fc!important;
    color:#0a1424!important;
    border-color:#dce3ec!important;
  }

  /* Footer */
  footer,
  .site-footer{
    background:#f7f9fc!important;
    color:#0a1424!important;
    border-top:1px solid #e3e8ef!important;
  }
  footer a,
  .site-footer a{
    color:#6d7b90!important;
  }

  /* Mobile menu panel */
  .mobile-menu-panel,
  .mobile-menu-sheet{
    background:rgba(247,249,252,.96)!important;
    color:#0a1424!important;
  }
  .mobile-menu-sheet a{
    color:#0a1424!important;
  }

  /* Tighten oversized spaces on phones */
  section{
    scroll-margin-top:82px;
  }
  .section,
  .subpage-section{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .hero-grid,
  .hero-inner{
    gap:28px!important;
  }

  .hero-actions{
    margin-top:22px!important;
  }

  .hero-proof{
    margin-top:26px!important;
    padding-top:18px!important;
  }

  /* Keep buttons touch-friendly */
  .primary-btn,
  .ghost-btn,
  .text-btn,
  .cal-demo-btn{
    min-height:44px!important;
  }
}

/* Very small phones */
@media(max-width:390px){
  .hero{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .site-header{
    width:calc(100% - 16px)!important;
    margin-left:8px!important;
    margin-right:8px!important;
  }
  .hero h1,
  .hero-title{
    font-size:40px!important;
  }
  .hero-copy,
  .hero p{
    font-size:15px!important;
    line-height:1.6!important;
  }
}


/* =========================================================
   V89 — one clean floating header only
   Remove the old header/top divider line.
   ========================================================= */
html, body{
  border-top:0!important;
  box-shadow:none;
}

body::before,
body::after{
  border-top:0!important;
}

/* The floating island is the only visible header surface */
.site-header{
  border-top:1px solid rgba(255,255,255,.82)!important;
  border-bottom:1px solid rgba(214,222,233,.62)!important;
}

/* Remove any leftover line/surface from old header wrappers */
.header-wrap,
.header-shell,
.header-spacer,
.site-header-wrap,
.top-header,
.topbar,
.header-placeholder{
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  background:transparent!important;
}

/* Homepage starts cleanly underneath the floating island */
body:not(.subpage-mode) main,
body:not(.subpage-mode) .hero{
  border-top:0!important;
  box-shadow:none!important;
}

body:not(.subpage-mode) .hero::before{
  border-top:0!important;
}

/* prevent a 1px divider from showing at the top of the hero */
.hero{
  border-top:none!important;
  outline:none!important;
}


/* =========================================================
   V90 — seamless home background + mobile island morph
   ========================================================= */

/* Remove the visible seam/strip around the floating desktop header.
   The home shell and hero now share one continuous background. */
body:not(.subpage-mode),
body:not(.subpage-mode) #public-app{
  background:
    radial-gradient(circle at 14% 8%,rgba(104,132,177,.10),transparent 30%),
    #f7f9fc!important;
}

body:not(.subpage-mode) .hero{
  background:transparent!important;
}

/* No old full-width header line/surface can show behind the island */
body:not(.subpage-mode) .site-header{
  outline:0!important;
}
body:not(.subpage-mode) #public-app,
body:not(.subpage-mode) main,
body:not(.subpage-mode) .hero{
  border-top:0!important;
  box-shadow:none!important;
}

/* MOBILE:
   full floating island at the top -> compact fixed hamburger while scrolling */
@media(max-width:780px){
  body:not(.subpage-mode),
  body:not(.subpage-mode) #public-app{
    background:
      radial-gradient(circle at 14% 8%,rgba(104,132,177,.10),transparent 30%),
      #f7f9fc!important;
  }

  .site-header{
    position:sticky!important;
    top:10px!important;
    left:auto!important;
    right:auto!important;

    width:calc(100% - 24px)!important;
    height:58px!important;
    margin:10px 12px 0!important;
    padding:0 10px 0 17px!important;

    border:1px solid rgba(255,255,255,.78)!important;
    border-radius:999px!important;
    background:rgba(246,248,251,.78)!important;

    backdrop-filter:blur(24px) saturate(1.35)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.35)!important;

    box-shadow:
      0 10px 28px rgba(11,23,43,.09),
      inset 0 1px 0 rgba(255,255,255,.94)!important;

    transition:
      width .32s cubic-bezier(.2,.8,.2,1),
      height .32s cubic-bezier(.2,.8,.2,1),
      top .32s cubic-bezier(.2,.8,.2,1),
      right .32s cubic-bezier(.2,.8,.2,1),
      margin .32s cubic-bezier(.2,.8,.2,1),
      padding .32s cubic-bezier(.2,.8,.2,1),
      border-radius .32s cubic-bezier(.2,.8,.2,1),
      box-shadow .32s ease!important;
  }

  .site-header .brand-text-logo{
    opacity:1!important;
    transform:translateX(0)!important;
    transition:opacity .2s ease,transform .28s ease!important;
  }

  .site-header .ios-menu-btn{
    display:flex!important;
    position:absolute!important;
    top:5px!important;
    right:5px!important;
    left:auto!important;
    width:48px!important;
    height:48px!important;
    margin:0!important;
    border:1px solid rgba(255,255,255,.64)!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.62)!important;
    box-shadow:
      0 5px 15px rgba(15,25,45,.08),
      inset 0 1px 0 rgba(255,255,255,.9)!important;
    z-index:4!important;
    transition:
      width .28s ease,
      height .28s ease,
      top .28s ease,
      right .28s ease,
      background .28s ease,
      box-shadow .28s ease!important;
  }

  /* Scrolled state: the whole island collapses into the hamburger island */
  body.mobile-island-scrolled .site-header{
    position:fixed!important;
    top:12px!important;
    right:12px!important;
    left:auto!important;

    width:54px!important;
    height:54px!important;
    margin:0!important;
    padding:0!important;

    border-radius:20px!important;
    background:rgba(246,248,251,.80)!important;
    box-shadow:
      0 12px 30px rgba(11,23,43,.14),
      inset 0 1px 0 rgba(255,255,255,.95)!important;
  }

  body.mobile-island-scrolled .site-header .brand-text-logo,
  body.mobile-island-scrolled .site-header .desktop-nav,
  body.mobile-island-scrolled .site-header .header-actions{
    opacity:0!important;
    pointer-events:none!important;
    visibility:hidden!important;
  }

  body.mobile-island-scrolled .site-header .brand-text-logo{
    transform:translateX(12px)!important;
  }

  body.mobile-island-scrolled .site-header .ios-menu-btn{
    top:3px!important;
    right:3px!important;
    width:48px!important;
    height:48px!important;
    border-radius:17px!important;
    background:rgba(255,255,255,.54)!important;
    box-shadow:none!important;
  }

  /* Keep content from jumping visually when header switches to fixed */
  body.mobile-island-scrolled #public-app{
    padding-top:0!important;
  }
}

@media(max-width:390px){
  body:not(.mobile-island-scrolled) .site-header{
    width:calc(100% - 16px)!important;
    margin-left:8px!important;
    margin-right:8px!important;
  }
  body.mobile-island-scrolled .site-header{
    right:8px!important;
  }
}


/* =========================================================
   V91 — iOS26 progressive glass island
   Scroll position continuously controls the morph.
   ========================================================= */
@media(max-width:780px){
  :root{
    --island-p:0;
  }

  .site-header{
    /* More transparent / glassy */
    background:rgba(246,248,251,calc(.72 - (var(--island-p) * .10)))!important;
    border-color:rgba(255,255,255,calc(.78 - (var(--island-p) * .12)))!important;

    backdrop-filter:
      blur(calc(22px + (var(--island-p) * 8px)))
      saturate(calc(1.28 + (var(--island-p) * .18)))!important;
    -webkit-backdrop-filter:
      blur(calc(22px + (var(--island-p) * 8px)))
      saturate(calc(1.28 + (var(--island-p) * .18)))!important;

    /* Morph continuously with scroll progress */
    width:calc((100% - 24px) - (var(--island-p) * (100% - 78px)))!important;
    height:calc(58px - (var(--island-p) * 4px))!important;

    margin-left:calc(12px + (var(--island-p) * (100% - 90px)))!important;
    margin-right:12px!important;

    padding-left:calc(17px * (1 - var(--island-p)))!important;
    padding-right:calc(10px - (var(--island-p) * 7px))!important;

    border-radius:calc(999px - (var(--island-p) * 979px))!important;

    box-shadow:
      0 calc(10px + (var(--island-p) * 3px))
        calc(28px + (var(--island-p) * 8px))
        rgba(11,23,43,calc(.08 + (var(--island-p) * .05))),
      inset 0 1px 0 rgba(255,255,255,.94)!important;

    transition:none!important;
    will-change:width,height,margin,padding,border-radius,background,backdrop-filter;
  }

  .site-header::before{
    opacity:calc(1 - (var(--island-p) * .22))!important;
    transition:none!important;
  }

  .site-header .brand-text-logo{
    opacity:calc(1 - (var(--island-p) * 1.35))!important;
    transform:translateX(calc(var(--island-p) * 10px)) scale(calc(1 - (var(--island-p) * .05)))!important;
    transition:none!important;
    will-change:opacity,transform;
  }

  .site-header .ios-menu-btn{
    top:calc(5px - (var(--island-p) * 2px))!important;
    right:calc(5px - (var(--island-p) * 2px))!important;
    width:calc(48px + (var(--island-p) * 0px))!important;
    height:calc(48px + (var(--island-p) * 0px))!important;

    border-radius:calc(24px - (var(--island-p) * 7px))!important;
    background:rgba(255,255,255,calc(.58 - (var(--island-p) * .06)))!important;

    box-shadow:
      0 calc(5px - (var(--island-p) * 3px))
      calc(15px - (var(--island-p) * 8px))
      rgba(15,25,45,calc(.08 - (var(--island-p) * .04))),
      inset 0 1px 0 rgba(255,255,255,.9)!important;

    transition:none!important;
    will-change:top,right,border-radius,background,box-shadow;
  }

  /* Once fully collapsed, keep it fixed in the top-right. */
  body.mobile-island-fixed .site-header{
    position:fixed!important;
    top:12px!important;
    right:12px!important;
    left:auto!important;
    margin:0!important;
    width:54px!important;
    height:54px!important;
    padding:0!important;
    border-radius:20px!important;
  }

  body.mobile-island-fixed .site-header .brand-text-logo{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.mobile-island-fixed .site-header .ios-menu-btn{
    top:3px!important;
    right:3px!important;
    border-radius:17px!important;
  }
}


/* =========================================================
   V92 — mobile island is fixed from the very beginning.
   The entire morph stays visible while scrolling.
   ========================================================= */
@media(max-width:780px){
  .site-header{
    position:fixed!important;
    z-index:9999!important;

    top:calc(10px + (var(--island-p) * 2px))!important;
    left:calc(12px + (var(--island-p) * (100vw - 78px)))!important;
    right:auto!important;

    width:calc((100vw - 24px) - (var(--island-p) * (100vw - 78px)))!important;
    height:calc(58px - (var(--island-p) * 4px))!important;

    margin:0!important;
    padding-left:calc(17px * (1 - var(--island-p)))!important;
    padding-right:calc(10px - (var(--island-p) * 7px))!important;

    border-radius:calc(999px - (var(--island-p) * 979px))!important;
    transition:none!important;
    will-change:left,width,height,top,padding,border-radius,background,backdrop-filter;
  }

  /* Keep page content below the fixed full island.
     This remains stable while the island morphs, so the page does not jump. */
  #public-app{
    padding-top:78px!important;
  }

  body:not(.subpage-mode) .hero{
    padding-top:38px!important;
  }

  body.subpage-mode main > .active-page-section,
  body.subpage-mode .active-page-section{
    scroll-margin-top:92px!important;
  }

  /* No binary hand-off at the end — the same element stays fixed throughout. */
  body.mobile-island-fixed .site-header{
    position:fixed!important;
    top:12px!important;
    left:calc(100vw - 66px)!important;
    right:auto!important;
    width:54px!important;
    height:54px!important;
    margin:0!important;
    padding:0!important;
    border-radius:20px!important;
  }

  body.mobile-island-fixed .site-header .ios-menu-btn{
    top:3px!important;
    right:3px!important;
  }
}

@media(max-width:390px){
  .site-header{
    left:calc(8px + (var(--island-p) * (100vw - 74px)))!important;
    width:calc((100vw - 16px) - (var(--island-p) * (100vw - 70px)))!important;
  }

  body.mobile-island-fixed .site-header{
    left:calc(100vw - 62px)!important;
  }
}


/* =========================================================
   V93 — mobile header clearance
   Keep first-page content fully below the fixed island.
   ========================================================= */
@media(max-width:780px){
  /* Reserve enough room for the fixed island on initial load */
  #public-app{
    padding-top:92px!important;
  }

  body:not(.subpage-mode) .hero{
    padding-top:34px!important;
  }

  /* Extra-safe spacing for the actual first content block */
  body:not(.subpage-mode) .hero > *:first-child,
  body:not(.subpage-mode) .hero-inner,
  body:not(.subpage-mode) .hero-grid{
    scroll-margin-top:110px!important;
  }
}

@media(max-width:390px){
  #public-app{
    padding-top:88px!important;
  }

  body:not(.subpage-mode) .hero{
    padding-top:30px!important;
  }
}


/* =========================================================
   V94 — more mobile clearance + circular collapsed island
   ========================================================= */
@media(max-width:780px){
  /* Significantly more room so the fixed full island never overlaps hero text */
  #public-app{
    padding-top:128px!important;
  }

  body:not(.subpage-mode) .hero{
    padding-top:46px!important;
  }

  /* When fully collapsed, make the entire island a true circle */
  body.mobile-island-fixed .site-header{
    width:56px!important;
    height:56px!important;
    border-radius:50%!important;
    left:calc(100vw - 68px)!important;
    padding:0!important;
  }

  body.mobile-island-fixed .site-header .ios-menu-btn{
    top:3px!important;
    right:3px!important;
    width:50px!important;
    height:50px!important;
    border-radius:50%!important;
  }
}

@media(max-width:390px){
  #public-app{
    padding-top:122px!important;
  }

  body:not(.subpage-mode) .hero{
    padding-top:42px!important;
  }

  body.mobile-island-fixed .site-header{
    left:calc(100vw - 64px)!important;
  }
}


/* =========================================================
   V95 — smoother mobile island + more top clearance
   ========================================================= */
@media(max-width:780px){
  /* Extra room so the full fixed island never covers the first hero copy */
  #public-app{
    padding-top:172px!important;
  }

  body:not(.subpage-mode) .hero{
    padding-top:54px!important;
  }

  /* Final hamburger island = true circle */
  body.mobile-island-fixed .site-header{
    width:58px!important;
    height:58px!important;
    border-radius:50%!important;
    left:calc(100vw - 70px)!important;
  }

  body.mobile-island-fixed .site-header .ios-menu-btn{
    top:3px!important;
    right:3px!important;
    width:52px!important;
    height:52px!important;
    border-radius:50%!important;
  }
}

@media(max-width:390px){
  #public-app{
    padding-top:166px!important;
  }

  body:not(.subpage-mode) .hero{
    padding-top:50px!important;
  }

  body.mobile-island-fixed .site-header{
    left:calc(100vw - 66px)!important;
  }
}


/* =========================================================
   V96 — one glass circle only, no square phase
   ========================================================= */
@media(max-width:780px){
  /*
    Keep the island pill/circle all the way through the morph.
    Radius transitions proportionally from full pill to perfect circle,
    never through a rounded-square look.
  */
  .site-header{
    border-radius:999px!important;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,calc(.50 - (var(--island-p) * .10))),
        rgba(242,246,251,calc(.42 - (var(--island-p) * .08)))
      )!important;

    border:1px solid rgba(255,255,255,calc(.74 - (var(--island-p) * .10)))!important;

    backdrop-filter:
      blur(calc(24px + (var(--island-p) * 8px)))
      saturate(calc(1.34 + (var(--island-p) * .16)))!important;
    -webkit-backdrop-filter:
      blur(calc(24px + (var(--island-p) * 8px)))
      saturate(calc(1.34 + (var(--island-p) * .16)))!important;

    box-shadow:
      0 calc(10px + (var(--island-p) * 3px))
        calc(28px + (var(--island-p) * 8px))
        rgba(11,23,43,calc(.07 + (var(--island-p) * .04))),
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -1px 0 rgba(255,255,255,.25)!important;
  }

  /*
    Remove the second inner-circle look:
    hamburger button becomes transparent and visually merges into the island.
  */
  .site-header .ios-menu-btn{
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    border-radius:50%!important;
  }

  /* Final state = exactly one glass circle */
  body.mobile-island-fixed .site-header{
    width:58px!important;
    height:58px!important;
    border-radius:50%!important;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.48),
        rgba(240,245,251,.38)
      )!important;

    border:1px solid rgba(255,255,255,.68)!important;

    backdrop-filter:blur(30px) saturate(1.48)!important;
    -webkit-backdrop-filter:blur(30px) saturate(1.48)!important;

    box-shadow:
      0 13px 34px rgba(11,23,43,.11),
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 -1px 0 rgba(255,255,255,.22)!important;
  }

  body.mobile-island-fixed .site-header .ios-menu-btn{
    top:3px!important;
    right:3px!important;
    width:52px!important;
    height:52px!important;
    border-radius:50%!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
}


/* =========================================================
   V97 — no snap at the end of the mobile island animation
   One continuous geometry from p=0 to p=1.
   ========================================================= */
@media(max-width:780px){
  /*
    Final geometry is reached purely through --island-p.
    At p=1:
      left = viewport - 66px
      width/height = 54px
      top = 12px
    No class switch is allowed to reposition or resize it.
  */
  .site-header{
    top:calc(10px + (var(--island-p) * 2px))!important;
    left:calc(12px + (var(--island-p) * (100vw - 78px)))!important;
    width:calc((100vw - 24px) - (var(--island-p) * (100vw - 78px)))!important;
    height:calc(58px - (var(--island-p) * 4px))!important;
    margin:0!important;

    padding-left:calc(17px * (1 - var(--island-p)))!important;
    padding-right:calc(10px - (var(--island-p) * 7px))!important;

    /* Always pill/circle — never rounded square */
    border-radius:999px!important;
  }

  .site-header .ios-menu-btn{
    top:calc(5px - (var(--island-p) * 2px))!important;
    right:calc(5px - (var(--island-p) * 2px))!important;
    width:48px!important;
    height:48px!important;
    border-radius:50%!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  /* Neutralize every old binary end-state rule if a stale class ever appears */
  body.mobile-island-fixed .site-header{
    position:fixed!important;
    top:12px!important;
    left:calc(100vw - 66px)!important;
    right:auto!important;
    width:54px!important;
    height:54px!important;
    margin:0!important;
    padding:0 3px 0 0!important;
    border-radius:50%!important;
  }

  body.mobile-island-fixed .site-header .ios-menu-btn{
    top:3px!important;
    right:3px!important;
    width:48px!important;
    height:48px!important;
    border-radius:50%!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
}

@media(max-width:390px){
  .site-header{
    left:calc(8px + (var(--island-p) * (100vw - 70px)))!important;
    width:calc((100vw - 16px) - (var(--island-p) * (100vw - 70px)))!important;
  }
  body.mobile-island-fixed .site-header{
    left:calc(100vw - 62px)!important;
    width:54px!important;
    height:54px!important;
  }
}


/* =========================================================
   V98 — perfectly centered hamburger + more hero clearance
   ========================================================= */
@media(max-width:780px){

  /* Give the fixed island substantially more breathing room on first load */
  #public-app{
    padding-top:220px!important;
  }

  body:not(.subpage-mode) .hero{
    padding-top:62px!important;
  }

  /* Center the hamburger exactly inside both the full island and final circle */
  .site-header .ios-menu-btn{
    display:grid!important;
    place-items:center!important;
    align-items:center!important;
    justify-content:center!important;

    padding:0!important;
    margin:0!important;

    font-size:23px!important;
    line-height:1!important;
    text-align:center!important;
    text-indent:0!important;

    transform:none!important;
  }

  /* The ☰ glyph itself has uneven font metrics on some iPhones.
     Nudge it optically by a tiny amount so it looks centered, not just mathematically centered. */
  .site-header .ios-menu-btn{
    padding-bottom:1px!important;
  }

  body.mobile-island-fixed .site-header .ios-menu-btn{
    display:grid!important;
    place-items:center!important;
    padding:0 0 1px 0!important;
    font-size:23px!important;
    line-height:1!important;
  }
}

@media(max-width:390px){
  #public-app{
    padding-top:210px!important;
  }

  body:not(.subpage-mode) .hero{
    padding-top:58px!important;
  }
}


/* =========================================================
   V99 — mobile first-screen hero layout
   Keep the fixed island clear of text and anchor CTAs low.
   ========================================================= */
@media(max-width:780px){

  /* Remove old accumulated top-spacing conflicts and control the hero directly */
  #public-app{
    padding-top:0!important;
  }

  body:not(.subpage-mode) .hero{
    box-sizing:border-box!important;
    display:block!important;
    min-height:100svh!important;
    width:100%!important;

    /* Fixed island sits around 10–68px; this creates a generous safe zone */
    padding:128px 16px 24px!important;

    background:
      radial-gradient(circle at 14% 8%,rgba(104,132,177,.10),transparent 30%),
      #f7f9fc!important;
  }

  body:not(.subpage-mode) .hero-content{
    box-sizing:border-box!important;
    min-height:calc(100svh - 152px)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }

  /* Keep the opening content simple and readable */
  body:not(.subpage-mode) .hero-content .eyebrow{
    margin:0 0 18px!important;
  }

  body:not(.subpage-mode) .hero-title-final{
    margin:0!important;
    max-width:100%!important;
    font-size:clamp(43px,12vw,58px)!important;
    line-height:.98!important;
    letter-spacing:-.055em!important;
  }

  body:not(.subpage-mode) .hero-copy{
    margin:22px 0 0!important;
    max-width:100%!important;
    font-size:15px!important;
    line-height:1.62!important;
  }

  /* Push both CTAs toward the bottom of the first viewport */
  body:not(.subpage-mode) .hero-actions{
    margin-top:auto!important;
    padding-top:34px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  body:not(.subpage-mode) .hero-actions .primary-btn,
  body:not(.subpage-mode) .hero-actions .text-btn{
    width:100%!important;
    min-height:52px!important;
    justify-content:center!important;
    margin:0!important;
  }

  /*
    Keep only the subtle divider under the secondary CTA on the first mobile screen.
    The three proof labels move out of this opening view to keep it clean.
  */
  body:not(.subpage-mode) .hero-proof{
    flex:0 0 auto!important;
    display:block!important;
    height:1px!important;
    min-height:1px!important;
    margin:22px 0 0!important;
    padding:0!important;
    border-top:1px solid rgba(85,106,137,.16)!important;
    overflow:hidden!important;
  }

  body:not(.subpage-mode) .hero-proof > *{
    display:none!important;
  }

  /* No portal/dashboard mockup in the first mobile hero */
  body:not(.subpage-mode) .hero-console,
  body:not(.subpage-mode) .hero-grid{
    display:none!important;
  }
}

@media(max-width:390px){
  body:not(.subpage-mode) .hero{
    padding:136px 14px 22px!important;
  }

  body:not(.subpage-mode) .hero-content{
    min-height:calc(100svh - 158px)!important;
  }

  body:not(.subpage-mode) .hero-title-final{
    font-size:42px!important;
  }
}


/* =========================================================
   V100 — cleaner Tjänster page + separated footer
   ========================================================= */

/* One consistent width for all service content */
.services-page .svc-shell,
.services-page .svc-divider,
.services-page .svc-includes,
.services-page .svc-includes-home{
  box-sizing:border-box!important;
  width:min(1180px,calc(100% - 64px))!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Service shells should not create extra full-width visual blocks */
.services-page .svc-shell{
  padding-left:0!important;
  padding-right:0!important;
}

/* Keep grids visually aligned */
.services-page .svc-island-grid{
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.services-page .svc-island,
.services-page .svc-includes,
.services-page .svc-includes-home{
  border-radius:22px!important;
  border:1px solid rgba(109,128,154,.13)!important;
  background:rgba(255,255,255,.74)!important;
  box-shadow:
    0 10px 28px rgba(24,42,68,.035),
    inset 0 1px 0 rgba(255,255,255,.92)!important;
}

/* "Vad som ingår" matches the same visual width as the card grid */
.services-page .svc-includes,
.services-page .svc-includes-home{
  display:grid!important;
  grid-template-columns:.68fr 1.32fr!important;
  gap:30px!important;
  align-items:center!important;
  margin-top:14px!important;
  padding:22px 24px!important;
}

/* Home includes should not stretch beyond its own service section */
.services-page .svc-includes-home{
  margin-bottom:46px!important;
}

/* SEO includes stays aligned the same way */
.services-page .svc-shell-seo .svc-includes{
  margin-bottom:0!important;
}

/* Calmer typography */
.services-page .svc-intro{
  margin-bottom:28px!important;
}
.services-page .svc-intro h1{
  font-size:clamp(44px,4.4vw,64px)!important;
}
.services-page .svc-intro>p{
  font-size:14px!important;
  line-height:1.58!important;
}
.services-page .svc-island{
  min-height:176px!important;
  padding:21px 22px!important;
}
.services-page .svc-island h2{
  font-size:19px!important;
}
.services-page .svc-island p{
  font-size:12.8px!important;
  line-height:1.5!important;
}
.services-page .svc-number{
  margin-bottom:24px!important;
}
.services-page .svc-mini-visual{
  transform:scale(.62)!important;
  opacity:.30!important;
}

/* More deliberate spacing between service 01 and 02 */
.services-page .svc-divider{
  height:1px!important;
  margin-top:0!important;
  margin-bottom:42px!important;
  background:linear-gradient(90deg,transparent,#dce3ec 10%,#dce3ec 90%,transparent)!important;
  opacity:.9!important;
}

/* Clean footer separation across site */
footer,
.site-footer{
  position:relative!important;
  border-top:0!important;
  margin-top:0!important;
}

footer::before,
.site-footer::before{
  content:""!important;
  display:block!important;
  width:min(1180px,calc(100% - 64px))!important;
  height:1px!important;
  margin:0 auto 34px!important;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(119,135,158,.32) 10%,
    rgba(119,135,158,.32) 90%,
    transparent
  )!important;
}

/* Mobile */
@media(max-width:760px){
  .services-page .svc-shell,
  .services-page .svc-divider,
  .services-page .svc-includes,
  .services-page .svc-includes-home{
    width:calc(100% - 24px)!important;
    max-width:none!important;
  }

  .services-page .svc-island-grid{
    gap:10px!important;
  }

  .services-page .svc-island{
    min-height:0!important;
    padding:19px 20px!important;
    border-radius:20px!important;
  }

  .services-page .svc-includes,
  .services-page .svc-includes-home{
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding:20px!important;
    border-radius:20px!important;
  }

  .services-page .svc-check-grid{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  .services-page .svc-divider{
    margin-bottom:34px!important;
  }

  footer::before,
  .site-footer::before{
    width:calc(100% - 24px)!important;
    margin-bottom:26px!important;
  }
}


/* V102 — smaller, cleaner typography for the desktop island header only */
@media (min-width:851px){
  .island-brand,
  .header-brand,
  .site-brand,
  .nav-brand,
  .brand{
    font-size:17px!important;
    letter-spacing:.12em!important;
  }

  .header-island .portal-link,
  .header-island .demo-link,
  .header-island .header-portal,
  .header-island .header-demo,
  .desktop-island .portal-link,
  .desktop-island .demo-link{
    font-size:13px!important;
    line-height:1!important;
  }
}


/* V102 final — desktop header typography */
@media (min-width:851px){
  .site-header > .brand.brand-text-logo{
    font-size:12px!important;
    letter-spacing:.14em!important;
  }
  .site-header .header-actions .ghost-btn,
  .site-header .header-actions .primary-btn.small{
    font-size:12px!important;
    line-height:1!important;
    font-weight:700!important;
  }
}


/* V103 — two real Google reviews */
.review-track{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
.review-track .real-google-review{
  width:auto!important;
  min-width:0!important;
  height:100%!important;
  box-sizing:border-box!important;
}
@media(max-width:780px){
  .review-track{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
}


/* V104 — mobile portal intro: remove white text box */
@media(max-width:780px){
  .dark-section#portal{
    background:#071a34!important;
  }

  .dark-section#portal .portal-heading,
  .dark-section#portal .portal-heading > div,
  .dark-section#portal .portal-heading > p{
    background:transparent!important;
    background-color:transparent!important;
    box-shadow:none!important;
    border:none!important;
    border-radius:0!important;
  }

  .dark-section#portal .portal-heading{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0 18px!important;
  }
}


/* V105 — mobile portal intro text in white */
@media(max-width:780px){
  .dark-section#portal .portal-heading h2,
  .dark-section#portal .portal-heading h2 em,
  .dark-section#portal .portal-heading .eyebrow,
  .dark-section#portal .portal-heading .eyebrow.muted,
  .dark-section#portal .portal-heading p{
    color:#fff!important;
  }

  .dark-section#portal .portal-heading .eyebrow span{
    background:#fff!important;
  }
}


/* =========================================================
   V107 — cleaner, simpler and more professional Services tab
   ========================================================= */

/* Overall service page */
body.subpage-mode .services-page.active-page-section{
  padding:64px 0 84px!important;
  background:#f7f9fc!important;
}

.services-page .svc-shell{
  width:min(1120px,calc(100% - 56px))!important;
  max-width:1120px!important;
  margin:0 auto!important;
}

/* Intro */
.services-page .svc-eyebrow{
  margin-bottom:14px!important;
  color:#8b96a6!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.18em!important;
}

.services-page .svc-intro{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.55fr)!important;
  gap:54px!important;
  align-items:end!important;
  margin-bottom:30px!important;
}

.services-page .svc-intro h1{
  margin:0!important;
  max-width:760px!important;
  color:#091424!important;
  font-size:clamp(42px,4.3vw,62px)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
  font-weight:800!important;
}

.services-page .svc-intro h1 span{
  color:#8a97aa!important;
}

.services-page .svc-intro>p{
  margin:0 0 4px!important;
  max-width:420px!important;
  color:#6f7d91!important;
  font-size:14px!important;
  line-height:1.58!important;
}

/* Clean 2x2 card grid */
.services-page .svc-island-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
  margin:0!important;
}

.services-page .svc-island{
  min-height:158px!important;
  padding:20px 21px!important;
  border:1px solid #e3e7ed!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:none!important;
  overflow:hidden!important;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}

.services-page .svc-island:hover{
  transform:translateY(-2px)!important;
  border-color:#d7dde5!important;
  box-shadow:0 10px 28px rgba(20,34,55,.045)!important;
}

.services-page .svc-island::before,
.services-page .svc-island::after{
  opacity:.12!important;
}

.services-page .svc-number{
  margin-bottom:23px!important;
  color:#9aa5b4!important;
  font-size:9px!important;
  letter-spacing:.08em!important;
}

.services-page .svc-island h2{
  margin:0 0 7px!important;
  color:#111827!important;
  font-size:18px!important;
  line-height:1.18!important;
  letter-spacing:-.025em!important;
}

.services-page .svc-island p{
  margin:0!important;
  max-width:500px!important;
  color:#748196!important;
  font-size:12.5px!important;
  line-height:1.5!important;
}

.services-page .svc-mini-visual{
  top:18px!important;
  right:19px!important;
  transform:scale(.54)!important;
  transform-origin:top right!important;
  opacity:.22!important;
}

/* Remove most decorative clutter from individual cards */
.services-page .svc-island-a,
.services-page .svc-island-b,
.services-page .svc-island-c,
.services-page .svc-island-d,
.services-page .svc-seo-a,
.services-page .svc-seo-b,
.services-page .svc-seo-c,
.services-page .svc-seo-d{
  background:#fff!important;
}

/* "Vad som ingår" — same width and visual system */
.services-page .svc-includes,
.services-page .svc-includes-home{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  margin:12px 0 0!important;
  padding:20px 22px!important;
  display:grid!important;
  grid-template-columns:.7fr 1.3fr!important;
  gap:28px!important;
  align-items:center!important;

  border:1px solid #e3e7ed!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:none!important;
}

.services-page .svc-includes-home{
  margin-bottom:44px!important;
}

.services-page .svc-includes .svc-eyebrow,
.services-page .svc-includes-home .svc-eyebrow{
  margin-bottom:7px!important;
}

.services-page .svc-includes h2,
.services-page .svc-includes-home h2{
  margin:0!important;
  max-width:300px!important;
  color:#111827!important;
  font-size:21px!important;
  line-height:1.1!important;
  letter-spacing:-.035em!important;
}

.services-page .svc-check-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px 18px!important;
}

.services-page .svc-check-grid span{
  position:relative!important;
  padding-left:21px!important;
  color:#69778b!important;
  font-size:11.8px!important;
  line-height:1.4!important;
}

.services-page .svc-check-grid span::before{
  width:14px!important;
  height:14px!important;
  font-size:8px!important;
  background:#f5f7fa!important;
  color:#5e6d82!important;
  border-color:#dfe4ea!important;
}

/* Separation between service 01 and 02 */
.services-page .svc-divider{
  width:min(1120px,calc(100% - 56px))!important;
  max-width:1120px!important;
  height:1px!important;
  margin:0 auto 40px!important;
  background:#e3e7ed!important;
  opacity:1!important;
}

/* Footer separation */
footer,
.site-footer{
  border-top:1px solid #e3e7ed!important;
}

/* Mobile */
@media(max-width:780px){
  body.subpage-mode .services-page.active-page-section{
    padding:42px 0 58px!important;
  }

  .services-page .svc-shell{
    width:calc(100% - 24px)!important;
    max-width:none!important;
  }

  .services-page .svc-intro{
    grid-template-columns:1fr!important;
    gap:14px!important;
    margin-bottom:24px!important;
  }

  .services-page .svc-intro h1{
    font-size:38px!important;
    line-height:1!important;
  }

  .services-page .svc-intro>p{
    max-width:100%!important;
    font-size:13.5px!important;
  }

  .services-page .svc-island-grid{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }

  .services-page .svc-island{
    min-height:0!important;
    padding:18px 18px!important;
    border-radius:16px!important;
  }

  .services-page .svc-number{
    margin-bottom:20px!important;
  }

  .services-page .svc-island h2{
    font-size:17px!important;
  }

  .services-page .svc-includes,
  .services-page .svc-includes-home{
    grid-template-columns:1fr!important;
    gap:15px!important;
    padding:18px!important;
    border-radius:16px!important;
  }

  .services-page .svc-includes-home{
    margin-bottom:34px!important;
  }

  .services-page .svc-includes h2,
  .services-page .svc-includes-home h2{
    font-size:20px!important;
  }

  .services-page .svc-check-grid{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  .services-page .svc-divider{
    width:calc(100% - 24px)!important;
    margin-bottom:32px!important;
  }
}


/* V108 — Hemsidor: "Vad som ingår" spans both card columns */
.services-page .svc-includes-home{
  grid-column:1 / -1!important;
  width:100%!important;
  max-width:100%!important;
  justify-self:stretch!important;
}
@media(max-width:780px){
  .services-page .svc-includes-home{grid-column:auto!important;}
}

/* V109 — fix: Hemsidans "Vad som ingår" is exactly as wide as the 2x2 card grid */
.services-page .svc-shell > .svc-includes-home{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}


/* =========================================================
   V110 — first impression fills the first viewport
   Prevent the next section from peeking into the opening screen.
   ========================================================= */

/* Desktop / laptop */
@media(min-width:781px){
  body:not(.subpage-mode) .hero.page-only{
    box-sizing:border-box!important;
    min-height:calc(100vh - 22px)!important;
    padding-top:110px!important;
    padding-bottom:90px!important;
    display:grid!important;
    align-items:center!important;
  }

  body:not(.subpage-mode) .hero-content,
  body:not(.subpage-mode) .hero-console{
    align-self:center!important;
  }

  /* Make sure the next block begins clearly below the fold */
  body:not(.subpage-mode) .section.intro.page-only{
    padding-top:110px!important;
  }
}

/* Mobile keeps its custom first-screen layout from earlier versions */
@media(max-width:780px){
  body:not(.subpage-mode) .hero.page-only{
    min-height:100svh!important;
  }
}


/* =========================================================
   V111 — portal live demo refresh
   Closer to the real customer portal + fixed size on every tab.
   ========================================================= */
@media(min-width:781px){

  /* The demo frame never changes size when switching tabs */
  .dark-section#portal .portal-shell{
    width:min(1180px,calc(100% - 56px))!important;
    max-width:1180px!important;
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;
    margin:48px auto 0!important;

    display:grid!important;
    grid-template-columns:190px minmax(0,1fr)!important;

    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:20px!important;
    background:#fff!important;

    box-shadow:0 28px 70px rgba(0,0,0,.17)!important;
    transform:none!important;
  }

  /* Sidebar closer to the actual customer portal */
  .dark-section#portal .portal-shell > aside{
    height:560px!important;
    min-height:560px!important;
    padding:22px 14px!important;

    display:flex!important;
    flex-direction:column!important;

    background:#fff!important;
    color:#161b22!important;

    border:0!important;
    border-right:1px solid #e5e8ed!important;
    border-radius:0!important;
  }

  .dark-section#portal .portal-logo{
    color:#11161e!important;
    margin-bottom:28px!important;
    font-weight:800!important;
  }

  .dark-section#portal .portal-logo > span{
    background:#111318!important;
    color:#fff!important;
    border-color:#111318!important;
  }

  .dark-section#portal .pnav{
    color:#717a87!important;
    background:transparent!important;
    border-radius:10px!important;
    margin-bottom:3px!important;
  }

  .dark-section#portal .pnav:hover{
    background:#f4f5f7!important;
    color:#151a22!important;
  }

  .dark-section#portal .pnav.active{
    background:#111318!important;
    color:#fff!important;
    box-shadow:none!important;
  }

  .dark-section#portal .pnav b{
    background:#eceff3!important;
    color:#424b58!important;
  }

  .dark-section#portal .pnav.active b{
    background:#fff!important;
    color:#111318!important;
  }

  .dark-section#portal .portal-user{
    margin-top:auto!important;
    border-top:1px solid #e7e9ed!important;
    color:#6e7784!important;
  }

  .dark-section#portal .portal-user > div{
    background:#111318!important;
    color:#fff!important;
  }

  .dark-section#portal .portal-user b{
    color:#171c24!important;
  }

  /* Every tab gets exactly the same content frame */
  .dark-section#portal .portal-main.tab{
    box-sizing:border-box!important;
    width:100%!important;
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;

    padding:28px!important;
    margin:0!important;

    overflow:auto!important;
    overscroll-behavior:contain!important;

    background:#f7f8fa!important;
    color:#172033!important;

    border:0!important;
    border-radius:0!important;

    transform:none!important;
    scale:1!important;
  }

  .dark-section#portal .portal-main.tab:not(.active){
    display:none!important;
  }

  .dark-section#portal .portal-main.tab.active{
    display:block!important;
  }

  /* Stop tab-specific content from visually enlarging the whole demo */
  .dark-section#portal #website,
  .dark-section#portal #support,
  .dark-section#portal #billing,
  .dark-section#portal #security,
  .dark-section#portal #account{
    width:100%!important;
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;
    transform:none!important;
  }

  .dark-section#portal .portal-top{
    margin-bottom:22px!important;
  }

  .dark-section#portal .portal-top h3{
    color:#172033!important;
    font-size:24px!important;
    letter-spacing:-.035em!important;
  }

  .dark-section#portal .portal-top small{
    color:#8a94a3!important;
  }

  .dark-section#portal .outline-light{
    background:#fff!important;
    color:#222a35!important;
    border:1px solid #dde2e8!important;
    box-shadow:none!important;
  }

  /* Cards now match the actual refreshed customer portal */
  .dark-section#portal .pstat,
  .dark-section#portal .activity-card,
  .dark-section#portal .health-card,
  .dark-section#portal .access-grid article,
  .dark-section#portal .ticket,
  .dark-section#portal .invoice-table,
  .dark-section#portal .security-list article,
  .dark-section#portal .settings-box,
  .dark-section#portal .integration-banner{
    background:#fff!important;
    border-color:#e1e5ea!important;
    box-shadow:none!important;
  }

  .dark-section#portal .pstat{
    border-radius:12px!important;
  }

  .dark-section#portal .picon{
    background:#f1f3f6!important;
    color:#253044!important;
  }

  .dark-section#portal .access-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    margin-top:22px!important;
  }

  .dark-section#portal .access-grid article{
    padding:20px!important;
    border-radius:13px!important;
  }

  .dark-section#portal .access-grid button{
    background:#111318!important;
    color:#fff!important;
  }

  /* No hover scaling — keep exact demo dimensions */
  .dark-section#portal .portal-shell:hover,
  .dark-section#portal .portal-main:hover,
  .dark-section#portal .access-grid article:hover,
  .dark-section#portal .pstat:hover{
    transform:none!important;
    scale:1!important;
  }
}


/* =========================================================
   V112 — realistic client portal demo
   Matches the actual customer portal features.
   ========================================================= */
@media(min-width:781px){
  .dark-section#portal .portal-shell{
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;
  }

  .dark-section#portal .portal-main.tab{
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;
  }

  .portal-stat-grid-real{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  .portal-bottom-real{
    grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr)!important;
  }

  .portal-quick-card{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
  }

  .portal-quick-btn{
    width:100%!important;
    padding:11px 12px!important;
    border:1px solid #dfe3e8!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#202833!important;
    text-align:left!important;
    font-weight:700!important;
  }

  .portal-quick-btn:hover{
    background:#f7f8fa!important;
  }

  .service-demo-list article,
  .revision-demo-list article{
    display:flex!important;
    align-items:center!important;
    gap:16px!important;
    padding:18px!important;
    border:1px solid #e1e5ea!important;
    border-radius:14px!important;
    background:#fff!important;
  }

  .service-demo-list article{
    justify-content:flex-start!important;
  }

  .service-demo-icon{
    width:44px!important;
    height:44px!important;
    border-radius:12px!important;
    display:grid!important;
    place-items:center!important;
    background:#111318!important;
    color:#fff!important;
    font-weight:800!important;
  }

  .service-demo-list article > div:nth-child(2){
    flex:1!important;
  }

  .service-demo-list h4{
    margin:3px 0 4px!important;
    color:#172033!important;
    font-size:18px!important;
  }

  .service-demo-list p{
    margin:0!important;
    color:#758196!important;
    font-size:13px!important;
  }

  .portal-status{
    padding:6px 10px!important;
    border-radius:999px!important;
    background:#eef7f2!important;
    color:#247153!important;
    font-size:11px!important;
    font-weight:800!important;
  }

  .revision-demo-list{
    display:grid!important;
    gap:10px!important;
  }

  .revision-demo-list article{
    justify-content:space-between!important;
  }

  .revision-demo-list small{
    display:block!important;
    margin-top:4px!important;
    color:#8a94a3!important;
  }

  .revision-credit-box{
    margin-top:16px!important;
    padding:18px!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:2px 14px!important;
    align-items:center!important;
    border:1px solid #e1e5ea!important;
    border-radius:14px!important;
    background:#fff!important;
  }

  .revision-credit-box strong{
    grid-row:1/3!important;
    grid-column:2!important;
    font-size:28px!important;
    color:#172033!important;
  }

  .revision-credit-box small,
  .revision-credit-box span{
    color:#7c8796!important;
  }

  .portal-help-list{
    display:grid!important;
    gap:8px!important;
  }

  .portal-help-list details{
    padding:14px 16px!important;
    border:1px solid #e1e5ea!important;
    border-radius:12px!important;
    background:#fff!important;
  }

  .portal-help-list summary{
    cursor:pointer!important;
    font-weight:700!important;
    color:#202833!important;
  }

  .portal-help-list p{
    margin:10px 0 0!important;
    color:#758196!important;
    font-size:13px!important;
    line-height:1.55!important;
  }
}


/* =========================================================
   V113 — Portal live demo
   Blue sidebar again, flush-left menu, cleaner layout,
   and enough top room so the blue intro text is fully visible.
   ========================================================= */

/* Make sure the fixed floating header never covers the blue portal intro */
.dark-section#portal{
  padding-top:150px!important;
}

.dark-section#portal .portal-heading{
  width:min(1180px,calc(100% - 56px))!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:0!important;
  position:relative!important;
  z-index:1!important;
}

.dark-section#portal .portal-heading h2{
  margin-top:14px!important;
}

@media(min-width:781px){

  /* Keep the demo exactly the same size on every tab */
  .dark-section#portal .portal-shell{
    width:min(1180px,calc(100% - 56px))!important;
    max-width:1180px!important;
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;
    margin:48px auto 0!important;

    display:grid!important;
    grid-template-columns:205px minmax(0,1fr)!important;

    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:20px!important;
    background:#f7f8fa!important;
    box-shadow:0 28px 70px rgba(0,0,0,.16)!important;
  }

  /* Blue sidebar like the original demo, but cleaner */
  .dark-section#portal .portal-shell > aside{
    height:560px!important;
    min-height:560px!important;

    padding:22px 14px 18px 14px!important;
    margin:0!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;

    background:linear-gradient(180deg,#0b2447 0%,#0a2140 100%)!important;
    color:#dce7f7!important;

    border:0!important;
    border-right:1px solid rgba(255,255,255,.08)!important;
    border-radius:0!important;
  }

  /* Move the menu fully to the left edge inside the blue sidebar */
  .dark-section#portal .portal-logo,
  .dark-section#portal .pnav,
  .dark-section#portal .portal-user{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  .dark-section#portal .portal-logo{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    margin:0 0 26px!important;
    padding:0 8px!important;
    color:#fff!important;
    font-weight:800!important;
  }

  .dark-section#portal .portal-logo > span{
    width:30px!important;
    height:30px!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 30px!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.54)!important;
    border:1px solid #4f8cff!important;
    color:#8cb0ff!important;
  }

  .dark-section#portal .pnav{
    min-height:44px!important;
    padding:0 11px!important;
    margin:0 0 4px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;

    text-align:left!important;
    color:#9fb0c9!important;
    background:transparent!important;
    border:0!important;
    border-radius:10px!important;
    box-shadow:none!important;
  }

  .dark-section#portal .pnav span{
    flex:1!important;
    text-align:left!important;
  }

  .dark-section#portal .pnav:hover{
    background:rgba(255,255,255,.06)!important;
    color:#fff!important;
  }

  .dark-section#portal .pnav.active{
    background:#173e72!important;
    color:#fff!important;
  }

  .dark-section#portal .pnav b{
    min-width:22px!important;
    height:22px!important;
    padding:0 6px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
    background:#4f8cff!important;
    color:#fff!important;
    font-size:10px!important;
  }

  .dark-section#portal .portal-user{
    margin-top:auto!important;
    padding:14px 8px 0!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
    color:#9fb0c9!important;
  }

  .dark-section#portal .portal-user > div{
    background:#e8eef7!important;
    color:#1c2e48!important;
  }

  .dark-section#portal .portal-user b{
    color:#fff!important;
  }

  .dark-section#portal .portal-user small{
    color:#93a6c1!important;
  }

  /* Main content stays stable and polished */
  .dark-section#portal .portal-main.tab{
    box-sizing:border-box!important;
    width:100%!important;
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;
    margin:0!important;
    padding:28px!important;
    overflow:auto!important;

    background:#f7f8fa!important;
    color:#172033!important;

    border:0!important;
    border-radius:0!important;
    transform:none!important;
  }

  .dark-section#portal .portal-main.tab:not(.active){
    display:none!important;
  }

  .dark-section#portal .portal-main.tab.active{
    display:block!important;
  }

  /* Cleaner cards while keeping the realistic content from V112 */
  .dark-section#portal .pstat,
  .dark-section#portal .activity-card,
  .dark-section#portal .health-card,
  .dark-section#portal .service-demo-list article,
  .dark-section#portal .revision-demo-list article,
  .dark-section#portal .ticket,
  .dark-section#portal .invoice-table,
  .dark-section#portal .portal-help-list details,
  .dark-section#portal .revision-credit-box{
    background:#fff!important;
    border:1px solid #e2e6eb!important;
    box-shadow:none!important;
  }

  .dark-section#portal .portal-stat-grid-real{
    gap:10px!important;
  }

  .dark-section#portal .pstat{
    min-width:0!important;
    padding:14px!important;
    border-radius:12px!important;
  }

  .dark-section#portal .pstat b{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .dark-section#portal .portal-bottom-real{
    gap:12px!important;
  }

  .dark-section#portal .portal-quick-btn{
    border-radius:10px!important;
    background:#f8f9fb!important;
    border:1px solid #e0e4e9!important;
    color:#202833!important;
  }

  .dark-section#portal .portal-quick-btn:hover{
    background:#f1f3f6!important;
  }
}

/* Mobile keeps the blue intro readable and the large demo hidden as before */
@media(max-width:780px){
  .dark-section#portal{
    padding-top:90px!important;
  }

  .dark-section#portal .portal-heading{
    width:100%!important;
    max-width:none!important;
    padding:0 18px!important;
  }

  .dark-section#portal .portal-heading h2,
  .dark-section#portal .portal-heading h2 em,
  .dark-section#portal .portal-heading p,
  .dark-section#portal .portal-heading .eyebrow{
    color:#fff!important;
  }
}


/* V114 — portal demo finishing fixes */
@media(min-width:781px){
  .dark-section#portal .portal-shell{
    display:grid!important;
    grid-template-columns:205px minmax(0,1fr)!important;
    padding:0!important;
    column-gap:0!important;
    background:#f7f8fa!important;
  }

  .dark-section#portal .portal-shell > aside{
    grid-column:1!important;
    margin:0!important;
    padding-left:14px!important;
    transform:none!important;
    position:relative!important;
    left:0!important;
    width:205px!important;
    min-width:205px!important;
    max-width:205px!important;
    align-self:stretch!important;
    justify-self:start!important;
    border-radius:0!important;
  }

  .dark-section#portal .portal-main.tab{
    grid-column:2!important;
    margin:0!important;
    transform:none!important;
    left:auto!important;
    width:100%!important;
  }
}


/* V116 — populated Tjänster demo */
.portal-services-demo{padding:26px 28px;color:#0b1730}
.portal-services-demo .psd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.portal-services-demo .psd-kicker{display:block;color:#8793a6;font-size:12px;margin-bottom:5px}
.portal-services-demo h3{margin:0 0 5px;font-size:25px;line-height:1.15}
.portal-services-demo .psd-head p{margin:0;color:#8490a2;font-size:13px}
.portal-services-demo .psd-status{background:#eaf2ff;color:#3478f6;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:700;white-space:nowrap}
.portal-services-demo .psd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.portal-services-demo .psd-card{display:flex;gap:13px;padding:17px;border:1px solid #e1e6ee;border-radius:14px;background:#fff;min-height:112px}
.portal-services-demo .psd-icon{width:38px;height:38px;border-radius:10px;background:#eef4ff;display:grid;place-items:center;color:#3478f6;font-weight:700;flex:0 0 auto}
.portal-services-demo .psd-copy{min-width:0;flex:1}
.portal-services-demo .psd-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.portal-services-demo .psd-top strong{font-size:14px}
.portal-services-demo .psd-top span{font-size:10px;color:#26845b;background:#edf8f2;border-radius:999px;padding:4px 7px}
.portal-services-demo .psd-card p{font-size:12px;line-height:1.45;color:#778397;margin:8px 0 10px}
.portal-services-demo .psd-card small{font-size:11px;color:#3478f6}
@media(max-width:780px){.portal-services-demo{padding:18px}.portal-services-demo .psd-grid{grid-template-columns:1fr}.portal-services-demo h3{font-size:21px}}


/* V117 — portal services tab */
.portal-services-v117{padding:28px 30px;color:#111c32;width:100%;box-sizing:border-box}
.services-v117-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px}
.services-v117-label{display:block;font-size:12px;color:#8b97aa;margin-bottom:5px}
.services-v117-head h3{font-size:25px;line-height:1.15;margin:0 0 6px}
.services-v117-head p{font-size:13px;color:#8591a4;margin:0}
.services-v117-count{font-size:11px;font-weight:700;color:#2f73ef;background:#edf4ff;border-radius:999px;padding:7px 10px;white-space:nowrap}
.services-v117-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.services-v117-item{display:flex;gap:14px;background:#fff;border:1px solid #e1e6ee;border-radius:14px;padding:18px;min-height:126px;box-sizing:border-box}
.services-v117-symbol{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:#edf4ff;color:#3478f6;display:grid;place-items:center;font-size:17px}
.services-v117-info{min-width:0;flex:1}
.services-v117-title{display:flex;justify-content:space-between;align-items:center;gap:10px}
.services-v117-title strong{font-size:15px}
.services-v117-title span{font-size:10px;font-weight:700;color:#23815a;background:#edf8f2;padding:4px 7px;border-radius:999px}
.services-v117-info p{font-size:12px;line-height:1.5;color:#778397;margin:9px 0 13px}
.services-v117-meta{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#3478f6}
@media(max-width:780px){.portal-services-v117{padding:18px}.services-v117-list{grid-template-columns:1fr}.services-v117-head h3{font-size:21px}}


/* V125 — newsletter consent alignment + success feedback */
#newsletterForm .newsletter-consent{
  grid-column:1 / -1!important;
  display:grid!important;
  grid-template-columns:16px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:8px!important;
  margin:1px 0 0!important;
  padding:0!important;
  min-height:18px!important;
  font-size:11px!important;
  line-height:1.25!important;
  color:#6c7671!important;
  cursor:pointer!important;
}
#newsletterForm .newsletter-consent input[type="checkbox"]{
  appearance:auto!important;
  -webkit-appearance:checkbox!important;
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  justify-self:center!important;
  position:static!important;
  transform:none!important;
}
#newsletterForm .newsletter-consent > span{
  display:block!important;
  margin:0!important;
  padding:0!important;
  line-height:1.25!important;
  align-self:center!important;
}
#newsletterForm .newsletter-msg{
  grid-column:1 / -1!important;
  min-height:18px!important;
  margin-top:2px!important;
  font-size:12px!important;
  font-weight:700!important;
}
#newsletterForm .newsletter-msg.success{
  color:#247153!important;
}
#newsletterForm .newsletter-msg.error{
  color:#b33a4a!important;
}
#newsletterForm.is-subscribed input[type="email"]{
  opacity:.72!important;
}
#newsletterForm.is-subscribed .primary-btn{
  opacity:.72!important;
  pointer-events:none!important;
}


/* V126 — 5 FAQ on home, all 10 on the dedicated FAQ page */
body:not(.site-subpage) .faq-list .faq-full-only{
  display:none!important;
}
body.site-subpage[data-current-page="faq"] .faq-list .faq-full-only,
body.subpage-mode[data-current-page="faq"] .faq-list .faq-full-only{
  display:block!important;
}


/* V129 — enhetlig storlek på webbplatsens stora rubriker */
@media (min-width:701px){
  .corporate > div > h2,
  .portal-showcase h2,
  .process h2,
  .reviews h2,
  .security h2,
  .newsletter h2,
  .faq > div > h2,
  .contact-copy h2,
  .services-page .svc-intro h1,
  .services-page .seo-intro h1,
  .public-page-hero h1{
    font-size:60px!important;
    line-height:1.02!important;
    letter-spacing:-.055em!important;
  }
}
@media (max-width:700px){
  .corporate > div > h2,
  .portal-showcase h2,
  .process h2,
  .reviews h2,
  .security h2,
  .newsletter h2,
  .faq > div > h2,
  .contact-copy h2,
  .services-page .svc-intro h1,
  .services-page .seo-intro h1,
  .public-page-hero h1{
    font-size:44px!important;
    line-height:1.04!important;
    letter-spacing:-.045em!important;
  }
}


/* V130 — FINAL: alla stora blockrubriker 60px desktop / 44px mobil */
@media (min-width:701px){
  body:not(.customer-portal) main section > h1,
  body:not(.customer-portal) main section > h2,
  body:not(.customer-portal) main section > div > h1,
  body:not(.customer-portal) main section > div > h2,
  body:not(.customer-portal) .public-page-hero h1,
  body:not(.customer-portal) .svc-intro h1,
  body:not(.customer-portal) .seo-intro h1,
  body:not(.customer-portal) .portal-showcase h2,
  body:not(.customer-portal) .process h2,
  body:not(.customer-portal) .reviews h2,
  body:not(.customer-portal) .security h2,
  body:not(.customer-portal) .newsletter h2,
  body:not(.customer-portal) .faq > div:first-child > h2,
  body:not(.customer-portal) .contact-copy h2{
    font-size:60px!important;
    line-height:1.02!important;
    letter-spacing:-.055em!important;
  }
}
@media (max-width:700px){
  body:not(.customer-portal) main section > h1,
  body:not(.customer-portal) main section > h2,
  body:not(.customer-portal) main section > div > h1,
  body:not(.customer-portal) main section > div > h2,
  body:not(.customer-portal) .public-page-hero h1,
  body:not(.customer-portal) .svc-intro h1,
  body:not(.customer-portal) .seo-intro h1,
  body:not(.customer-portal) .portal-showcase h2,
  body:not(.customer-portal) .process h2,
  body:not(.customer-portal) .reviews h2,
  body:not(.customer-portal) .security h2,
  body:not(.customer-portal) .newsletter h2,
  body:not(.customer-portal) .faq > div:first-child > h2,
  body:not(.customer-portal) .contact-copy h2{
    font-size:44px!important;
    line-height:1.04!important;
    letter-spacing:-.045em!important;
  }
}

/* Hero har två rader där den andra tidigare hade egen font-size inline/CSS */
@media (min-width:701px){
  body:not(.customer-portal) .hero h1,
  body:not(.customer-portal) .hero h1 span,
  body:not(.customer-portal) .hero h1 em{
    font-size:60px!important;
  }
}
@media (max-width:700px){
  body:not(.customer-portal) .hero h1,
  body:not(.customer-portal) .hero h1 span,
  body:not(.customer-portal) .hero h1 em{
    font-size:44px!important;
  }
}


/* V131 — kompakt Google Reviews-slider */
.reviews .reviews-inner{
  align-items:center!important;
}
.review-track{
  position:relative!important;
  display:block!important;
  width:min(100%,620px)!important;
  min-height:270px!important;
  margin-left:auto!important;
}
.review-track .real-google-review{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:250px!important;
  padding:24px 26px!important;
  border-radius:22px!important;
  background:rgba(246,255,220,.94)!important;
  border:1px solid rgba(10,31,60,.08)!important;
  box-shadow:0 18px 50px rgba(10,31,60,.08)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateX(18px) scale(.985)!important;
  transition:opacity .55s ease,transform .55s ease,visibility .55s ease!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.review-track .real-google-review.active{
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(0) scale(1)!important;
  pointer-events:auto!important;
}
.review-track .real-google-review .stars{
  font-size:14px!important;
  letter-spacing:3px!important;
  margin-bottom:8px!important;
}
.review-track .real-google-review p{
  margin:0 0 18px!important;
  font-size:15px!important;
  line-height:1.5!important;
  letter-spacing:-.01em!important;
  overflow:auto!important;
  scrollbar-width:none!important;
}
.review-track .real-google-review p::-webkit-scrollbar{
  display:none!important;
}
.review-track .real-google-review > div:last-child{
  margin-top:auto!important;
}
.review-track .real-google-review > div:last-child > span{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
}
.review-track .real-google-review b{
  font-size:13px!important;
}
.review-track .real-google-review small{
  margin-top:2px!important;
  font-size:10px!important;
}
.review-dots{
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  gap:7px!important;
  z-index:4!important;
}
.review-dots button{
  width:7px!important;
  height:7px!important;
  min-width:7px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(10,31,60,.22)!important;
  cursor:pointer!important;
  transition:width .25s ease,background .25s ease!important;
}
.review-dots button.active{
  width:22px!important;
  background:#0a1f3c!important;
}
@media(max-width:1100px){
  .review-track{
    margin-left:0!important;
  }
}
@media(max-width:700px){
  .review-track{
    width:100%!important;
    min-height:292px!important;
  }
  .review-track .real-google-review,
  .review-track .real-google-review:last-child{
    display:flex!important;
    height:270px!important;
    padding:21px 20px!important;
  }
  .review-track .real-google-review p{
    font-size:14px!important;
    line-height:1.48!important;
  }
}


/* V132 — vita Google-recensionskort, gula stjärnor, hela texten synlig */
.review-track{
  min-height:330px!important;
}
.review-track .real-google-review{
  height:auto!important;
  min-height:305px!important;
  max-height:none!important;
  background:#ffffff!important;
  overflow:visible!important;
}
.review-track .real-google-review .stars{
  color:#f4b400!important;
}
.review-track .real-google-review p{
  overflow:visible!important;
  max-height:none!important;
  height:auto!important;
  scrollbar-width:auto!important;
}
@media(max-width:700px){
  .review-track{
    min-height:385px!important;
  }
  .review-track .real-google-review,
  .review-track .real-google-review:last-child{
    height:auto!important;
    min-height:360px!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .review-track .real-google-review p{
    overflow:visible!important;
    max-height:none!important;
    height:auto!important;
  }
}


/* V133 — rullande kundloggor ersätter Projekt/Kundcase */
.client-logo-marquee{
  width:100%;
  overflow:hidden;
  padding:34px 0;
  background:#fff;
  border-top:1px solid #e8edf3;
  border-bottom:1px solid #e8edf3;
  position:relative;
}
.client-logo-marquee::before,
.client-logo-marquee::after{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  width:10vw;
  pointer-events:none;
}
.client-logo-marquee::before{
  left:0;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,0));
}
.client-logo-marquee::after{
  right:0;
  background:linear-gradient(270deg,#fff,rgba(255,255,255,0));
}
.client-logo-track{
  width:max-content;
  display:flex;
  align-items:center;
  animation:clientLogosLTR 22s linear infinite;
  will-change:transform;
}
.client-logo-set{
  display:flex;
  align-items:center;
  gap:120px;
  padding-right:120px;
}
.client-logo{
  flex:0 0 auto;
  min-width:250px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  color:#111827;
  opacity:.78;
  filter:grayscale(1);
  transition:opacity .25s ease,filter .25s ease,transform .25s ease;
}
.client-logo:hover{
  opacity:1;
  filter:grayscale(0);
  transform:translateY(-1px);
}
.client-logo strong{
  font-family:Manrope,sans-serif;
  font-size:18px;
  letter-spacing:.11em;
  white-space:nowrap;
}
.client-logo-golden .golden-mark{
  width:42px;
  height:42px;
  border:1.5px solid currentColor;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:500;
}
.client-logo-cafino strong{
  font-family:Georgia,serif;
  font-size:24px;
  letter-spacing:.16em;
  font-weight:600;
}
@keyframes clientLogosLTR{
  from{transform:translateX(-33.3333%)}
  to{transform:translateX(0)}
}
@media(max-width:700px){
  .client-logo-marquee{padding:25px 0}
  .client-logo-set{gap:64px;padding-right:64px}
  .client-logo{min-width:205px;height:58px}
  .client-logo strong{font-size:15px}
  .client-logo-cafino strong{font-size:20px}
  .client-logo-golden .golden-mark{width:36px;height:36px;font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .client-logo-track{animation-play-state:paused}
}


/* V134 — riktiga uppladdade kundloggor i banderollen */
.client-logo-set{
  gap:105px!important;
  padding-right:105px!important;
}
.client-logo{
  min-width:270px!important;
  height:82px!important;
  padding:0 18px!important;
}
.client-logo img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:245px!important;
  max-height:68px!important;
  object-fit:contain!important;
  filter:none!important;
}
.client-logo:hover img{
  filter:none!important;
}
@media(max-width:700px){
  .client-logo-set{
    gap:58px!important;
    padding-right:58px!important;
  }
  .client-logo{
    min-width:205px!important;
    height:66px!important;
    padding:0 10px!important;
  }
  .client-logo img{
    max-width:185px!important;
    max-height:54px!important;
  }
}


/* V135 — kundloggorna visas alltid i sina originalfärger */
.client-logo{
  opacity:1!important;
  filter:none!important;
}
.client-logo img{
  opacity:1!important;
  filter:none!important;
}
.client-logo:hover{
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
.client-logo:hover img{
  opacity:1!important;
  filter:none!important;
}


/* V136 — språkknapp i headern */
.lang-toggle{
  height:42px!important;
  min-width:66px!important;
  padding:0 13px!important;
  border:1px solid rgba(11,19,36,.10)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.68)!important;
  color:#172033!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  font-family:Manrope,sans-serif!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  cursor:pointer!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  transition:background .2s ease,transform .2s ease,border-color .2s ease!important;
}
.lang-toggle:hover{
  background:#fff!important;
  border-color:rgba(11,19,36,.18)!important;
  transform:translateY(-1px)!important;
}
.lang-toggle .lang-flag{
  font-size:16px!important;
  line-height:1!important;
}
.mobile-language-toggle{
  width:100%!important;
  min-height:48px!important;
  border:1px solid rgba(11,19,36,.10)!important;
  border-radius:14px!important;
  background:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  font-weight:800!important;
  color:#172033!important;
  cursor:pointer!important;
}
@media(max-width:700px){
  .header-actions .lang-toggle{
    display:none!important;
  }
}


/* V137 — mjuk språkväxling */
.site-header nav,
.site-header .header-actions,
main,
footer,
#cookieBanner{
  transition:
    opacity .28s cubic-bezier(.22,.61,.36,1),
    transform .32s cubic-bezier(.22,.61,.36,1),
    filter .28s cubic-bezier(.22,.61,.36,1);
}
html.language-switching .site-header nav,
html.language-switching main,
html.language-switching footer,
html.language-switching #cookieBanner{
  opacity:.32!important;
  transform:translateY(4px)!important;
  filter:blur(2px)!important;
}
html.language-swapped .site-header nav,
html.language-swapped main,
html.language-swapped footer,
html.language-swapped #cookieBanner{
  opacity:1!important;
  transform:translateY(0)!important;
  filter:blur(0)!important;
}
.lang-toggle,
.mobile-language-toggle{
  overflow:hidden!important;
}
.lang-toggle .lang-flag,
.mobile-language-toggle .lang-flag{
  display:inline-block!important;
  transform-origin:center!important;
}
.lang-toggle.is-switching .lang-flag,
.mobile-language-toggle.is-switching .lang-flag{
  animation:languageFlagFlip .62s cubic-bezier(.2,.8,.2,1);
}
.lang-toggle.is-switching .lang-code,
.mobile-language-toggle.is-switching .lang-code{
  animation:languageCodePulse .62s cubic-bezier(.2,.8,.2,1);
}
@keyframes languageFlagFlip{
  0%{transform:rotateY(0deg) scale(1);opacity:1}
  45%{transform:rotateY(90deg) scale(.75);opacity:.25}
  55%{transform:rotateY(-90deg) scale(.75);opacity:.25}
  100%{transform:rotateY(0deg) scale(1);opacity:1}
}
@keyframes languageCodePulse{
  0%,100%{transform:translateY(0);opacity:1}
  45%{transform:translateY(-4px);opacity:.18}
  55%{transform:translateY(4px);opacity:.18}
}
@media(prefers-reduced-motion:reduce){
  .site-header nav,.site-header .header-actions,main,footer,#cookieBanner{
    transition:none!important;
  }
  .lang-toggle.is-switching .lang-flag,
  .mobile-language-toggle.is-switching .lang-flag,
  .lang-toggle.is-switching .lang-code,
  .mobile-language-toggle.is-switching .lang-code{
    animation:none!important;
  }
}


/* V138 — reliable language selector with SVG flags + smooth transition */
.lang-toggle,
.mobile-language-toggle{
  position:relative!important;
}
.lang-flags{
  position:relative!important;
  display:block!important;
  width:28px!important;
  height:20px!important;
  flex:0 0 28px!important;
  overflow:hidden!important;
  border-radius:4px!important;
  box-shadow:0 0 0 1px rgba(15,23,42,.08)!important;
}
.lang-flag-svg{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:28px!important;
  height:20px!important;
  transition:
    transform .48s cubic-bezier(.22,.8,.28,1),
    opacity .36s ease!important;
}
.lang-toggle[data-lang="sv"] .flag-sv,
.mobile-language-toggle[data-lang="sv"] .flag-sv{
  transform:translateY(0) scale(1)!important;
  opacity:1!important;
}
.lang-toggle[data-lang="sv"] .flag-en,
.mobile-language-toggle[data-lang="sv"] .flag-en{
  transform:translateY(115%) scale(.86)!important;
  opacity:0!important;
}
.lang-toggle[data-lang="en"] .flag-sv,
.mobile-language-toggle[data-lang="en"] .flag-sv{
  transform:translateY(-115%) scale(.86)!important;
  opacity:0!important;
}
.lang-toggle[data-lang="en"] .flag-en,
.mobile-language-toggle[data-lang="en"] .flag-en{
  transform:translateY(0) scale(1)!important;
  opacity:1!important;
}
.lang-toggle .lang-code,
.mobile-language-toggle .lang-code{
  transition:opacity .24s ease,transform .32s cubic-bezier(.22,.8,.28,1)!important;
}
html.lang-transition-out main,
html.lang-transition-out .site-header nav,
html.lang-transition-out footer{
  opacity:.18!important;
  transform:translateY(7px)!important;
  filter:blur(4px)!important;
}
html.lang-transition-in main,
html.lang-transition-in .site-header nav,
html.lang-transition-in footer{
  animation:sveaLanguageReveal .42s cubic-bezier(.22,.8,.28,1) both!important;
}
main,
.site-header nav,
footer{
  transition:
    opacity .22s ease,
    transform .26s cubic-bezier(.22,.8,.28,1),
    filter .22s ease!important;
}
@keyframes sveaLanguageReveal{
  from{opacity:.2;transform:translateY(-5px);filter:blur(3px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
  .lang-flag-svg,main,.site-header nav,footer{transition:none!important}
  html.lang-transition-in main,
  html.lang-transition-in .site-header nav,
  html.lang-transition-in footer{animation:none!important}
}


/* V145 — aktiva filter i Kontaktförfrågningar: vit text på svart */
body.admin-portal a[href*="p=admin-requests"][href*="status="].on,
body.admin-portal a[href*="p=admin-requests"][href*="status="].active,
body.admin-portal .filters a.on,
body.admin-portal .filters a.active,
body.admin-portal .filter-tabs a.on,
body.admin-portal .filter-tabs a.active,
body.admin-portal .tabs a.on,
body.admin-portal .tabs a.active{
  color:#fff!important;
}


a[href*="?p=admin-requests"][href*="status="][class*="on"],
a[href*="?p=admin-requests"][href*="status="][class*="active"],
a[href*="&status="][class*="on"],
a[href*="&status="][class*="active"]{
  color:#fff!important;
}


/* V148 final public mobile polish */
@media(max-width:760px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  main,main section,.section{min-width:0!important}
  .hero{min-height:100svh!important;padding-left:18px!important;padding-right:18px!important;padding-bottom:32px!important}
  .hero-content{width:100%!important;min-width:0!important}
  .hero h1,.hero h1 span,.hero h1 em{font-size:44px!important;line-height:.98!important;overflow-wrap:anywhere!important}
  .hero-copy{max-width:100%!important;font-size:15px!important;line-height:1.62!important}
  .hero-actions{width:100%!important;gap:10px!important}
  .hero-actions .primary-btn,.hero-actions .text-btn{width:100%!important;min-height:50px!important;justify-content:center!important}
  .hero-proof{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:9px!important}
  .services,.svc-island-grid,.case-grid,.steps,.newsletter,.faq,.security,.cta{grid-template-columns:1fr!important}
  .service-card,.svc-island,.svc-includes,.review-track,.newsletter,.contact-card,.contact-ref-form{width:100%!important;max-width:100%!important;min-width:0!important}
  .section{padding-left:18px!important;padding-right:18px!important}
  .newsletter{margin-left:0!important;margin-right:0!important;border-radius:20px!important;gap:30px!important}
  .newsletter form{width:100%!important}
  .faq{gap:34px!important}
  .faq-list details{padding:18px 0!important}
  .faq-list summary{gap:14px!important;font-size:14px!important}
  .security-visual{height:330px!important}
  .client-logo-marquee{width:100vw!important;max-width:100vw!important}
  .reviews-inner{padding-left:18px!important;padding-right:18px!important}
  .review-track{min-height:400px!important}
  .contact-ref,.cta{padding-left:18px!important;padding-right:18px!important}
  .contact-ref-form,.contact-card{padding:18px!important}
  .footer-main{grid-template-columns:1fr!important;gap:28px!important;padding-left:18px!important;padding-right:18px!important}
  .footer-main>div,.footer-main>div:last-child,.footer-brand{grid-column:auto!important}
  .footer-bottom{padding-left:18px!important;padding-right:18px!important}
  .modal{padding:10px!important;align-items:center!important;overflow-y:auto!important}
  .modal-card{width:100%!important;max-width:520px!important;max-height:calc(100svh - 20px)!important;overflow-y:auto!important;border-radius:20px!important;padding:26px 18px!important}
  .login-card input,.login-card button{min-height:48px!important;font-size:16px!important}
}


/* V157 — publik mobilmeny: samma mjuka hamburger -> X-animation som portalen */
@media(max-width:780px){
  .ios-menu-btn,
  .ios-menu-btn:hover,
  .ios-menu-btn:focus,
  .ios-menu-btn:focus-visible,
  .ios-menu-btn:active,
  .ios-menu-btn.open{
    -webkit-tap-highlight-color:transparent!important;
    outline:none!important;
  }
  .ios-menu-btn span{
    transform-origin:center!important;
    will-change:transform,opacity;
  }
}


/* V158 — publik mobilmeny: kompakt hamburger som ligger kvar och blir X */
@media(max-width:780px){
  .site-header .ios-menu-btn{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    padding:0!important;
    overflow:visible!important;
  }

  .site-header .ios-menu-btn span{
    display:block!important;
    position:relative!important;
    width:19px!important;
    height:2px!important;
    min-width:19px!important;
    min-height:2px!important;
    margin:0!important;
    padding:0!important;
    flex:0 0 2px!important;
    border-radius:999px!important;
    background:#111827!important;
    transform:none;
    transform-origin:center!important;
    transition:transform .22s ease,opacity .18s ease!important;
  }

  .site-header .ios-menu-btn.open span:nth-child(1){
    transform:translateY(6px) rotate(45deg)!important;
  }
  .site-header .ios-menu-btn.open span:nth-child(2){
    opacity:0!important;
  }
  .site-header .ios-menu-btn.open span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg)!important;
  }

  /* Keep the island/hamburger above the menu overlay while open */
  body.public-mobile-menu-open .site-header{
    z-index:100002!important;
  }
  body.public-mobile-menu-open .site-header .ios-menu-btn{
    z-index:100003!important;
    pointer-events:auto!important;
  }
  .mobile-menu-panel{
    z-index:100000!important;
  }

  /* Keep the same glass look while the X is visible */
  body.public-mobile-menu-open .site-header,
  body.public-mobile-menu-open .site-header .ios-menu-btn,
  .site-header .ios-menu-btn.open{
    -webkit-tap-highlight-color:transparent!important;
  }
}


/* V160 — korrekt, tydlig och fungerande cookie consent */
.cookie-banner{
  z-index:100500!important;
  left:50%!important;
  right:auto!important;
  bottom:18px!important;
  width:min(720px,calc(100% - 28px))!important;
  transform:translateX(-50%)!important;
  padding:18px!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:22px!important;
  background:rgba(247,249,252,.92)!important;
  color:#0a1424!important;
  box-shadow:0 24px 70px rgba(8,20,45,.18)!important;
  backdrop-filter:blur(24px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.25)!important;
  align-items:flex-end!important;
  gap:18px!important;
}
.cookie-banner.show{display:flex!important}
.cookie-copy{flex:1;min-width:0}
.cookie-copy b{display:block;font-size:15px;color:#0a1424;margin-bottom:5px}
.cookie-banner .cookie-copy p{margin:0;color:#657287!important;font-size:12px;line-height:1.55}
.cookie-policy-link{
  border:0;background:none;padding:5px 0 0;color:#34445c;text-decoration:underline;
  font:inherit;font-size:11px;cursor:pointer
}
.cookie-actions{display:flex!important;gap:7px!important;flex:0 0 auto}
.cookie-banner .ghost-cookie,.cookie-banner .accept-cookie{
  min-height:42px;padding:0 13px;border-radius:11px;font-size:12px;font-weight:750;cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease
}
.cookie-banner .ghost-cookie{
  border:1px solid #d4dbe5!important;background:rgba(255,255,255,.7)!important;color:#172033!important
}
.cookie-banner .accept-cookie{
  border:1px solid #172033!important;background:#172033!important;color:#fff!important
}
.cookie-banner button:active{transform:scale(.98)}
.cookie-preferences{
  width:100%;grid-column:1/-1;border-top:1px solid #e0e5ec;padding-top:12px;margin-top:2px
}
.cookie-preferences:not([hidden]){display:grid!important;gap:9px}
.cookie-pref-row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:10px 11px;border:1px solid #e1e6ed;border-radius:13px;background:rgba(255,255,255,.58)
}
.cookie-pref-row strong{display:block;font-size:12px;color:#172033}
.cookie-pref-row small{display:block;margin-top:2px;font-size:10px;line-height:1.4;color:#6b778a}
.cookie-required{font-size:10px;font-weight:750;color:#667085;white-space:nowrap}
.cookie-toggle-row{cursor:pointer}
.cookie-toggle-row input{position:absolute;opacity:0;pointer-events:none}
.cookie-switch{
  position:relative;width:42px;height:24px;border-radius:999px;background:#cbd3df;flex:0 0 auto;
  transition:background .18s ease
}
.cookie-switch:after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .18s ease
}
.cookie-toggle-row input:checked + .cookie-switch{background:#172033}
.cookie-toggle-row input:checked + .cookie-switch:after{transform:translateX(18px)}
.save-cookie{justify-self:end}
@media(max-width:700px){
  .cookie-banner{
    bottom:10px!important;width:calc(100% - 20px)!important;padding:16px!important;
    align-items:stretch!important;gap:13px!important
  }
  .cookie-actions{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important}
  .cookie-actions #cookieSettings{grid-column:1/-1}
  .cookie-banner .ghost-cookie,.cookie-banner .accept-cookie{width:100%!important;min-height:44px}
  .cookie-pref-row{align-items:flex-start}
  .cookie-required{white-space:normal;text-align:right}
}


/* V161 — permanent möjlighet att återkalla/ändra cookieval */
.footer-cookie-settings{
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  background:transparent!important;
  padding:0!important;
  margin:0!important;
  color:#6d7b90!important;
  font:inherit!important;
  text-align:left!important;
  cursor:pointer!important;
  text-decoration:none!important;
}
.footer-cookie-settings:hover{text-decoration:underline!important}


/* V162 — cookie banner: lång blå premium-island, matchad med Svea Studio */
.cookie-banner{
  left:20px!important;
  right:20px!important;
  bottom:20px!important;
  width:auto!important;
  max-width:none!important;
  transform:none!important;
  padding:17px 20px!important;
  border:1px solid rgba(132,174,235,.22)!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,rgba(8,31,64,.98),rgba(11,42,83,.97))!important;
  color:#fff!important;
  box-shadow:0 20px 70px rgba(3,18,42,.30)!important;
  backdrop-filter:blur(22px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.18)!important;
  align-items:center!important;
  gap:22px!important;
}
.cookie-copy{flex:1!important;min-width:0!important}
.cookie-copy b{
  color:#fff!important;
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
  margin-bottom:4px!important;
}
.cookie-banner .cookie-copy p{
  color:#afc2dc!important;
  font-size:12px!important;
  line-height:1.48!important;
  max-width:760px!important;
}
.cookie-policy-link{
  color:#d5e5f8!important;
  font-size:11px!important;
  text-decoration:none!important;
  opacity:.86!important;
}
.cookie-policy-link:hover{opacity:1!important;text-decoration:underline!important}
.cookie-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex:0 0 auto!important;
}
.cookie-banner .ghost-cookie,
.cookie-banner .accept-cookie{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:40px!important;
  width:auto!important;
  padding:0 14px!important;
  border-radius:10px!important;
  font-size:11px!important;
  font-weight:780!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}
.cookie-banner .ghost-cookie{
  color:#eef5ff!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(194,216,244,.24)!important;
}
.cookie-banner .ghost-cookie:hover{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(211,228,249,.38)!important;
}
.cookie-banner .accept-cookie{
  color:#fff!important;
  background:#3478d4!important;
  border:1px solid #4b8de5!important;
}
.cookie-banner .accept-cookie:hover{background:#3f84e0!important}

/* Inställningspanelen ligger snyggt under huvudraden och påverkar inte grundhöjden när den är stängd */
.cookie-preferences{
  order:3!important;
  flex:0 0 100%!important;
  width:100%!important;
  margin:0!important;
  padding:13px 0 0!important;
  border-top:1px solid rgba(183,208,239,.17)!important;
}
.cookie-preferences:not([hidden]){
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}
.cookie-pref-row{
  min-height:58px!important;
  padding:10px 12px!important;
  border:1px solid rgba(194,216,244,.17)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.045)!important;
}
.cookie-pref-row strong{color:#fff!important;font-size:11px!important}
.cookie-pref-row small{color:#aebfd6!important;font-size:10px!important}
.cookie-required{color:#cbd9ea!important}
.cookie-switch{background:#60738d!important}
.cookie-toggle-row input:checked + .cookie-switch{background:#3478d4!important}

/* "Spara val" ska se ut som en riktig knapp och ligga stabilt, inte flyta konstigt */
.cookie-preferences .save-cookie{
  grid-column:1/-1!important;
  justify-self:end!important;
  width:auto!important;
  min-width:112px!important;
  margin-top:1px!important;
  color:#fff!important;
  background:#3478d4!important;
  border-color:#4b8de5!important;
}
.cookie-preferences .save-cookie:hover{background:#3f84e0!important}

@media(max-width:700px){
  .cookie-banner{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    width:auto!important;
    padding:15px!important;
    gap:12px!important;
    align-items:stretch!important;
  }
  .cookie-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    width:100%!important;
  }
  .cookie-actions #cookieSettings{
    grid-column:1/-1!important;
  }
  .cookie-banner .ghost-cookie,
  .cookie-banner .accept-cookie{
    width:100%!important;
    min-height:43px!important;
  }
  .cookie-preferences:not([hidden]){
    grid-template-columns:1fr!important;
  }
  .cookie-preferences .save-cookie{
    grid-column:1!important;
    justify-self:stretch!important;
    width:100%!important;
  }
}


/* V163 — cookie-banner: smal avlång bottenrad, stabil layout */
.cookie-banner{
  display:none!important;
  position:fixed!important;
  z-index:100500!important;
  left:20px!important;
  right:20px!important;
  bottom:18px!important;
  width:auto!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  transform:none!important;
  padding:13px 15px!important;
  border:1px solid rgba(145,181,229,.22)!important;
  border-radius:15px!important;
  background:#0b2b55!important;
  box-shadow:0 16px 45px rgba(4,20,45,.25)!important;
  color:#fff!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px 18px!important;
  overflow:visible!important;
}
.cookie-banner.show{display:flex!important}

/* Viktigt: inställningarna får aldrig ta plats när de är stängda */
.cookie-banner .cookie-preferences[hidden]{
  display:none!important;
}
.cookie-banner .cookie-copy{
  flex:1 1 560px!important;
  width:auto!important;
  min-width:280px!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
.cookie-banner .cookie-copy b{
  display:block!important;
  margin:0 0 2px!important;
  color:#fff!important;
  font-size:13px!important;
  line-height:1.25!important;
  font-weight:800!important;
}
.cookie-banner .cookie-copy p{
  display:block!important;
  margin:0!important;
  max-width:820px!important;
  color:#b9c9dc!important;
  font-size:11px!important;
  line-height:1.4!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
.cookie-banner .cookie-policy-link{
  display:inline-block!important;
  margin:2px 0 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#d6e5f6!important;
  font-size:10px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
}
.cookie-banner .cookie-actions{
  flex:0 0 auto!important;
  width:auto!important;
  display:flex!important;
  grid-template-columns:none!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
}
.cookie-banner .cookie-actions button{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  min-height:38px!important;
  height:38px!important;
  margin:0!important;
  padding:0 13px!important;
  border-radius:9px!important;
  font-size:10.5px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.cookie-banner .ghost-cookie{
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(211,228,249,.22)!important;
  color:#f1f6fc!important;
}
.cookie-banner .accept-cookie{
  background:#397fd8!important;
  border:1px solid #4b8fe5!important;
  color:#fff!important;
}

/* Öppnad Anpassa-panel: fortfarande kompakt och full bredd UNDER raden */
.cookie-banner .cookie-preferences:not([hidden]){
  display:grid!important;
  order:10!important;
  flex:0 0 100%!important;
  width:100%!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;
  align-items:stretch!important;
  gap:8px!important;
  margin:2px 0 0!important;
  padding:10px 0 0!important;
  border-top:1px solid rgba(190,214,242,.16)!important;
}
.cookie-banner .cookie-pref-row{
  min-width:0!important;
  min-height:54px!important;
  margin:0!important;
  padding:9px 11px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(205,224,246,.15)!important;
  align-items:center!important;
}
.cookie-banner .cookie-pref-row strong{
  color:#fff!important;
  font-size:10.5px!important;
  line-height:1.25!important;
}
.cookie-banner .cookie-pref-row small{
  color:#b6c7dc!important;
  font-size:9.5px!important;
  line-height:1.35!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
.cookie-banner .cookie-required{
  color:#d3dfed!important;
  font-size:9.5px!important;
  white-space:nowrap!important;
}
.cookie-banner .cookie-preferences .save-cookie{
  grid-column:auto!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  width:auto!important;
  min-width:100px!important;
  min-height:54px!important;
  height:auto!important;
  margin:0!important;
  padding:0 14px!important;
  border-radius:10px!important;
  background:#397fd8!important;
  border:1px solid #4b8fe5!important;
  color:#fff!important;
  white-space:nowrap!important;
}

@media(max-width:700px){
  .cookie-banner{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    padding:13px!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .cookie-banner .cookie-copy{
    flex:none!important;
    width:100%!important;
    min-width:0!important;
  }
  .cookie-banner .cookie-copy p{
    font-size:10.5px!important;
    line-height:1.4!important;
  }
  .cookie-banner .cookie-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  .cookie-banner .cookie-actions #cookieSettings{
    grid-column:1/-1!important;
  }
  .cookie-banner .cookie-actions button{
    width:100%!important;
    min-height:42px!important;
    height:42px!important;
  }
  .cookie-banner .cookie-preferences:not([hidden]){
    grid-template-columns:1fr!important;
  }
  .cookie-banner .cookie-preferences .save-cookie{
    grid-column:1!important;
    width:100%!important;
    min-height:42px!important;
  }
}


/* V165 — likvärdiga ja/nej-val; Anpassa är sekundärt */
.cookie-banner #rejectCookies,
.cookie-banner #acceptCookies{
  background:#397fd8!important;
  border:1px solid #4b8fe5!important;
  color:#fff!important;
  font-weight:780!important;
  box-shadow:none!important;
}
.cookie-banner #rejectCookies:hover,
.cookie-banner #acceptCookies:hover{background:#4388df!important}
.cookie-banner #cookieSettings{
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(211,228,249,.22)!important;
  color:#f1f6fc!important;
}

/* ---- extracted from V186 public head ---- */

#loginModal .login-card form>label{display:block!important;width:100%!important}
#loginModal .login-card form>label>input,
#loginModal .login-card form>label>.svea-pw{width:100%!important}
#loginModal .login-card .svea-pw input{min-height:48px!important}
#loginModal .login-options{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;width:100%!important}
#loginModal .login-options label{display:flex!important;align-items:center!important;gap:8px!important;width:auto!important;margin:0!important}
#loginModal .login-options input[type="checkbox"]{width:15px!important;height:15px!important;min-height:15px!important;padding:0!important;margin:0!important}

/* V190: dedicated-page H1 uses the same established visual scale as the old section heading. */
.process h1{font-size:clamp(45px,5vw,76px);letter-spacing:-.055em;line-height:.97;margin:24px 0;font-family:Manrope,sans-serif}
.process h1 span{color:#8a948f}
.faq h1{font-family:Manrope,sans-serif;letter-spacing:-.055em;line-height:.97;margin:24px 0;font-size:clamp(54px,6.7vw,106px)}
.faq h1 span{color:#8a948f}
@media(max-width:900px){.process h1{font-size:clamp(44px,4.8vw,72px)!important}}