/* SchermLoop unified blue house style | based on the original navy and bright-blue brand. */
/* SchermLoop commercial website redesign | Nov 2026
   Matched to the user's preferred blue/navy Studio theme,
   retaining the original SchermLoop blue logo and editable website markup. */
:root{
 --navy:#111f35;--navy2:#172a45;
 --blue:#3065eb;--cyan:#9acbff;
 --ink:#19355f;--muted:#326abd;
 --line:#d7e3f4;--soft:#f5f8fd;--white:#fff;
 --blue:#3065eb;--blue-soft:#e0e9f7;--aqua:#55afd9;
}
html{scroll-padding-top:84px}
body{background:#fff;color:#19355f;font-size:15px}
.site-header{background:rgba(17,31,53,.985);border-bottom:1px solid #295699;backdrop-filter:blur(16px)}
.nav-inner{min-height:74px;height:auto;padding:14px 0;gap:18px}
.brand{color:#fff;font-weight:790;letter-spacing:-.045em;font-size:25px}
.brand-logo-img{width:45px;height:45px;object-fit:contain;flex:0 0 auto}
.brand-accent{color:#abc5ec}
.brand-mark{display:none}
.site-nav{gap:14px;color:#d0def2;font-weight:650}
.site-nav>a:not(.nav-login){padding:8px 10px;border-radius:8px}
.site-nav>a:not(.nav-login):hover{background:#234982;color:#fff}
.site-nav .nav-login{background:#fff;color:#18325a;border-radius:9px;padding:11px 18px;box-shadow:none}
.site-nav .nav-login:hover{background:#e9f2ff}
.hero{
 background:radial-gradient(circle at 84% 19%,#254b85 0,#172a45 37%,#142b4d 74%);
 color:#fff;overflow:hidden;position:relative;
}
.hero::after{
 content:"";position:absolute;inset:auto -20% -250px 5%;height:480px;
 border-radius:50%;background:#3570c822;filter:blur(75px);pointer-events:none
}
.hero-grid{position:relative;z-index:1;align-items:center;gap:clamp(32px,4.5vw,75px);padding:clamp(64px,8vw,130px) 0}
.hero .eyebrow{color:#dbe6f6;background:#ffffff0e;border:1px solid #ffffff22;border-radius:100px;padding:8px 14px;width:max-content;max-width:100%}
.hero .eyebrow-dot{background:#63b6dc}
.hero h1{color:#fff;letter-spacing:-.055em;line-height:1.07;font-size:clamp(41px,5.5vw,78px)}
.hero h1 em{color:#a8cfff;font-weight:750}
.hero .hero-lead{color:#cfddf2;line-height:1.67;max-width:560px;font-size:clamp(16px,1.4vw,19px)}
.hero .pilot-note{color:#bdd1ee;line-height:1.5}
.hero .hero-actions{display:flex;flex-wrap:wrap;gap:11px}
.button{border-radius:10px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:normal;text-align:center}
.button.button-primary{background:#3065eb;border-color:#3065eb;box-shadow:0 6px 17px #142a4a30}
.button.button-primary:hover{background:#5083d0;border-color:#5083d0}
.hero .button-primary{background:#f1f5fa;color:#19345d;border-color:#f1f5fa}
.hero .button-primary:hover{background:#fff;color:#142b4d;border-color:#fff}
.hero .button-ghost{background:#ffffff15;border:1px solid #81a8e2;color:#fff}
.hero .button-ghost:hover{background:#ffffff23}
.hero .product-visual{box-shadow:0 25px 60px #0b182ba8;border:1px solid #ffffff3c;border-radius:19px;transform:rotate(.8deg)}
.hero .window{background:#f7faff;border-radius:18px;overflow:hidden}
.hero .window-head{background:#e5edf8;color:#254e8c}
.hero .window-body{background:#f5f8fd}
.hero .window-tag{background:#d4e1f4;color:#2f62af}
.hero .mock-sidebar{background:#152d51}
.hero .mock-sidebar .mock-nav.selected{background:#2d5fa9}
.hero .mock-content{background:#f7faff;color:#19345c}
.hero .mock-title strong{color:#1c3b6a}
.hero .mock-display{border-radius:10px;overflow:hidden}
.hero .mock-display-top{background:#19355e}
.hero .mock-display-announcement{background:#e9f2ff}
.hero .mock-display-announcement span{color:#326abe}
.hero .mock-display-announcement strong{color:#1f4174}
.hero .mock-weather{background:#e1ecfb;color:#294d82}
.hero .mock-ticker{background:#162f55;color:#e1eaf7}
.sector-strip{background:#eaeff7!important;color:#2d5ea8!important;border-color:#d5e1f4!important}
.section,.section-soft{padding-top:clamp(58px,6vw,95px);padding-bottom:clamp(58px,6vw,95px)}
.section-soft{background:#f8fafc}
.section-head{max-width:830px;margin-bottom:36px}
.section-head h2{color:#183259;letter-spacing:-.035em;font-size:clamp(30px,3.7vw,51px)}
.section-head p{font-size:16px;color:#346dc2;line-height:1.7}
.overline{color:#3974cb;letter-spacing:.12em}
.step,.feature,.hardware-card,.price-card{background:#fff;border:1px solid #dae5f5;border-radius:15px;box-shadow:0 7px 21px #162f550c}
.step{border-top:5px solid #5083d0;padding:25px}
.step:nth-child(2){border-top-color:#568bc8}
.step:nth-child(3){border-top-color:#6292db}
.step:nth-child(4){border-top-color:#4dabd6}
.step-number{color:#3570c9}
.step-icon{color:#2c5da6;background:#e6edf8}
.step h3,.feature h3,.hardware-card h3{color:#1c3a67}
.feature{border-top:4px solid #6b99dd}
.feature:nth-child(3n+2){border-top-color:#668fc3}
.feature:nth-child(3n){border-top-color:#45a7d5}
.feature-icon{background:#e4ecf8;color:#336bbf}
.feature-status{color:#3166b6;background:#ecf1f9}
.studio-grid h2{color:#1a3763}
.check-list li:before{color:#3973ca}
.studio-canvas{border:1px solid #d0def2;border-radius:16px;overflow:hidden;box-shadow:0 12px 28px #162e5115}
.studio-canvas-bar{background:#173157;color:#f2f6fb}
.canvas-pill{background:#2e61ae;color:#fff}
.zone{border-radius:9px}
.zone-blue{background:linear-gradient(125deg,#3a74cb,#4c75bd)}
.zone-weather{background:linear-gradient(135deg,#a6daf0,#dee5fb);color:#21466c}
.zone-bottom{background:#1a3660;color:#eff3fa}
.hardware-footnote,.price-disclaimer{color:#3f77cc}
.hardware-symbol{background:#e9eff7;color:#3570c9}
#prijzen{background:#f5f8fd}
#prijzen .section-head{max-width:730px}
#prijzen .price-grid{align-items:stretch;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
#prijzen .price-card{
 position:relative;display:flex;flex-direction:column;
 padding:30px 25px;gap:9px;border-radius:16px;
 box-shadow:0 12px 27px #1a376210;border:1px solid #d1dff3;
}
#prijzen .price-card.recommended{
 border:2px solid #457cce;background:#fff;transform:translateY(-8px);
 box-shadow:0 17px 35px #20447a22;
}
#prijzen .recommended-label{
 border-radius:0 0 11px 11px;background:#3167b9;color:#fff;
 font-size:10px;letter-spacing:.09em
}
#prijzen .price-type{color:#3e77cc;font-weight:800;letter-spacing:.12em}
#prijzen .price-card h3{font-size:24px;color:#152c4f;letter-spacing:-.025em;line-height:1.25;margin:0}
#prijzen .price-card>p{line-height:1.58;color:#3166b6;font-size:14px;min-height:54px}
#prijzen .price{margin:9px 0 8px;color:#173056}
#prijzen .plan-price-line{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
#prijzen .price-currency{font-size:24px;font-weight:750;color:#3772ca}
#prijzen .price-amount{font-size:clamp(39px,4.2vw,56px);line-height:1.1;font-weight:820;letter-spacing:-.06em;color:#162f55}
#prijzen .price-period{font-size:13px;color:#3268ba}
#prijzen .price small{font-size:12px;color:#427acd;margin-top:8px;display:block;font-weight:500}
#prijzen .price-card ul{display:grid;gap:10px;margin-top:10px;margin-bottom:27px}
#prijzen .price-card li{color:#224882;font-size:13px;line-height:1.45}
#prijzen .price-card li:before{color:#497ece}
#prijzen .price-card>.button{margin-top:auto;width:100%}
#prijzen .price-disclaimer{max-width:900px;margin:20px auto 0;text-align:center;font-size:12px;line-height:1.6}
.pricing-note{background:#e4ecf8;color:#275191;border:1px solid #c7d7f0;border-radius:12px;padding:13px 17px;font-size:14px;line-height:1.5;margin-bottom:25px}
.trial-banner{display:flex;gap:20px;align-items:center;justify-content:space-between;background:#173158;color:#fff;border-radius:18px;padding:24px 30px;margin:0 auto 28px}
.trial-banner strong{font-size:clamp(21px,2.1vw,27px);display:block}
.trial-banner span{display:block;color:#c4d5ef;font-size:13px;margin-top:5px}
.trial-banner .button{flex:0 0 auto;white-space:nowrap;background:#fff;color:#1e3f70;font-weight:750}
.trial-banner .button:hover{background:#dce6f6}
.faq-section{background:#fff}
.faq-list details{border-color:#d4e0f3;border-radius:8px}
.faq-list summary{color:#1b3966}
.faq-list details[open]{background:#f8fafc}
.cta-section{background:linear-gradient(120deg,#152d51,#275394);color:#fff}
.cta-section h2,.cta-section p{color:#fff}
.cta-section .button-white{background:#fff;color:#1c3b6a}
.cta-section .button-cta-outline{border-color:#bdd1ee;color:#fff}
.footer{background:#122644;color:#c5d6f0}
.footer .brand{color:#fff}
.footer-links a:hover{color:#fff}
.footer-bottom{border-color:#234982}
.site-guide-teaser{
 background:#fff;border:1px solid #d0def3;border-radius:13px;
 padding:17px 24px;display:flex;justify-content:space-between;align-items:center;gap:18px;
 box-shadow:0 5px 18px #1329490d;margin:24px 0 0
}
.site-guide-teaser h3{font-size:20px;color:#1c3b69;margin:0 0 4px}
.site-guide-teaser p{color:#3269bc;font-size:13px;margin:0}
.site-guide-teaser a{flex:0 0 auto}
@media(max-width:980px){
 #prijzen .price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #prijzen .price-card.recommended{transform:none}
 #prijzen .price-grid .price-card:last-child{grid-column:1/-1}
 .site-guide-teaser{flex-direction:column;align-items:flex-start}
}
@media(max-width:750px){
 .site-header{background:#132949}
 .nav-inner{min-height:68px;padding:9px 0}
 .brand{font-size:21px}
 .brand-logo-img{width:35px;height:35px}
 .site-nav{background:#19345d;box-shadow:0 15px 20px #0c1a2e77}
 .site-nav>a{color:#eff3fa}
 .site-nav .nav-login{background:#e7eef8;color:#18335c}
 .menu-toggle{filter:brightness(0) invert(1)}
 .hero-grid{padding:55px 0 67px}
 .hero .hero-actions .button{flex:1 1 100%}
 #prijzen .price-grid{grid-template-columns:1fr}
 #prijzen .price-grid .price-card:last-child{grid-column:auto}
 #prijzen .price-card{padding:25px 21px}
 .trial-banner{flex-direction:column;align-items:stretch;padding:21px}
 .trial-banner .button{width:100%;white-space:normal}
 .site-guide-teaser a{width:100%}
 .section-head h2{font-size:clamp(30px,8vw,42px)}
}
@media(prefers-reduced-motion:reduce){
 .hero .product-visual,.price-card.recommended{transform:none}
}

/* Stable blue brand variables shared by marketing and Studio. */
:root{--navy:#111f35;--navy2:#172a45;--blue:#3065eb;--cyan:#69d4ff;--ink:#15233a;--muted:#65758b;--line:#e1e7f0;--soft:#f5f8fd;--white:#fff;--purple:#3065eb;--purple-soft:#e9f2ff;--aqua:#69d4ff}