/* Visual refresh inspired by the Unbase reference. Original content and behavior stay in index.html and script.obf.js. */
:root{--bg:#fff;--bg-card:#f7f6fa;--bg-card2:#efebf8;--bg-card3:#e8e1f5;--border:#e5e1eb;--border-md:#d5cddd;--border-hi:#b6a2d8;--text:#141316;--text-2:#5c5864;--text-3:#716b79;--text-4:#88808f;--accent:#161318;--blue:#7954c7;--blue-dim:#efe8fb;--blue-b:#d6c6f2;--green:#7851bd;--green-dim:#eee7f8;--green-b:#d8c9ef;--r:24px;--r-sm:12px}
html,body{background:#fff;color:var(--text)}body{user-select:text;-webkit-user-select:text}::selection{background:#d8c7f5;color:#17121e}
nav{height:88px;padding:12px 4vw;background:rgba(250,248,255,.94);border-bottom:1px solid var(--border);box-shadow:none;backdrop-filter:blur(16px)}
.nav-logo{font-size:19px;letter-spacing:-.8px}.nav-logo-img{width:42px;height:42px;filter:none}.nav-links{background:transparent;border:0;gap:8px}.nav-links a{font-size:14px;border-radius:999px;padding:9px 16px}.nav-links a.active,.nav-links a:hover{background:#eae2f7;color:#251b36}.nav-dropdown{background:#fff;box-shadow:0 12px 32px #26153c12}.nav-links li:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:none}.nav-toggle{color:#18131e;background:transparent;box-shadow:none;border-color:var(--border-md);border-radius:50%}.mobile-menu{background:#faf7ff;box-shadow:0 20px 60px #21122d18;z-index:501;top:88px}.mobile-menu a:hover,.mobile-menu a.active{background:#e9e0f7;color:#21172e}
.btn-primary,.btn-solid-sm{background:#171419;color:#fff;border:1px solid #171419;border-radius:999px;box-shadow:none;font-weight:500;padding:15px 25px;transition:background .2s,transform .2s}
.btn-primary:hover,.btn-solid-sm:hover{background:#7954c7;color:#fff;border-color:#7954c7;box-shadow:none;transform:translateY(-2px)}
.btn-outline,.btn-choice,.btn-ghost-sm{background:transparent;color:#21182f;border:1px solid #cbbbdc;box-shadow:none;border-radius:999px;font-weight:500;padding:15px 25px}.btn-outline:hover,.btn-choice:hover,.btn-ghost-sm:hover{background:#eee6fa;color:#241432;border-color:#a38ac5;box-shadow:none;transform:translateY(-2px)}
a,button{touch-action:manipulation}a[onclick]{cursor:pointer}:focus-visible{outline:3px solid #9066d0;outline-offset:5px}
.wrap{max-width:1280px;padding-left:48px;padding-right:48px}.section-h{font-size:clamp(32px,4.5vw,62px);font-weight:400;letter-spacing:-2px;line-height:1.08}.section-sub{font-size:16px;max-width:520px}.eyebrow,.page-hero-eyebrow{letter-spacing:1px;color:#7954ad}.eyebrow:before,.page-hero-eyebrow:before{content:'';font-size:18px;margin-right:10px;color:#9d80d5}
.hero{min-height:auto;padding:155px 4vw 64px;display:grid;grid-template-columns:1fr 1fr;text-align:left;gap:28px 40px;background:linear-gradient(160deg,#f0ebfc 0%,#fff 58%);border-radius:0 0 44px 44px}
.hero-ambient,.hero-glow,.hero-grid{display:none}h1.hero-h{grid-column:1/-1;font-size:clamp(55px,7.8vw,120px);font-weight:400;letter-spacing:-.055em;line-height:1.1;text-transform:uppercase;margin:0 0 16px;width:100%;animation:none}h1.hero-h .muted{display:inline-block;color:#151217;background:none;text-shadow:none;animation:none;border:1px solid #b9a1d9;border-radius:999px;padding:0 .3em .06em;margin-top:8px;font-size:.88em}h1.hero-h:after{content:'↗';color:#9677cd;display:inline-block;margin-left:.15em;font-size:.78em;font-weight:300}
.hero-sub{max-width:550px;font-size:18px;font-weight:400;margin:0;animation:none}.hero-btns{animation:none}.hero>.hero-btns{justify-content:flex-end;align-self:center}.laptop-wrap{grid-column:1/-1;max-width:none;margin:20px 0 0;border-radius:28px;background:radial-gradient(ellipse at 65% 0%,#c7b6f5,transparent 60%),linear-gradient(125deg,#ac94e7,#8262c2);padding:25px 10px 0;overflow:hidden;max-height:420px;animation:none}.laptop-wrap:before{display:none}.laptop-svg{max-width:700px;display:block;margin:0 auto;filter:drop-shadow(0 15px 20px #3c235c35)}
.marquee-wrap{mask-image:none;-webkit-mask-image:none;border-color:var(--border);padding:24px 0}.marquee-item{font-size:14px;font-weight:400;color:#332b3e;background:none;text-shadow:none;animation:none;border:1px solid #e0d9e9;border-radius:999px;margin:0 8px;padding:10px 22px}.marquee-item .m-dot{width:9px;height:9px;background:#aa8adf;box-shadow:none}
.stats-row{background:#151318;border:0;border-radius:26px;padding:24px 0;margin-top:36px;margin-bottom:24px}.stat-cell{border-color:#ffffff25;padding:28px 24px}.stat-num{color:#fff;font-size:clamp(36px,5vw,66px);font-weight:400}.stat-lbl{color:#bfb7ca;font-size:13px}
.card,.contact-info-item,.form-card,.cta-box{background:#f7f5fa;border-color:#e4deec;box-shadow:none;border-radius:24px}.card:hover,.contact-info-item:hover,.form-card:hover,.cta-box:hover{background:#efe9f8;border-color:#c6b2e1;box-shadow:none;filter:none;transform:translateY(-3px)}.card::after,.contact-info-item::after,.form-card::after,.cta-box::after{display:none}
.bento,.benefits-grid,.process-grid,.reviews-grid,.pricing-grid{gap:20px}.bento-title{font-size:21px;font-weight:500;letter-spacing:-.6px}.bento-desc,.benefit-p,.process-p,.review-q,.value-p{font-size:15px;line-height:1.75}.bento-icon,.benefit-check,.value-icon,.contact-icon,.about-avatar-icon{background:#eee5fa;border-color:#d9caef;color:#8053c5;box-shadow:none;border-radius:50%}.home-features .service-feature-main{background:linear-gradient(135deg,#eee6fb,#f7f4fc)}.mini-screen{background:#fff}.mini-row{background:#f4f0f9}.mini-row-badge{color:#745098}.step-pill{background:#eee6f8;color:#7655a3;border-color:#d9caed;border-radius:999px}.process-h,.benefit-h,.review-title,.value-h{font-weight:500}.avatar{background:#dfd0f3;color:#56347e}.review-card{background:#f8f6fb}.stars{color:#8661bc}.faq-q{font-size:18px;font-weight:500}.faq-plus{color:#8661bc}.faq-a{font-size:15px}.faq-item{border-color:#dfd7e9}
.cta-box,.cta-box:hover{background:radial-gradient(ellipse at 70% 0%,#c7b6ef,transparent 65%),linear-gradient(135deg,#ae96e3,#8a6dc5);padding:80px 48px;border:0;filter:none}.cta-h{font-weight:400;font-size:clamp(34px,4.6vw,64px);color:#20132f}.cta-p,.cta-stat-l{color:#332342}.cta-stat-n{color:#21132f;font-weight:400}.cta-stats{border-color:#ffffff50}.cta-glow{display:none}
footer{background:#151318;color:#fff;border:0;border-radius:32px 32px 0 0;margin-top:36px}.footer-grid,.footer-bottom{max-width:1280px}.footer-brand-logo{color:#fff;font-size:19px}.footer-desc,.footer-col-title,.footer-copy,.footer-links a,.footer-brand-logo sup{color:#c3bacd}.footer-links a:hover{color:#d2b2ff}.footer-bottom{border-color:#ffffff20}
.page-hero{max-width:1280px;padding:160px 48px 80px}.page-hero-h{font-size:clamp(44px,6.3vw,88px);font-weight:400;letter-spacing:-.045em}.page-hero-sub{font-weight:400}.page-hero .muted{color:#8b66b8}.service-choice{background:#f6f1fc}.service-choice:hover{background:#eee5fa}.compare-table{margin-top:0;background:#faf8fd;border-color:#e0d6eb}.compare-table th,.compare-table td{border-color:#e0d6eb}.compare-table th{background:#eee6f8;color:#4b325d}.compare-check{color:#7951ac}.compare-table td:first-child{color:#251a2f}.pricing-card.featured,.biz-package.featured{background:#e9ddfa;border-color:#b798de}.pricing-badge{background:#8760bf;color:#fff;border:0}.pricing-price{font-weight:400}.pricing-divider{background:var(--border)}.pricing-feat,.pricing-desc{color:#5c5067}.pf-check{color:#7750a0}.form-input,.form-textarea,.form-select{background:#fff;border-color:#dcd3e7;color:#241a2b;border-radius:12px}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:#9066c8;box-shadow:0 0 0 3px #eee4fb}.form-label{color:#51445e}.modal-card{background:#faf7ff;border-color:#d4c4e8;box-shadow:0 30px 100px #21122d30}.modal-close{color:#503566;background:#eee4f8}.modal-title{font-weight:400}.about-photo{background:linear-gradient(140deg,#e6d9fa,#b69bde);border-color:#cebae5}.about-avatar-icon{color:#8055b5}
.biz-page,.page.biz-page{background:#fff}.biz-page:before,.biz-page:after{display:none}.biz-hero{max-width:1280px;min-height:auto;padding:160px 48px 80px}.biz-title{color:#18121e;font-weight:400;letter-spacing:-.05em}.biz-sub{color:#5f5369;font-weight:400}.biz-pill{background:#f1eafa;color:#665274;border-color:#d4c1e8}.biz-pill strong{background:#e3d4f6;color:#6e459b;border-color:#cdb5e8}.biz-trust{color:#766580}.biz-orbit{background:#ece2fb;border-color:#d9c9ee}.biz-dashboard{background:#faf7ff;border-color:#d6c4ec;box-shadow:0 30px 70px #78559820}.biz-dash-top,.biz-sidebar{border-color:#ded1ee}.biz-dash-dot{background:#b9a0d4}.biz-side-line{background:#f0e9f7;color:#665375}.biz-side-line.active{background:#e4d6f7;color:#693b98;border-color:#cbb0e7}.biz-dash-label,.biz-mini-k{color:#74627f}.biz-chart{background:#eee5fb;border-color:#d6c4ed}.biz-chart-title,.biz-health-row strong{color:#53316f}.biz-health-row,.biz-mini-card{background:#fff;border-color:#e2d6ed;color:#665273}.biz-float{background:#a58ad7;color:#22142f;border-color:#c6afe5;box-shadow:none}.biz-float-k,.biz-float-v{color:#30203f}.biz-service.big{background:linear-gradient(145deg,#e4d7f7,#f2ebfc)}.biz-tag{border-color:#d4c0e8;color:#75548d}.biz-stack-row{background:#fff;border-color:#ded0ec;color:#655171}.soft-gradient{background:#eee4fb}.biz-step-num{color:#9067bb}.biz-price{font-weight:400}
/* Keep pre-existing inline emphasis readable in the light palette. */
.page [style*="color:#fff"],.page [style*="color: #fff"],.page [style*="color:#d7edff"],.page [style*="color:#f0f0f0"]{color:var(--text)!important}
@media(min-width:901px){.hero{max-width:1600px;margin:0 auto}.home-features .bento-p{padding:36px}.review-card{padding:32px}.process-grid .card{padding:32px}}
@media(max-width:1100px){nav{grid-template-columns:1fr auto}.nav-links{display:none}.nav-toggle{display:flex}.hero>.hero-btns{justify-content:flex-start}.hero-sub{font-size:16px}}
@media(max-width:700px){nav{height:76px;padding:10px 18px}.nav-logo{font-size:14px;max-width:none}.nav-logo-img{width:30px;height:30px}.nav-right{gap:7px}.nav-right .btn-solid-sm{padding:10px 14px;height:42px}.nav-toggle{width:42px;height:42px}.mobile-menu{top:78px}.wrap{padding:0 22px}.hero{padding:122px 22px 36px;grid-template-columns:1fr;gap:22px;border-radius:0 0 28px 28px}h1.hero-h{font-size:clamp(37px,8.5vw,60px);letter-spacing:-.055em;margin:0}h1.hero-h .muted{white-space:nowrap}h1.hero-h:after{display:none}.hero-sub{font-size:16px;max-width:none}.hero>.hero-btns{grid-column:1;gap:10px}.hero-btns .btn-primary,.hero-btns .btn-outline{width:auto;min-width:0;flex:1;padding:14px 16px;font-size:13px}.laptop-wrap{max-height:260px;margin-top:6px;padding:22px 0 0;border-radius:20px}.section-h{letter-spacing:-1.1px}.stats-row{padding:8px 0}.stat-cell{border-bottom-color:#ffffff22}.stat-cell:nth-child(odd){border-right-color:#ffffff22}.stat-num{font-size:44px}.page-hero{padding:126px 22px 50px}.page-hero-h{font-size:46px}.cta-box,.cta-box:hover{padding:50px 24px}.biz-hero{padding:126px 22px 50px}.biz-title{font-size:52px}.biz-visual{min-height:430px}.footer-grid{padding:42px 22px;gap:32px 20px}.footer-brand-logo{font-size:16px}.footer-bottom{padding:22px}.btn-ghost-sm{display:none}.compare-table td:first-child{color:#24172e}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.sr{opacity:1;transform:none}}
.modal-title{color:#291938;background:none;text-shadow:none;-webkit-text-fill-color:currentColor}
@media(min-width:701px) and (max-width:900px){.hero{grid-template-columns:1fr}.hero>.hero-btns{justify-content:flex-start}.hero-sub{max-width:600px}}
/* Second direction: editorial scale, deliberate violet, and strong light/dark rhythm. */
:root{--bg:#faf9f6;--bg-card:#f5f3ef;--bg-card2:#eee9f8;--blue:#8054e8;--blue-dim:#eee6ff;--blue-b:#d1baff;--green:#8054e8;--text:#101010;--text-2:#58565d;--border:#dedbdc}
html,body,.page.active{background:#faf9f6}nav{background:rgba(250,249,246,.95);border:0;box-shadow:none}.nav-links{border:0}.nav-links a.active{background:transparent;text-decoration:underline;text-underline-offset:7px;text-decoration-color:#8c63e9}.nav-logo{font-size:21px;letter-spacing:-1px}.nav-logo-img{width:44px;height:44px}
.hero{background:radial-gradient(ellipse at 50% -20%,#e8ddff 0%,#faf9f6 64%);padding:155px 3.5vw 40px;gap:30px 60px;border-radius:0 0 52px 52px}.hero h1.hero-h{font-size:clamp(64px,8.7vw,144px);letter-spacing:-.065em;line-height:.99;margin-bottom:20px}.hero h1.hero-h .muted{font-size:.85em;border-color:#a388d2;margin-top:18px;padding:4px .22em 12px;letter-spacing:-.055em}.hero h1.hero-h:after{content:'';color:#a07cfa;font-size:.8em;vertical-align:middle;line-height:1;text-shadow:3px 3px 0 #693acb}.hero-sub{font-size:18px;line-height:1.65;max-width:580px}.btn-primary,.btn-solid-sm{background:#101010;border-color:#101010}.btn-primary:hover,.btn-solid-sm:hover{background:#8054e8;border-color:#8054e8}.btn-outline,.btn-choice{border-color:#b3a8c2;background:transparent}.eyebrow:before,.page-hero-eyebrow:before{color:#8054e8}
.laptop-wrap{height:400px;max-height:none;isolation:isolate;display:flex;align-items:flex-end;justify-content:center;border-radius:30px;padding:24px 0 0;background:radial-gradient(ellipse at 65% 5%,#d6c7ff,transparent 50%),linear-gradient(125deg,#b29af5,#8967dc 70%,#6043b0);box-shadow:none}.laptop-wrap:before{display:block;content:'';position:absolute;inset:20% -5% -1%;height:auto;border-radius:0;filter:none;background:linear-gradient(145deg,#d2b9ff,#9370d5 55%,#7255b0);clip-path:polygon(0 75%,15% 38%,26% 61%,42% 9%,54% 40%,70% 21%,82% 65%,94% 35%,100% 72%,100% 100%,0 100%);z-index:-1}.laptop-wrap:after{content:'';position:absolute;inset:50% -5% -1%;background:linear-gradient(140deg,#9981d4,#6d50ad);clip-path:polygon(0 60%,18% 25%,37% 69%,53% 30%,76% 0,100% 61%,100% 100%,0 100%);z-index:-1;opacity:.8}.laptop-svg{max-width:570px;margin:0 4% 0 auto;filter:drop-shadow(0 15px 24px #3d236040);transform:translateY(40px) rotate(-3deg)}
.marquee-wrap{padding:30px 0;border:0}.marquee-track{animation-duration:48s}.marquee-item{padding:9px 22px;font-size:16px;border-color:#dcd7e5;background:#faf9f6}.marquee-item .m-dot{background:#a47cee;width:12px;height:12px;clip-path:polygon(50% 0,62% 30%,100% 50%,62% 62%,50% 100%,35% 65%,0 50%,35% 35%)}
#page-home>.stats-row{border-radius:44px;margin:8px 18px 0;padding:72px 4vw;background:#101010;min-height:260px;align-items:center}.stat-num{font-size:clamp(50px,6vw,90px);font-weight:400;letter-spacing:-4px}.stat-lbl{color:#c0bac6;font-size:14px}.stat-cell{border:0!important;text-align:left;padding:20px 32px}
.section-h{font-size:clamp(40px,5.1vw,78px);font-weight:400;letter-spacing:-.055em;line-height:1.04}.section-sub{font-size:17px;line-height:1.7}.home-features{padding-top:125px!important;padding-bottom:30px!important}.home-features .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}.home-features .bento>.card{grid-column:auto!important;min-height:0!important;border:0;border-top:1px solid #d4cedb;border-radius:0;background:transparent;box-shadow:none}.home-features .bento>.card:hover{background:#eee7fa;transform:none;filter:none}.home-features .bento-p{padding:36px 16px!important}.home-features .bento-title{font-size:29px;font-weight:400;letter-spacing:-1px}.home-features .bento-icon{width:46px;height:46px;border:0;background:transparent;color:#9770df;margin-bottom:25px}.home-features .bento-icon .line-icon{width:30px;height:30px}.home-features .bento-desc{font-size:16px;max-width:510px}.home-features .mini-screen{max-width:420px;background:#eee7f9;border-color:#d6c4f1}.home-features .mini-row{background:#faf8fe}
#page-home>.wrap:has(.benefits-grid){max-width:none;margin:70px 18px 0;border-radius:40px;padding:80px max(30px,calc((100vw - 1184px)/2))!important;background:#eae1fb}.benefits-grid{gap:0 40px}.benefit-card,.benefit-card:hover{border:0;border-radius:0;border-top:1px solid #cab9e1;background:transparent;box-shadow:none;padding:28px 0;transform:none}.benefit-h{font-size:24px;letter-spacing:-.7px;font-weight:400}.benefit-check{border:0;background:transparent;color:#8b5cdd;font-size:24px}
.process-grid{gap:44px}.process-grid .card,.process-grid .card:hover{background:transparent;border:0;border-radius:0;border-top:1px solid #cfc8d9;transform:none;box-shadow:none}.process-grid .bento-p{padding:30px 0}.step-pill{background:transparent;border:0;color:#8054e8;font-size:17px;padding:0;margin-bottom:40px}.process-h{font-size:27px;font-weight:400;letter-spacing:-1px}
#page-home>.wrap:has(.reviews-grid){max-width:none;background:#101010;--text:#faf9f6;--text-2:#c5c0cb;--text-3:#a69bab;--border:#37323d;padding:85px max(30px,calc((100vw - 1184px)/2))!important;margin:80px 18px 0;border-radius:40px;color:#faf9f6}#page-home .reviews-grid{gap:36px}#page-home .review-card,#page-home .review-card:hover{background:transparent;border:0;border-top:1px solid #49404f;border-radius:0;padding:30px 0;transform:none;box-shadow:none}.review-title{font-size:25px;font-weight:400;line-height:1.2;margin-top:18px}.review-q{font-size:16px;line-height:1.85}.review-author{border-color:#37323d}.author-name{color:inherit}.avatar{background:#a47ae4;color:#16101f}.star{background:#aa86f0}.star-empty{background:#49404f}
.faq-wrap{max-width:none}.faq-q{font-size:23px;letter-spacing:-.5px;padding:25px 0}.faq-plus{font-size:28px}.cta-box,.cta-box:hover{background:radial-gradient(ellipse at 75% 0,#c6a9ff,transparent 65%),linear-gradient(120deg,#a887ed,#8863ce);border-radius:32px;padding:80px 35px}.cta-h{font-size:clamp(44px,5.5vw,82px);font-weight:400;letter-spacing:-.055em}.cta-p{font-size:17px;max-width:500px}.cta-stats{border-color:#65429640}.cta-stat-n{font-size:40px;letter-spacing:-2px}footer{border-radius:40px 40px 0 0;background:#101010}.footer-grid{padding-top:75px;padding-bottom:60px}.footer-brand-logo{font-size:24px}.footer-col-title{color:#a68acb}.footer-links a{font-size:15px}
.page-hero-h{font-weight:400;letter-spacing:-.055em;font-size:clamp(48px,7.3vw,106px)}.page-hero{padding-top:155px}.biz-title{font-size:clamp(54px,7vw,100px);font-weight:400}.biz-service,.biz-service:hover{border-radius:12px}.pricing-card,.service-choice,.form-card{background:#f2edf7}.pricing-card.featured,.biz-package.featured{background:#d9c3fc;border-color:#ad86e7}
@media(max-width:900px){.home-features .bento{grid-template-columns:1fr}.process-grid{gap:20px}.hero h1.hero-h{font-size:clamp(48px,9vw,82px)}#page-home>.stats-row{padding:35px 15px}.stat-cell{padding:20px}.stat-num{font-size:60px}.laptop-wrap{height:330px}}
@media(max-width:700px){nav{height:76px}.nav-logo{font-size:14px;letter-spacing:-.5px}.nav-logo-img{width:30px;height:30px}.hero{padding:122px 20px 28px;gap:24px;border-radius:0 0 28px 28px}.hero h1.hero-h{font-size:clamp(38px,9vw,62px);line-height:1.12;letter-spacing:-.06em}.hero h1.hero-h .muted{font-size:.85em;margin-top:10px;padding:3px .22em 7px}.hero h1.hero-h:after{display:none}.hero-sub{font-size:16px}.laptop-wrap{height:250px;border-radius:22px}.laptop-svg{max-width:100%;margin:auto;transform:translateY(28px) rotate(-3deg)}.marquee-item{font-size:14px}.section-h{font-size:42px}.home-features{padding-top:70px!important}.home-features .bento-title{font-size:25px}#page-home>.stats-row{margin:0 10px;border-radius:26px;padding:25px 10px}.stat-num{font-size:49px;letter-spacing:-2px}.stat-lbl{font-size:12px}.stat-cell{padding:20px 14px}#page-home>.wrap:has(.benefits-grid),#page-home>.wrap:has(.reviews-grid){margin:50px 10px 0;border-radius:26px;padding:50px 22px!important}.benefit-h{font-size:22px}.process-h{font-size:25px}.step-pill{margin-bottom:24px}.faq-q{font-size:19px}.cta-box,.cta-box:hover{padding:48px 22px}.cta-h{font-size:43px}.cta-stat-n{font-size:34px}.page-hero-h{font-size:48px}.page-hero{padding-top:125px}.biz-title{font-size:52px}}
/* Banner proportions and motion refinement. */
.laptop-wrap{height:370px;align-items:center;padding:20px 5%;perspective:1200px}
.laptop-svg{width:38%;max-width:440px;min-width:0;flex:0 0 auto;margin:0 1% 0 auto;transform:rotate(-5deg);filter:drop-shadow(0 24px 30px #36204c45);animation:deviceFloat 8s ease-in-out infinite;transform-origin:50% 65%}
.laptop-wrap:before{animation:landscapeDrift 18s ease-in-out infinite alternate;transform-origin:50% 100%}
.laptop-wrap:after{animation:landscapeDrift 23s ease-in-out infinite alternate-reverse;transform-origin:50% 100%}
.hero h1.hero-h{animation:headlineEntrance 1.05s .18s cubic-bezier(.16,1,.3,1) both}
.hero h1.hero-h .muted{animation:outlineEntrance 1.2s .38s cubic-bezier(.16,1,.3,1) both}
.hero h1.hero-h:after{animation:starTurn 22s linear infinite;transform-origin:50% 50%}
.hero-sub{animation:contentEntrance 1s .6s cubic-bezier(.16,1,.3,1) both}
.hero>.hero-btns{animation:contentEntrance 1s .78s cubic-bezier(.16,1,.3,1) both}
.laptop-wrap{animation:bannerEntrance 1.3s .9s cubic-bezier(.16,1,.3,1) both}
.sr{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transform:translateY(40px)}
.sr.visible{transform:translateY(0)}
.sr-delay-1{transition-delay:.12s}.sr-delay-2{transition-delay:.24s}.sr-delay-3{transition-delay:.36s}
.btn-primary,.btn-solid-sm,.btn-outline,.btn-choice{transition:background .25s,color .25s,border-color .25s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.btn-primary:hover,.btn-solid-sm:hover{transform:translateY(-3px);box-shadow:0 8px 24px #8054e82b}
.btn-outline:hover,.btn-choice:hover{transform:translateY(-3px);background:#e8dcfc}
.nav-links a{transition:color .2s,background .2s}.nav-links a:hover{color:#8054e8;background:transparent}
.home-features .bento>.card{transition:background .35s,border-color .35s}
.home-features .bento>.card:hover{border-top-color:#8054e8;background:#f0e9fc}
.home-features .bento-icon{transition:transform .55s cubic-bezier(.2,.8,.2,1),color .3s}
.home-features .card:hover .bento-icon{transform:rotate(-10deg) scale(1.14);color:#8054e8}
.faq-plus{transition:transform .35s,color .25s}.faq-q:hover .faq-plus{transform:rotate(90deg);color:#8054e8}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}
@keyframes headlineEntrance{from{opacity:0;transform:translateY(55px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes outlineEntrance{from{opacity:0;transform:translateX(45px)}to{opacity:1;transform:none}}
@keyframes contentEntrance{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes bannerEntrance{from{opacity:0;transform:translateY(45px) scale(.97)}to{opacity:1;transform:none}}
@keyframes deviceFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-14px) rotate(-2deg)}}
@keyframes landscapeDrift{from{transform:scale(1.02) translateX(-.8%)}to{transform:scale(1.07) translateX(.8%)}}
@keyframes starTurn{to{transform:rotate(360deg)}}
@supports(animation-timeline:view()){
 .stats-row .stat-num{animation:metricReveal linear both;animation-timeline:view();animation-range:entry 0% entry 95%}
 @keyframes metricReveal{from{opacity:.2;transform:translateY(25px)}to{opacity:1;transform:none}}
}
@media(max-width:900px){.laptop-wrap{height:300px}.laptop-svg{width:47%;max-width:370px}}
@media(max-width:700px){.laptop-wrap{height:240px;padding:20px 7%;align-items:center}.laptop-svg{width:68%;max-width:300px;margin:0 0 0 auto;transform:rotate(-5deg)}.hero h1.hero-h{animation-duration:.85s}.hero h1.hero-h .muted{animation-duration:.9s}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.sr{opacity:1;transform:none}.laptop-svg{transform:rotate(-3deg)}}
/* Footer identity: keep the original mark legible on the dark footer. */
.footer-brand-logo{display:flex;flex-wrap:wrap;align-items:center;gap:12px;line-height:1.25;font-size:19px;letter-spacing:-.6px}
.footer-logo-img{width:52px;height:52px;flex:0 0 52px;object-fit:contain;padding:5px;background:#faf9f6;border-radius:12px;filter:none}
.footer-brand-logo sup{align-self:center;margin-left:-7px}
/* A quiet, repeating emphasis on the home headline. */
.hero h1.hero-h .muted{animation:outlineEntrance 1.2s .38s cubic-bezier(.16,1,.3,1) both,headlineTint 8s 2s ease-in-out infinite}
@keyframes headlineTint{0%,25%,75%,100%{color:#101010;border-color:#a388d2}45%,55%{color:#8054e8;border-color:#8054e8}}
.biz-service.website-service{grid-column:2/-1;min-height:230px;background:linear-gradient(125deg,#eae1fb,#f3eefb);gap:24px}
.website-service .biz-service-top{margin-bottom:0}.website-service p{max-width:600px}.website-service .btn-primary{align-self:flex-start;margin-top:18px}
@media(max-width:900px){.biz-service.website-service{grid-column:1;min-height:0}.footer-brand-logo{font-size:17px}.footer-logo-img{width:44px;height:44px;flex-basis:44px}}
@media(prefers-reduced-motion:reduce){.hero h1.hero-h .muted{animation:none!important}}
/* Reveal headings, cards and sections as the existing scroll observer brings them into view. */
@media(prefers-reduced-motion:no-preference){
  .page.active .sr.visible{animation:sectionRise .85s var(--reveal-delay,0s) cubic-bezier(.16,1,.3,1) both}
  .sr-delay-1{--reveal-delay:.07s}.sr-delay-2{--reveal-delay:.14s}.sr-delay-3{--reveal-delay:.21s}.sr-delay-4{--reveal-delay:.28s}
  .page.active :is(.section-h,.page-hero-h,.biz-title).sr.visible{animation-name:headingRise;animation-duration:1s}
  @keyframes sectionRise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
  @keyframes headingRise{from{opacity:0;translate:0 32px}to{opacity:1;translate:0 0}}
}

/* SVG sparkle keeps the same shape across desktop and mobile fonts. */
:root{--sparkle-icon:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 1v22M1 12h22M4.2 4.2l15.6 15.6m0-15.6L4.2 19.8%27 stroke=%27black%27 stroke-width=%271.25%27 stroke-linecap=%27round%27/%3E%3C/svg%3E")}
.eyebrow::before,.page-hero-eyebrow::before,.hero h1.hero-h::after{
  display:inline-block;
  width:1em;
  height:1em;
  background:currentColor;
  -webkit-mask:var(--sparkle-icon) center / contain no-repeat;
  mask:var(--sparkle-icon) center / contain no-repeat;
}
.eyebrow::before,.page-hero-eyebrow::before{font-size:14px;vertical-align:-.12em}
@media(max-width:700px){.hero h1.hero-h::after{display:none}}

#page-home > .stats-row .stat-cell { text-align: center; }
#page-home .cta-h {
  max-width: 23ch;
  margin-inline: auto;
  font-size: clamp(1.75rem, 5vw, 4.25rem);
  text-wrap: balance;
}
.cta-it-problem { white-space: nowrap; }

/* Match the homepage CTA to the lavender benefits section. */
#page-home .cta-box {
  background: #eae1fb;
  border: 1px solid #e0d6eb;
}
#page-home :is(.cta-h, .cta-stat-n) { color: var(--text); }
#page-home :is(.cta-p, .cta-stat-l) { color: var(--text-2); }
#page-home .cta-stats { border-color: #d8c9ef; }
#page-home .cta-btns .line-icon { color: #7954ad; }

#page-home .cta-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 12.5rem));
}
#page-home .cta-btns > :is(button, a) {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding-block: 12px;
  justify-content: center;
  align-items: center;
}
@media (max-width: 480px) {
  #page-home .cta-btns { grid-template-columns: minmax(0, 12.5rem); }
}
.faq-plus {
  position: relative;
  padding: 0;
  font-size: 0;
}
.faq-plus::before,
.faq-plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }

.banner-network {
  position: absolute;
  inset-inline-start: 5%;
  top: 50%;
  width: 45%;
  max-height: 82%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #fff;
}
.banner-network-lines, .banner-network-pulse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.banner-network-lines { opacity: .45; }
.banner-network-nodes { fill: currentColor; opacity: .72; }
.banner-network-pulse { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .banner-network-pulse {
    display: inline;
    stroke-width: 3;
    stroke-dasharray: 3 97;
    animation: bannerSignal 6s linear infinite;
  }
  .banner-network-pulse-secondary { animation-delay: -3s; }
  @keyframes bannerSignal { to { stroke-dashoffset: -100; } }
}
@media (max-width: 700px) {
  .banner-network { inset-inline-start: 3%; width: 55%; opacity: .65; }
}

.service-motion-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-scan { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .service-motion-started .service-wifi-inner { animation: serviceIconReveal .5s .55s both; }
  .service-motion-started .service-wifi-middle { animation: serviceIconReveal .5s .85s both; }
  .service-motion-started .service-wifi-outer { animation: serviceIconReveal .5s 1.15s both; }
  .service-motion-started .service-scan { animation: serviceIconScan 1s .55s both; }
  .service-motion-started .service-check { animation: serviceIconReveal .5s 1.55s both; }
  .service-motion-started .service-browser-bar { animation: serviceIconReveal .5s .55s both; }
  .service-motion-started .service-browser-content { animation: serviceIconReveal .5s 1s both; }

  @keyframes serviceIconReveal {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes serviceIconScan {
    0% { opacity: 0; transform: translateY(0); }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(7px); }
  }
}

.home-features .line-icon svg { filter: none; animation: none; }

#page-zakelijk .cta-box {
  background: #eae1fb;
  border: 1px solid #e0d6eb;
}
#page-zakelijk .cta-h { color: var(--text); }
#page-zakelijk .cta-p { color: var(--text-2); }

.biz-title { font-size: clamp(2rem, 5.2vw, 5rem); line-height: 1.08; }
.biz-title-subline { display: block; text-wrap: balance; }

.service-motion-icon {
  width: 36px;
  height: 36px;
}
@media (prefers-reduced-motion: no-preference) {
  .service-motion-icon.service-motion-started {
    animation: serviceIconAccent 1.6s .55s ease-in-out both;
  }
  @keyframes serviceIconAccent {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.22); filter: drop-shadow(0 0 6px #a987e8); }
  }
}

/* Shared palette for interface icons across all pages. */
:root { --icon-accent: #7954ad; }
.line-icon,
.service-motion-icon,
.benefit-check,
.pf-check,
.compare-check,
.faq-plus {
  color: var(--icon-accent);
}
.line-icon svg {
  filter: none;
  animation-name: iconFloat;
}
.home-features .line-icon svg { animation: none; }

/* Keep the dashboard lettering sharp and readable inside the vector laptop. */
.laptop-svg {
  width: 42%;
  max-width: 500px;
  filter: none;
}
.laptop-svg text { text-rendering: optimizeLegibility; }
.laptop-svg text[fill="#555"],
.laptop-svg text[fill="#888"] { fill: #bcbcc8; }
.laptop-svg text[font-size="9"],
.laptop-svg text[font-size="10"] { font-size: 11px; }
.laptop-svg :is(.dash-stat, .dash-ticket) {
  animation: none;
  opacity: 1;
}
@media (max-width: 900px) {
  .laptop-svg { width: 47%; max-width: 400px; }
}
@media (max-width: 700px) {
  .laptop-svg { width: 76%; max-width: 320px; }
}

/* Keep the form still while visitors interact with its controls. */
.form-card:hover,
.form-card.sr.visible:hover {
  transform: none;
  background: #f2edf7;
  border-color: #e4deec;
}
.form-card button:hover { transform: none; }
.form-select { color-scheme: light; }
.form-select option {
  background: #fff;
  color: #241a2b;
}

/* Rounded panels and a split introduction, based on the supplied reference. */
#page-home {
  --panel-paper: #fff;
  --panel-line: #dedbe4;
  --panel-lavender: #f2eefb;
  background-color: var(--panel-paper);
}
#page-home > .hero {
  max-width: none;
  padding: clamp(118px, 11vw, 174px) max(24px, calc((100vw - 1320px) / 2)) clamp(48px, 7vw, 104px);
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: start;
  gap: 24px clamp(30px, 5vw, 74px);
  border-radius: 0 0 clamp(32px, 5vw, 72px) clamp(32px, 5vw, 72px);
  background: radial-gradient(ellipse at 96% 0%, #eee9fc, transparent 57%), #fff;
}
#page-home .hero h1.hero-h {
  grid-area: 1 / 1;
  align-self: end;
  font-size: clamp(44px, 5.1vw, 80px);
  letter-spacing: -.055em;
  line-height: 1.06;
  margin: 0;
}
#page-home .hero h1.hero-h .muted {
  font-size: .88em;
  margin-top: .22em;
  padding: .1em .28em .14em;
  max-width: 100%;
  white-space: normal;
}
#page-home .hero h1.hero-h::after { display: none; }
#page-home .hero-sub { grid-area: 2 / 1; margin: 0; max-width: 53ch; }
#page-home .hero > .hero-btns {
  grid-area: 3 / 1;
  justify-content: flex-start;
  align-self: start;
  padding-top: 24px;
  border-top: 1px solid var(--panel-line);
}
#page-home .laptop-wrap {
  grid-area: 1 / 2 / 4 / 3;
  align-self: stretch;
  justify-content: center;
  height: auto;
  min-height: 360px;
  margin: 0;
  padding: 24px;
  border-radius: 28px;
  background: radial-gradient(ellipse at 25% 0%, #c8b9fa, transparent 68%), linear-gradient(155deg, #9e89e7, #6b54b3);
}
#page-home .laptop-svg { width: 100%; max-width: 390px; margin: 0; }
#page-home .banner-network { inset-inline-start: 8%; top: 35%; width: 83%; opacity: .42; }
#page-home .marquee-wrap { padding-block: 24px; }
#page-home .home-features .bento { gap: clamp(16px, 2.4vw, 36px); }
#page-home .home-features .bento > .card,
#page-home .home-features .bento > .card:hover {
  background-color: var(--panel-paper);
  border: 1px solid var(--panel-line);
  border-radius: 25px;
}
#page-home .home-features .bento > .card:hover { border-color: #b9a4df; }
#page-home .home-features .bento-p { padding: clamp(24px, 3vw, 42px) !important; }
#page-home .home-features .bento-icon {
  width: 54px;
  height: 54px;
  background: var(--panel-lavender);
  border-radius: 14px;
}
#page-home .home-features .bento-title { font-size: clamp(23px, 2.2vw, 34px); }
.service-choice, .biz-service { border-radius: 25px; }
@media (max-width: 900px) {
  #page-home > .hero { grid-template-columns: 1fr; grid-template-rows: auto; }
  #page-home .hero h1.hero-h,
  #page-home .hero-sub,
  #page-home .hero > .hero-btns,
  #page-home .laptop-wrap { grid-area: auto; }
  #page-home .laptop-wrap { min-height: 250px; }
  #page-home .laptop-svg { width: 76%; }
  #page-home .banner-network { width: 54%; }
}
@media (max-width: 480px) {
  #page-home .hero h1.hero-h { font-size: clamp(30px, 9.7vw, 46px); }
  #page-home .hero > .hero-btns { width: 100%; }
  #page-home .laptop-wrap { min-height: 200px; }
  #page-home .laptop-svg { width: 94%; }
}

/* Let the panel surface catch light while keeping its content still. */
@media (prefers-reduced-motion: no-preference) {
  #page-home .home-features .bento > .card {
    background-image: linear-gradient(115deg, transparent 35%, #eee6fa 50%, transparent 65%);
    background-size: 240% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    transition: border-color .35s ease, background-position .8s cubic-bezier(.2,.75,.25,1);
  }
  #page-home .home-features .bento > .card:is(:hover, :focus-within) {
    background-position: 0 0;
  }
  #page-home .home-features .bento > .card .bento-icon {
    transition: background-color .35s ease;
  }
  #page-home .home-features .bento > .card:is(:hover, :focus-within) .bento-icon {
    background-color: #e7dafa;
  }
  @supports (animation-timeline: view()) {
    #page-home .banner-network {
      animation: panelNetworkDepth linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes panelNetworkDepth {
      from { translate: 0 14px; opacity: .24; }
      50% { opacity: .55; }
      to { translate: 0 -14px; opacity: .24; }
    }
  }
}

/* Product illustration for the business introduction. */
#page-zakelijk .biz-title {
  max-width: 13ch;
  font-size: clamp(42px, 5.5vw, 85px);
  text-wrap: balance;
}
.biz-product-stage {
  position: relative;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  border: 1px solid #3d2f54;
  border-radius: 32px;
  background: radial-gradient(ellipse at 65% 32%, #443361 0%, #221a30 46%, #15111d 78%);
  aspect-ratio: 10 / 9;
}
.biz-product-art { display: block; width: 100%; height: 100%; }
.biz-product-stage figcaption {
  position: absolute;
  inset-inline-start: 7%;
  bottom: 8%;
  color: #e0d3f5;
  font-size: clamp(12px, 1.3vw, 16px);
}
.biz-product-device { transform-box: fill-box; transform-origin: center; }
.biz-product-signal { stroke: #dbc7ff; stroke-width: 2; stroke-dasharray: 4 96; }
@media (prefers-reduced-motion: no-preference) {
  #page-zakelijk.active .biz-product-device {
    animation: bizProductFloat 7s ease-in-out infinite;
  }
  #page-zakelijk.active .biz-product-signal {
    animation: bizProductSignal 5s linear infinite;
  }
  #page-zakelijk.active .biz-product-leds {
    animation: bizProductLeds 3s ease-in-out infinite;
  }
  @keyframes bizProductFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-23px) rotate(3deg); }
  }
  @keyframes bizProductSignal { to { stroke-dashoffset: -100; } }
  @keyframes bizProductLeds { 50% { opacity: .35; } }
}
@media (max-width: 700px) {
  .biz-product-stage { border-radius: 24px; }
}

.drivein-project {
  overflow: hidden;
  border-radius: 30px;
  padding: clamp(22px, 5vw, 64px);
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  background: linear-gradient(135deg, #231719, #111 60%);
}
.drivein-project .section-h { color: #fff; margin-bottom: 14px; }
.drivein-project .eyebrow { color: #f4a4a4; }
.drivein-project .section-sub { color: #ded7db; max-width: 60ch; }
.drivein-project .btn-outline { color: #fff; border-color: #ad8d94; }
.drivein-project .btn-outline:hover { background: #39282d; }
.drivein-project-window {
  display: block;
  overflow: hidden;
  border: 1px solid #59474d;
  border-radius: 18px;
  background: #171415;
  color: #e9dfe2;
}
.drivein-project-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  font-size: clamp(10px, 1.5vw, 13px);
}
.drivein-project-bar > span { width: 7px; height: 7px; border-radius: 50%; background: #e55252; }
.drivein-project-window img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .drivein-project-window img { transition: transform .8s cubic-bezier(.2,.75,.25,1); }
  .drivein-project-window:is(:hover, :focus-visible) img { transform: scale(1.045); }
  @supports (animation-timeline: view()) {
    .drivein-project-window {
      animation: driveinReveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    @keyframes driveinReveal {
      from { clip-path: inset(0 10% 14% round 18px); translate: 0 28px; }
      to { clip-path: inset(0 round 18px); translate: 0 0; }
    }
  }
}

/* Shared navigation and distinct introductions for the two personal pages. */
.nav-links a.active {
  background: #eee6f8;
  color: #251b36;
  text-decoration: none;
}
#page-particulier > .page-hero {
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px clamp(25px, 6vw, 85px);
  align-content: center;
  text-align: left;
}
#page-particulier .page-hero > :not(.subpage-feature) {
  grid-column: 1;
  margin: 0;
}
#page-particulier .page-hero-h {
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.03;
  text-wrap: balance;
}
#page-particulier .page-hero-sub { max-width: 49ch; }
#page-particulier .page-hero .hero-btns { justify-content: flex-start; margin-top: 10px; }
.subpage-feature {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: clamp(24px, 4vw, 50px);
  min-height: 240px;
  border: 1px solid #ded4ee;
  border-radius: 28px;
  background: radial-gradient(ellipse at 92% 8%, #d9c8f4, transparent 70%), #f0e9f8;
  color: #221831;
}
.subpage-feature p { font-size: clamp(27px, 3.3vw, 46px); line-height: 1.05; letter-spacing: -.04em; }
.subpage-feature-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #fff;
}
.subpage-feature ul { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 0; }
.subpage-feature li { border: 1px solid #cbb9e4; border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.subpage-feature-about img { background: #fff; padding: 9px; border-radius: 18px; }



.drivein-project-window {
  animation: none;
  background: #171415 url('/vdh-drivein-showcase.png') center / cover no-repeat;
}
.drivein-project-bar { background: #171415; }
.drivein-project-bar small { margin-inline-start: auto; color: #d9c6cc; }
.drivein-project-window iframe {
  display: block;
  width: 100%;
  height: clamp(340px, 55vw, 630px);
  border: 0;
}
@media (max-width: 760px) {
  #page-particulier > .page-hero { grid-template-columns: 1fr; }
  .subpage-feature { grid-column: 1; grid-row: auto; min-height: 0; }
  .drivein-project-bar small { display: none; }
}

.drivein-project-window { background: #171415; }
.drivein-project-scroll {
  height: clamp(340px, 55vw, 630px);
  overflow: auto;
  overscroll-behavior-y: contain;
  scrollbar-color: #b56666 #252023;
}
.drivein-project-scroll img {
  transform: none !important;
  transition: none;
}
.drivein-project-scroll:focus-visible { outline-offset: -4px; }

#page-over > .page-hero {
  max-width: 1280px;
  padding-bottom: 42px;
}
#page-over .page-hero-h {
  font-size: clamp(42px, 6vw, 82px);
  text-wrap: balance;
}
#page-over .about-grid {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid #dedbe4;
  border-radius: 25px;
  background: #fff;
}
#page-diensten .service-choice-grid { gap: clamp(16px, 2.4vw, 36px); }
#page-diensten .service-choice {
  min-height: 0;
  padding: clamp(24px, 3vw, 42px);
  background: #fff;
  border: 1px solid #dedbe4;
  border-radius: 25px;
}
#page-diensten .service-choice:hover { border-color: #b9a4df; }
#page-diensten .service-choice .metric-icon {
  background: #f2eefb;
  border: 0;
  border-radius: 14px;
  width: 54px;
  height: 54px;
}
.drivein-project-scroll { overflow-y: scroll; scrollbar-gutter: stable; }

/* Use the homepage card treatment across the inner pages. */
.page:not(#page-home) {
  --card-paper: #fff;
  --card-edge: #dedbe4;
  --card-icon: #f2eefb;
  --card-padding: clamp(22px, 3vw, 42px);
}
.page:not(#page-home) .card {
  min-width: 0;
  background: var(--card-paper);
  border: 1px solid var(--card-edge);
  border-radius: 25px;
}
.page:not(#page-home) .card:hover {
  background: var(--card-paper);
  border-color: #b9a4df;
  box-shadow: none;
  transform: none;
}
.page:not(#page-home) .card :is(.metric-icon, .bento-icon, .value-icon) {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 14px;
  background: var(--card-icon);
  color: var(--icon-accent);
}
.page:not(#page-home) :is(.service-choice, .biz-service, .biz-step, .biz-package, .pricing-card, .value-card, .info-card) {
  padding: var(--card-padding);
  min-height: 0;
}
.page:not(#page-home) :is(.biz-service h3, .biz-step h3, .value-h, .bento-title, .pricing-name) {
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.18;
  text-wrap: balance;
}
.page:not(#page-home) :is(.biz-service p, .biz-step p, .value-p, .bento-desc, .pricing-desc) {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
}
.page:not(#page-home) :is(.biz-services, .biz-roadmap, .biz-packages, .pricing-grid, .service-choice-grid, .about-values) {
  gap: clamp(16px, 2.4vw, 32px);
}
.page:not(#page-home) :is(.pricing-card.featured, .biz-package.featured) {
  border-color: #ad91d8;
}
#page-zakelijk .biz-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#page-zakelijk .biz-service.big { grid-row: auto; min-height: 0; }
#page-zakelijk .website-service { grid-column: auto; }
@media (max-width: 900px) {
  #page-zakelijk .biz-services { grid-template-columns: minmax(0, 1fr); }
}

/* Keep service content together and the showcase scrollable without controls. */
#page-zakelijk .biz-section-head {
  display: block;
  max-width: 760px;
}
#page-zakelijk .biz-section-head .section-h {
  font-size: clamp(34px, 4vw, 58px);
}
#page-zakelijk .biz-section-head .section-sub { margin-top: 12px; }
#page-zakelijk .biz-services .biz-service {
  justify-content: flex-start;
  gap: 16px;
}
#page-zakelijk .biz-service-top { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
#page-zakelijk .biz-stack { margin-top: 0; gap: 4px; }
#page-zakelijk .biz-stack-row { padding: 6px 0; border: 0; border-bottom: 1px solid #e8e1ef; }
.drivein-project-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior-y: auto;
  height: clamp(260px, 47vw, 540px);
}
.drivein-project-scroll img {
  width: 100%;
  max-height: none;
  pointer-events: none;
}

.nav-links li.nav-dropdown-closed .nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
}
.page:not(#page-home) { --card-padding: clamp(19px, 2.15vw, 32px); }
.page:not(#page-home) :is(.biz-services, .biz-roadmap, .biz-packages, .pricing-grid, .service-choice-grid, .about-values) {
  gap: clamp(12px, 1.65vw, 22px);
}
#page-diensten .service-choice { padding: var(--card-padding); }
#page-zakelijk .biz-services .biz-service { gap: 10px; }
#page-zakelijk .biz-service-top { margin-bottom: 8px; }
#page-zakelijk .biz-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: #66537c;
  font-weight: 600;
}
#page-zakelijk .biz-service h3 { margin-top: 8px; }
#page-zakelijk .biz-stack-row { padding-block: 4px; }

/* Featured choices use the same quiet text treatment as the service labels. */
.page:not(#page-home) .pricing-badge {
  position: static;
  align-self: flex-start;
  padding: 0;
  margin: 0 0 8px;
  background: none;
  border: 0;
  box-shadow: none;
  color: #66537c;
  font-size: 13px;
  font-weight: 600;
}
.drivein-project-scroll {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 540px;
  scrollbar-gutter: stable;
}
.drivein-project-scroll img {
  display: block;
  height: auto;
  aspect-ratio: 1521 / 2407;
}

.pricing-card-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.pricing-card-labels .pricing-label,
.page:not(#page-home) .pricing-card-labels .pricing-badge { margin: 0; }
.pricing-card-labels .pricing-badge,
#page-zakelijk .biz-service-top > .biz-tag:last-child { text-align: right; }
.drivein-project-scroll img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  margin-inline: auto;
}
.drivein-project-scroll img[width="798"] {
  max-width: 798px;
}

/* Keyboard access and form feedback */
html { scroll-padding-top: 100px; }
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  transform: translateY(calc(-100% - 24px));
}
.skip-link:focus { transform: none; }
:focus-visible,
.form-input:focus-visible, .form-textarea:focus-visible, .form-select:focus-visible,
#main-content:focus {
  outline: 3px solid #7954c7;
  outline-offset: 4px;
}
footer :focus-visible { outline-color: #c6a9ff; }
a.nav-logo, a.footer-brand-logo, a.contact-info-item,
a.btn-primary, a.btn-outline, a.btn-ghost-sm, a.btn-solid-sm { text-decoration: none; }
.service-choice { position: relative; }
.service-choice .btn-choice { margin-top: auto; justify-content: center; }
.service-choice .btn-choice::after { content: ""; position: absolute; inset: 0; }
.service-choice:focus-within { outline: 3px solid #7954c7; outline-offset: 4px; }
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.faq-item.open .faq-a { max-height: none; }
.modal-close { cursor: pointer; }
.field-error { margin: 6px 0 0; font-size: 13px; color: #a42739; }
[aria-invalid="true"] { border-color: #a42739; }
#contact-form-title { margin-top: 0; }
.modal-overlay.open { transition-property: opacity; }
.nav-right a.btn-solid-sm { align-content: center; }
.page h1[tabindex="-1"]:focus {
  opacity: 1 !important;
  outline: none;
}
.page h1.navigation-cue:focus-visible { background-color: #eae2f7; }

/* Motion, mobile safe areas and form feedback */
.motion-settings { color: #c6b9d5; font-size: 13px; }
.motion-settings summary { cursor: pointer; }
.motion-settings button {
  padding: 4px 8px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 6px;
  cursor: pointer;
}
.motion-settings button[aria-pressed="true"] { background: #352744; }
.motion-paused :is(.loader-logo, .laptop-svg, .banner-network-pulse, .dot-live, .dash-stat,
  .dash-ticket, .dash-badge, .dash-bar, .line-icon svg, .step-pill, .biz-step-num, .marquee-track,
  .marquee-item, .biz-product-device, .biz-product-signal, .biz-product-leds),
.motion-paused :is(.hero-ambient, .laptop-wrap, .biz-chart)::before,
.motion-paused :is(.laptop-wrap, .biz-chart, .hero h1.hero-h, .card-shine, .benefit-card,
  .process-grid .card, .review-card, .pricing-card, .contact-info-item, .value-card, .biz-step,
  .biz-package, .biz-case-card, .biz-quote, .cta-box, .form-card)::after {
  animation-play-state: paused !important;
}
.motion-paused .hero h1.hero-h .muted { animation-play-state: running, paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { flex-wrap: wrap; width: 100%; }
  .marquee-item[aria-hidden="true"] { display: none; }
  .marquee-item { white-space: normal; padding-inline: 12px; }
}
html {
  scroll-padding-top: calc(100px + env(safe-area-inset-top));
  scroll-padding-bottom: env(safe-area-inset-bottom);
}
nav {
  height: calc(88px + env(safe-area-inset-top));
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-left: max(4vw, env(safe-area-inset-left));
  padding-right: max(4vw, env(safe-area-inset-right));
}
@media (max-width: 700px) {
  nav {
    height: calc(76px + env(safe-area-inset-top));
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
}
@media (max-width: 960px) {
  .mobile-menu {
    margin-top: env(safe-area-inset-top);
    margin-left: env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);
    max-height: calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
  }
}
body { padding-bottom: env(safe-area-inset-bottom); }
main { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.skip-link { top: calc(12px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); }
.modal-overlay {
  margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.modal-card {
  overscroll-behavior: contain;
  max-height: min(820px, calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
}
@media (max-width: 700px) {
  .modal-card { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
body:has(.modal-overlay.open) { overflow: hidden; }
:is(a, button, input, textarea, select) { -webkit-tap-highlight-color: #8054e83d; }
:is(.contact-info-item > div, .form-row > *, .form-card, .modal-card) { min-width: 0; }
:is(.ci-val, .field-error, .form-status, .privacy-card, .info-card, .footer-links a) { overflow-wrap: anywhere; }
:is(h3.bento-title, h3.benefit-h, h3.process-h, h3.value-h, h3.pricing-name) { margin-block-start: 0; }
.is-sending::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: request-spin .8s linear infinite;
}
@keyframes request-spin { to { transform: rotate(1turn); } }
.motion-paused .is-sending::before { animation-play-state: paused; }

@media (pointer: coarse) {
  .modal-close { min-width: 44px; min-height: 44px; }
  .modal-card :is(.form-input, .form-textarea) { font-size: 16px; }
}

/* Copy and number readability */
:is(.section-h, .page-hero-h, .biz-title, .cta-h) { text-wrap: balance; }
:is(.stat-num, .cta-stat-n, .pricing-price, .biz-price, time) { font-variant-numeric: tabular-nums; }
.brand-name { white-space: nowrap; }
.faq-q { scroll-margin-top: 12px; }
@media (max-width: 700px) {
  .brand-name { white-space: normal; }
}
@media (forced-colors: active) {
  .page h1.navigation-cue:focus-visible { outline: 2px solid Highlight; }
}
#main-content:focus { outline-offset: -3px; }
.motion-settings:not([open]) button { display: none; }