/* MPX Studio — gebundelde stylesheet — GEGENEREERD, NIET MET DE HAND WIJZIGEN
Samengevoegd uit 35 bronbestanden in exact de oude -volgorde,
zodat de cascade identiek blijft. Opnieuw bouwen: node build-css.mjs */
/* ═══ mpx-studio.css ═══ */
:root{--ink:#080a0d;--night:#0d1725;--blue:#142a43;--white:#f5f4f0;--muted:#9ca5ae;--line:rgba(245,244,240,.18);--warm:#c9b99b;--sans:'DM Sans',sans-serif;--display:'Playfair Display',serif;--label:'Manrope',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--ink);color:var(--white);font-family:var(--sans);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit} .site-header{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:28px clamp(24px,5vw,72px);mix-blend-mode:normal}.wordmark{display:flex;align-items:center;gap:10px;font-family:var(--label);font-size:14px;letter-spacing:.16em;text-transform:uppercase}.wordmark i{display:block;width:1px;height:16px;background:var(--warm);transform:rotate(20deg)}.wordmark em{font-family:var(--display);font-size:17px;letter-spacing:0;text-transform:none;color:var(--warm)}.site-nav{display:flex;align-items:center;gap:clamp(22px,3.5vw,56px);font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.site-nav a{color:rgba(245,244,240,.72);transition:color .25s ease}.site-nav a:hover{color:var(--white)}.site-nav .nav-contact{color:var(--white);padding:11px 16px;border:1px solid var(--line)}.nav-contact b{font-size:16px;font-weight:400;margin-left:9px}.menu-toggle{display:none;background:transparent;border:0;color:var(--white);padding:8px}.hero{min-height:100svh;position:relative;display:flex;align-items:center;overflow:hidden;background:linear-gradient(115deg,var(--ink) 0%,#0a0f16 49%,var(--blue) 100%)}.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 72% 42%,rgba(175,188,200,.16),transparent 1px),radial-gradient(circle at 73% 42%,rgba(20,42,67,.8),transparent 31%);background-size:18px 18px,100% 100%;opacity:.4}.hero-grain{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");pointer-events:none}.hero-copy{position:relative;z-index:1;width:min(650px,60vw);margin-left:clamp(24px,11vw,175px);padding-top:40px}.eyebrow,.section-label{font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 28px}.eyebrow span{width:31px;height:1px;background:var(--warm)}h1,h2,h3,p{margin:0}h1,h2{font-family:var(--display);font-weight:500;line-height:1.02;letter-spacing:-.025em}h1{font-size:clamp(58px,8vw,124px);max-width:700px}h1 i,h2 i{font-weight:500;color:var(--warm)}.hero-intro{max-width:385px;margin:32px 0 32px;color:#c0c6cc;font-size:15px;line-height:1.8}.text-link{display:inline-flex;align-items:center;gap:20px;font-family:var(--label);font-size:10px;letter-spacing:.15em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:12px;transition:border-color .25s,color .25s}.text-link span{font-size:18px;color:var(--warm);transition:transform .25s}.text-link:hover{border-color:var(--warm)}.text-link:hover span{transform:translate(3px,-3px)}.hero-orbit{position:absolute;right:clamp(7%,12vw,17%);top:50%;width:clamp(240px,28vw,420px);aspect-ratio:1;transform:translateY(-50%);display:grid;place-items:center}.orbit-ring{position:absolute;border:1px solid rgba(245,244,240,.28);border-radius:50%;transform:rotate(-28deg)}.ring-one{inset:0;border-right-color:var(--warm);border-left-color:transparent;animation:spin 24s linear infinite}.ring-two{inset:13%;border-color:rgba(245,244,240,.16);border-top-color:var(--warm);transform:rotate(36deg);animation:spin-reverse 18s linear infinite}.hero-orbit::before{content:'';position:absolute;width:20%;aspect-ratio:1;border-radius:50%;background:var(--white);box-shadow:0 0 60px 15px rgba(245,244,240,.16)}.orbit-core{position:relative;text-align:center;font-family:var(--label);font-size:clamp(20px,2.4vw,34px);font-weight:700;letter-spacing:.16em}.orbit-core small{display:block;margin-top:8px;font-size:8px;font-weight:400;letter-spacing:.25em;color:var(--muted)}@keyframes spin{to{transform:rotate(332deg)}}@keyframes spin-reverse{to{transform:rotate(-324deg)}}.hero-footer{position:absolute;bottom:30px;left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);display:flex;justify-content:space-between;font-family:var(--label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.hero-footer b{font-size:15px;color:var(--warm);font-weight:400;margin-left:8px}.intro-band,.work-section,.approach-section{padding:clamp(88px,12vw,170px) clamp(24px,11vw,175px)}.intro-band{background:var(--white);color:var(--ink)}.intro-content{display:grid;grid-template-columns:1.1fr .9fr;gap:10%;margin-top:70px}.intro-content h2,.approach-section h2,.contact-section h2{font-size:clamp(45px,6.3vw,92px)}.intro-content p{max-width:370px;color:#4c555d;font-size:17px;line-height:1.8;margin-bottom:35px}.text-link.dark{border-color:rgba(8,10,13,.25)}.work-section{background:#f0efeb;color:var(--ink)}.section-heading,.contact-top{display:flex;justify-content:space-between;align-items:baseline;gap:24px}.section-heading p,.contact-top p{color:#5c6369;font-size:14px}.project-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(24px,4vw,60px);margin-top:66px;align-items:end}.project{display:block}.project-image{position:relative;overflow:hidden;aspect-ratio:1.25;background:var(--night);display:grid;place-items:center;transition:transform .5s ease}.project-small .project-image{aspect-ratio:.9}.project:hover .project-image{transform:translateY(-7px)}.image-one{background:linear-gradient(135deg,#111820,#193a58)}.image-two{background:#090b0e}.image-one::before,.image-two::before{content:'';position:absolute;inset:17%;border:1px solid rgba(245,244,240,.26);transform:rotate(-12deg)}.image-one::after{content:'';position:absolute;width:36%;aspect-ratio:1;border:1px solid var(--warm);transform:rotate(43deg)}.image-two::after{content:'';position:absolute;inset:35% 23%;border:1px solid var(--warm);transform:rotate(45deg)}.project-mark{position:absolute;top:20px;left:22px;font-family:var(--label);font-size:10px;letter-spacing:.16em;color:var(--muted)}.project-symbol{position:relative;z-index:1;font-family:var(--display);font-size:clamp(70px,11vw,150px);color:var(--white);font-style:italic}.mpx-symbol{font-family:var(--label);font-style:normal;font-size:clamp(50px,8vw,100px);letter-spacing:.12em;color:var(--warm)}.project-meta{display:flex;justify-content:space-between;align-items:start;margin-top:18px}.project-meta h3{font-family:var(--display);font-size:24px;font-weight:500}.project-meta p{font-family:var(--label);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#6c7378;margin-top:6px}.project-meta>span{font-size:24px;color:#707981}.project-note{display:flex;align-items:center;justify-content:space-between;grid-column:2;max-width:280px;margin-top:30px;font-family:var(--display);font-size:28px;line-height:1.1}.project-note i{color:#617083}.circle-arrow{width:60px;height:60px;display:grid;place-items:center;border:1px solid rgba(8,10,13,.3);border-radius:50%;font-size:22px;color:var(--blue);transition:background .3s,color .3s}.circle-arrow:hover{background:var(--blue);color:var(--white)}.approach-section{background:var(--night)}.approach-section .section-label{color:#aab2ba}.approach-section h2{margin:70px 0 85px}.approach-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.approach-list article{padding:25px 30px 0 0;border-right:1px solid var(--line);margin-right:30px}.approach-list article:last-child{border:0;margin:0}.approach-list span{font-family:var(--label);font-size:10px;color:var(--warm);letter-spacing:.15em}.approach-list h3{font-family:var(--display);font-size:30px;font-weight:500;margin:46px 0 15px}.approach-list p{max-width:250px;font-size:14px;line-height:1.75;color:#aab2ba}.contact-section{padding:clamp(80px,11vw,150px) clamp(24px,11vw,175px) 36px;background:var(--white);color:var(--ink)}.contact-top p{color:#59616a}.contact-section h2{margin:90px 0 50px}.contact-link{display:inline-flex;gap:18px;align-items:center;font-family:var(--label);font-size:clamp(18px,2.4vw,30px);letter-spacing:.03em;border-bottom:1px solid rgba(8,10,13,.35);padding-bottom:14px}.contact-link span{font-size:24px;color:var(--blue)}.contact-bottom{display:flex;justify-content:space-between;margin-top:clamp(100px,15vw,220px);padding-top:20px;border-top:1px solid rgba(8,10,13,.2);font-family:var(--label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#697179}footer{display:flex;justify-content:space-between;padding:20px clamp(24px,5vw,72px);font-family:var(--label);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#7f878d;background:var(--ink)}.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}.reveal.is-visible{opacity:1;transform:none}@media(max-width:760px){.site-header{padding:22px 24px}.menu-toggle{display:flex;flex-direction:column;gap:6px}.menu-toggle span{display:block;width:25px;height:1px;background:var(--white);transition:transform .3s}.site-nav{position:absolute;top:0;right:0;left:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:26px;background:var(--ink);opacity:0;visibility:hidden;transition:opacity .3s}.site-nav.is-open{opacity:1;visibility:visible}.site-nav a{font-size:14px}.site-nav .nav-contact{margin-top:15px}.hero{min-height:760px;align-items:flex-start;padding-top:150px}.hero-copy{width:auto;margin:0 24px;padding:0}.hero-orbit{right:-15%;top:auto;bottom:95px;width:290px;opacity:.72}.hero-footer{bottom:22px;gap:18px;font-size:8px}.hero-footer span:last-child{display:none}.intro-band,.work-section,.approach-section,.contact-section{padding:84px 24px}.intro-content{display:block;margin-top:52px}.intro-content h2{margin-bottom:42px}.section-heading,.contact-top{display:block}.section-heading p,.contact-top p{margin-top:18px}.project-grid{display:block;margin-top:48px}.project-small{margin-top:52px}.project-note{margin-top:58px}.approach-section h2{margin:52px 0 65px}.approach-list{display:block}.approach-list article{border-right:0;border-bottom:1px solid var(--line);padding:25px 0 35px;margin:0}.approach-list h3{margin:28px 0 12px}.contact-section h2{margin:70px 0 40px}.contact-bottom,footer{gap:16px;flex-direction:column}.contact-bottom{margin-top:120px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ring-one,.ring-two{animation:none}.reveal{transition:none}}
/* ═══ mpx-studio-contrast.css ═══ */
.hero-orbit::before{background:rgba(8,10,13,.94)!important;border:1px solid rgba(245,244,240,.42);box-shadow:0 0 60px 15px rgba(20,42,67,.42),inset 0 0 24px rgba(245,244,240,.06)!important;width:30%!important}.orbit-core{z-index:2;color:var(--white);text-shadow:0 2px 14px rgba(0,0,0,.75)}.orbit-core small{color:var(--warm);text-shadow:none}
/* ═══ mpx-studio-demos.css ═══ */
.studio-intro{position:fixed;inset:0;z-index:100;background:#07090c;display:grid;place-items:center;align-content:center;gap:22px;animation:studioIntro 2.8s cubic-bezier(.76,0,.24,1) forwards;pointer-events:none}.intro-logo{display:flex;align-items:center;gap:13px;font-family:var(--label);font-size:clamp(26px,4vw,46px);letter-spacing:.18em;text-transform:uppercase;opacity:0;animation:introLogo 1s .2s ease forwards}.intro-logo i{width:1px;height:35px;background:var(--warm);transform:rotate(20deg)}.intro-logo em{font-family:var(--display);font-size:1.04em;letter-spacing:0;text-transform:none;color:var(--warm)}.intro-line{width:min(220px,42vw);height:1px;background:var(--warm);transform:scaleX(0);transform-origin:center;animation:introLine .8s .65s ease forwards}.studio-intro small{font-family:var(--label);font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);opacity:0;animation:introText .7s .9s ease forwards}@keyframes studioIntro{0%,76%{opacity:1}100%{opacity:0;visibility:hidden}}@keyframes introLogo{to{opacity:1;transform:translateY(0)}}@keyframes introLine{to{transform:scaleX(1)}}@keyframes introText{to{opacity:1}}.demo-section{padding:clamp(90px,12vw,160px) clamp(24px,11vw,175px);background:#e8e7e2;color:var(--ink)}.demo-section .section-heading{align-items:start}.demo-section .section-label{color:#67717a}.demo-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(40px,8vw,125px);margin-top:72px;align-items:center}.demo-copy h2{font-family:var(--display);font-weight:500;font-size:clamp(48px,5vw,78px);line-height:1.02}.demo-copy h2 i{color:#617083}.demo-copy>p{max-width:310px;color:#5d656c;font-size:14px;line-height:1.8;margin:30px 0 42px}.demo-tabs{border-top:1px solid rgba(8,10,13,.22)}.demo-tab{display:flex;align-items:center;gap:20px;width:100%;padding:18px 0;background:none;border:0;border-bottom:1px solid rgba(8,10,13,.22);font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:left;color:#7a8288;cursor:pointer;transition:color .25s,padding-left .25s}.demo-tab span{font-size:9px;color:#a98f65}.demo-tab:hover,.demo-tab.is-active{color:var(--ink);padding-left:8px}.demo-viewer{min-width:0;background:#080a0d;box-shadow:0 25px 70px rgba(8,10,13,.2)}.browser-bar{height:46px;display:flex;align-items:center;gap:15px;padding:0 16px;background:#171c22;border-bottom:1px solid rgba(245,244,240,.12);font-family:var(--label);font-size:9px;color:#8c969e;letter-spacing:.08em}.browser-dots{display:flex;gap:5px}.browser-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#687079}.browser-dots i:first-child{background:#a98f65}.browser-url{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browser-bar a{font-size:9px;color:var(--warm);white-space:nowrap}.browser-bar a.is-disabled{opacity:.5;pointer-events:none}.demo-frame-wrap{position:relative;height:clamp(390px,48vw,620px);background:var(--night);overflow:hidden}.demo-frame-wrap iframe{width:100%;height:100%;display:block;border:0;background:var(--night)}.demo-scroll-note{position:absolute;right:18px;bottom:18px;padding:8px 11px;background:rgba(8,10,13,.82);color:#d8d8d3;font-family:var(--label);font-size:8px;letter-spacing:.12em;text-transform:uppercase}.demo-scroll-note span{margin-left:8px;color:var(--warm);font-size:14px}@media(max-width:900px){.demo-layout{grid-template-columns:1fr;gap:52px}.demo-copy>p{max-width:430px}.demo-frame-wrap{height:540px}}@media(max-width:600px){.demo-section{padding:84px 24px}.demo-layout{margin-top:52px}.browser-bar{padding:0 11px;gap:9px}.browser-bar a{font-size:8px}.demo-frame-wrap{height:460px}.studio-intro small{font-size:7px;letter-spacing:.18em}}
/* ═══ mpx-studio-space.css ═══ */
/* MPX Studio / private observatory direction */
body{background:#05070b;color:#f5f4f0}.hero{background:radial-gradient(ellipse at 78% 44%,rgba(43,76,109,.3),transparent 28%),linear-gradient(115deg,#040609 0%,#08101a 48%,#10243a 100%)}.hero::before{background-image:radial-gradient(circle,rgba(245,244,240,.72) 0 1px,transparent 1.2px),radial-gradient(circle,rgba(201,185,155,.5) 0 1px,transparent 1.2px),linear-gradient(115deg,transparent 0 53%,rgba(245,244,240,.08) 53.1%,transparent 53.2%);background-size:137px 137px,211px 211px,100% 100%;background-position:12px 28px,72px 10px,0 0;opacity:.24}.hero-grain{opacity:.08}.hero-orbit{filter:drop-shadow(0 0 32px rgba(99,145,187,.16))}.orbit-ring{border-color:rgba(182,205,224,.23)}.ring-one{border-right-color:var(--warm);border-bottom-color:rgba(201,185,155,.3)}.ring-two{border-top-color:rgba(201,185,155,.85)}.hero-orbit::before{background:linear-gradient(145deg,#121e2c,#05080d)!important;border-color:rgba(201,185,155,.58)!important;box-shadow:0 0 0 5px rgba(5,7,11,.5),0 0 70px 12px rgba(39,78,112,.28),inset 0 0 28px rgba(245,244,240,.08)!important}.orbit-core{letter-spacing:.22em}.intro-band{background:#f4f3ee}.intro-band::before,.work-section::before,.demo-section::before,.approach-section::before{content:'✦';position:absolute;right:clamp(24px,6vw,90px);top:clamp(30px,5vw,70px);font-family:var(--display);font-size:12px;color:var(--warm);opacity:.7}.intro-band,.work-section,.demo-section,.approach-section{position:relative}.work-section{background:linear-gradient(135deg,#eeede8,#e1e4e5)}.project-image{box-shadow:inset 0 0 80px rgba(7,15,24,.28)}.image-one{background:radial-gradient(circle at 62% 36%,rgba(139,170,198,.25),transparent 3%),linear-gradient(135deg,#080d14,#193a58 58%,#0b1521)}.image-two{background:radial-gradient(circle at 35% 38%,rgba(201,185,155,.17),transparent 2%),linear-gradient(145deg,#05070a,#101a26)}.approach-section{background:radial-gradient(ellipse at 88% 14%,rgba(35,68,97,.28),transparent 25%),#080f18}.contact-section{background:linear-gradient(120deg,#f7f6f1,#e2e7e9)}.studio-intro{background:radial-gradient(circle at 50% 50%,#101d2b 0%,#05070b 52%)}.studio-intro::before{content:'';position:absolute;width:min(70vw,620px);aspect-ratio:1;border:1px solid rgba(201,185,155,.16);border-radius:50%;box-shadow:0 0 0 28px rgba(201,185,155,.025),0 0 0 86px rgba(124,164,198,.025);transform:rotate(-22deg)}.intro-logo,.intro-line,.studio-intro small{position:relative;z-index:1}.intro-logo{letter-spacing:.22em}.demo-viewer{box-shadow:0 25px 70px rgba(8,10,13,.3),0 0 0 1px rgba(201,185,155,.15)}.browser-bar{background:#0b121b}.demo-section{background:linear-gradient(145deg,#e9e8e2,#dfe5e7)}
@media(max-width:760px){.hero::before{background-size:91px 91px,153px 153px,100% 100%}.studio-intro::before{width:90vw}.intro-band::before,.work-section::before,.demo-section::before,.approach-section::before{right:24px}}
/* ═══ mpx-studio-effects.css ═══ */
.site-header{transition:transform .45s cubic-bezier(.2,.7,.2,1),background .35s ease,box-shadow .35s ease}.site-header.is-hidden{transform:translateY(-115%)}.site-header::after{content:'';position:absolute;left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);bottom:10px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,185,155,.5),transparent);opacity:.5}.hero::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(3,5,8,.98) 0%,rgba(4,8,14,.82) 40%,rgba(5,11,19,.38) 74%,rgba(5,8,12,.68) 100%),url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=2400&q=88');background-size:cover;background-position:center;mix-blend-mode:screen;opacity:.3;pointer-events:none}.hero-copy,.hero-orbit,.hero-footer{z-index:1}.hero::before{z-index:0;background-image:radial-gradient(circle,rgba(255,255,255,.82) 0 1px,transparent 1.4px),radial-gradient(circle,rgba(201,185,155,.6) 0 1px,transparent 1.3px);background-size:149px 149px,237px 237px;background-position:18px 36px,82px 7px;opacity:.28;animation:starDrift 32s linear infinite}@keyframes starDrift{to{background-position:180px 130px,-120px -80px}}.demo-card{position:relative;overflow:hidden}.demo-card::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,var(--warm),transparent);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}.demo-card:hover::after,.demo-card.is-active::after{transform:scaleX(1)}.demo-card.is-active{background:rgba(8,10,13,.06)}.demo-card[hidden]{display:none!important}.demo-viewer{position:relative}.demo-viewer::before{content:'LIVE';position:absolute;z-index:2;right:15px;top:59px;padding:6px 8px;background:rgba(201,185,155,.95);color:#080a0d;font:700 8px var(--label);letter-spacing:.18em}.browser-bar{box-shadow:inset 0 -1px rgba(201,185,155,.16)}@media(max-width:760px){.site-header::after{left:24px;right:24px}.hero::after{background-position:58% center;opacity:.24}.demo-viewer::before{top:56px;right:10px}.site-header.is-hidden{transform:translateY(-120%)}}
/* ═══ mpx-studio-intro.css ═══ */
.intro-moon{position:relative;width:clamp(58px,8vw,82px);height:clamp(58px,8vw,82px);margin:8px 0 2px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(247,245,235,.92) 0 2%,transparent 3%),radial-gradient(circle at 64% 38%,rgba(201,185,155,.38) 0 8%,transparent 9%),radial-gradient(circle at 37% 67%,rgba(201,185,155,.26) 0 6%,transparent 7%),radial-gradient(circle at 68% 72%,rgba(245,244,240,.16) 0 4%,transparent 5%),linear-gradient(145deg,#f4f2ea,#aaa9a5 58%,#5c6267);box-shadow:inset -12px -8px 22px rgba(4,6,9,.5),inset 5px 4px 15px rgba(255,255,255,.35),0 0 34px rgba(201,185,155,.16);opacity:0;transform:scale(.72);animation:moonReveal .8s .25s cubic-bezier(.2,.8,.2,1) forwards}.intro-moon::before{content:'';position:absolute;inset:-15px;border:1px solid rgba(245,244,240,.16);border-radius:50%;transform:rotate(-90deg);border-right-color:transparent;border-bottom-color:transparent;animation:moonOrbit 2.2s .25s cubic-bezier(.2,.7,.2,1) forwards}.intro-moon::after{content:'';position:absolute;inset:-15px;border-radius:50%;background:conic-gradient(from -90deg,transparent 0deg,transparent 18deg,rgba(201,185,155,.95) 19deg,rgba(245,244,240,.85) 110deg,transparent 112deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - .5px));mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - .5px));transform:rotate(-90deg);animation:moonCharge 2.25s .25s cubic-bezier(.2,.7,.2,1) forwards}@keyframes moonReveal{to{opacity:1;transform:scale(1)}}@keyframes moonOrbit{0%{transform:rotate(-90deg)}100%{transform:rotate(270deg)}}@keyframes moonCharge{0%{opacity:0;transform:rotate(-90deg)}12%{opacity:1}92%{opacity:1}100%{opacity:0;transform:rotate(270deg)}}.intro-line{margin-top:8px}.studio-intro small{animation:introText .7s .95s ease forwards}@media(prefers-reduced-motion:reduce){.intro-moon,.intro-moon::before,.intro-moon::after{animation:none;opacity:1;transform:none}}
/* ═══ mpx-studio-polish.css ═══ */
.studio-intro{animation-duration:3.8s}.intro-moon{animation-duration:1.05s,1.05s}.intro-moon::before{animation-duration:3.15s}.intro-moon::after{animation-duration:3.2s}.intro-line{animation-delay:.95s}.studio-intro small{animation-delay:1.15s}.hero::before{background-image:radial-gradient(circle at 7% 14%,rgba(255,255,255,.9) 0 1px,transparent 1.8px),radial-gradient(circle at 16% 63%,rgba(201,185,155,.85) 0 1px,transparent 1.7px),radial-gradient(circle at 24% 28%,rgba(255,255,255,.76) 0 1.4px,transparent 2px),radial-gradient(circle at 31% 79%,rgba(188,211,230,.76) 0 1px,transparent 1.8px),radial-gradient(circle at 42% 16%,rgba(255,255,255,.8) 0 1px,transparent 1.8px),radial-gradient(circle at 49% 54%,rgba(201,185,155,.8) 0 1.2px,transparent 2px),radial-gradient(circle at 58% 26%,rgba(255,255,255,.88) 0 1px,transparent 1.7px),radial-gradient(circle at 67% 72%,rgba(188,211,230,.72) 0 1.2px,transparent 2px),radial-gradient(circle at 73% 18%,rgba(255,255,255,.86) 0 1px,transparent 1.8px),radial-gradient(circle at 81% 47%,rgba(201,185,155,.82) 0 1px,transparent 1.7px),radial-gradient(circle at 89% 23%,rgba(255,255,255,.78) 0 1.3px,transparent 2px),radial-gradient(circle at 94% 83%,rgba(188,211,230,.68) 0 1px,transparent 1.8px),radial-gradient(circle at 36% 43%,rgba(255,255,255,.54) 0 1px,transparent 1.6px),radial-gradient(circle at 62% 88%,rgba(255,255,255,.5) 0 1px,transparent 1.6px);background-size:auto;background-repeat:no-repeat;background-position:0 0;opacity:.46;animation:cosmicShift 40s ease-in-out infinite alternate}@keyframes cosmicShift{from{transform:scale(1) translate3d(0,0,0);opacity:.32}to{transform:scale(1.06) translate3d(-1.5%,1% ,0);opacity:.58}}.experience-section{position:relative;padding:clamp(90px,12vw,160px) clamp(24px,11vw,175px);background:#0b131d;color:var(--white);overflow:hidden}.experience-section::before{content:'✦';position:absolute;right:clamp(24px,6vw,90px);top:clamp(30px,5vw,70px);font-family:var(--display);font-size:12px;color:var(--warm);opacity:.7}.experience-section .section-label{color:#aab6c1}.experience-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,10vw,150px);align-items:center;margin-top:76px}.experience-copy h2{font-family:var(--display);font-size:clamp(48px,5.8vw,84px);font-weight:500;line-height:1.02}.experience-copy h2 i{color:var(--warm)}.experience-copy>p{max-width:390px;color:#aeb9c3;font-size:15px;line-height:1.85;margin:32px 0 34px}.experience-copy ul{list-style:none;padding:0;margin:0;border-top:1px solid rgba(245,244,240,.18);max-width:420px}.experience-copy li{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid rgba(245,244,240,.12);font-family:var(--label);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#d8dde0}.experience-copy li span{color:var(--warm);font-size:9px}.chat-demo-card{max-width:470px;justify-self:end;width:100%;background:linear-gradient(145deg,#121f2d,#080d14);border:1px solid rgba(201,185,155,.35);box-shadow:0 25px 70px rgba(0,0,0,.35),inset 0 0 40px rgba(123,161,192,.06)}.chat-demo-top{display:flex;justify-content:space-between;padding:19px 22px;border-bottom:1px solid rgba(245,244,240,.12);font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.chat-demo-top i{font-style:normal;color:#9fc7ac;font-size:8px}.chat-demo-messages{display:flex;flex-direction:column;gap:13px;padding:27px 22px 21px}.chat-demo-message{max-width:80%;padding:12px 14px;font-size:13px;line-height:1.5}.chat-demo-message.bot{align-self:flex-start;background:rgba(245,244,240,.09);color:#dfe4e7}.chat-demo-message.user{align-self:flex-end;background:var(--warm);color:#0b0d10}.chat-demo-input{display:flex;justify-content:space-between;margin:0 22px;padding:13px 0;border-top:1px solid rgba(245,244,240,.15);font-size:12px;color:#71808d}.chat-demo-input b{color:var(--warm);font-size:17px}.chat-demo-note{padding:17px 22px 20px;font-family:var(--label);font-size:9px;letter-spacing:.08em;color:rgba(201,185,155,.72)}.whatsapp-float{position:fixed;z-index:20;left:22px;bottom:22px;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid rgba(159,199,172,.52);background:rgba(5,12,10,.88);backdrop-filter:blur(14px);color:#c5e1cc;font:10px var(--label);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 12px 35px rgba(0,0,0,.3);transition:transform .25s,background .25s}.whatsapp-float:hover{transform:translateY(-3px);background:#153327}.whatsapp-float svg{width:17px;height:17px;fill:currentColor}.chat-widget{position:fixed;z-index:21;right:22px;bottom:22px}.chat-widget-toggle{position:relative;display:flex;align-items:center;gap:9px;padding:13px 16px;border:1px solid rgba(201,185,155,.55);background:rgba(7,12,18,.9);backdrop-filter:blur(14px);color:var(--white);font:10px var(--label);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 12px 35px rgba(0,0,0,.35)}.chat-widget-toggle svg{width:17px;height:17px;fill:none;stroke:var(--warm);stroke-width:1.4}.chat-pulse{width:6px;height:6px;border-radius:50%;background:#9fc7ac;box-shadow:0 0 0 0 rgba(159,199,172,.6);animation:chatPulse 2s infinite}@keyframes chatPulse{70%{box-shadow:0 0 0 7px transparent}}.chat-window{position:absolute;right:0;bottom:57px;width:min(335px,calc(100vw - 44px));background:#f4f3ee;color:#0b0e12;border:1px solid rgba(201,185,155,.65);box-shadow:0 25px 70px rgba(0,0,0,.42);opacity:0;visibility:hidden;transform:translateY(12px) scale(.97);transform-origin:bottom right;transition:opacity .28s,transform .28s,visibility .28s}.chat-window.is-open{opacity:1;visibility:visible;transform:none}.chat-window-head{display:flex;align-items:start;justify-content:space-between;padding:18px 18px;background:#0d1725;color:#fff}.chat-window-head strong,.chat-window-head small{display:block}.chat-window-head strong{font:500 22px var(--display)}.chat-window-head small{margin-top:4px;color:#aeb9c3;font:9px var(--label);letter-spacing:.08em}.chat-close{border:0;background:none;color:#c9b99b;font-size:24px;line-height:1;cursor:pointer}.chat-window-body{display:flex;flex-direction:column;gap:9px;padding:18px}.chat-bubble{max-width:88%;padding:12px 13px;background:#e3e4e1;font-size:12px;line-height:1.5}.chat-quick{align-self:flex-start;padding:9px 11px;border:1px solid rgba(8,10,13,.22);background:transparent;color:#253241;font:9px var(--label);letter-spacing:.06em;cursor:pointer}.chat-window-input{display:flex;justify-content:space-between;margin:0 18px;padding:13px 0;border-top:1px solid rgba(8,10,13,.16);color:#7a8389;font-size:11px}.chat-window-input b{color:#142a43;font-size:17px}footer{position:relative;padding:0 clamp(24px,5vw,72px);background:#05070b;color:var(--muted);border-top:1px solid rgba(201,185,155,.2)}.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;max-width:1160px;margin:0 auto;padding:65px 0 55px}.footer-main .wordmark{color:var(--white);width:max-content}.footer-main p{margin-top:20px;font-size:12px;line-height:1.8;color:#8996a1}.footer-main h4{margin:0 0 18px;font:10px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--warm)}.footer-main>div:not(:first-child){display:flex;flex-direction:column;align-items:flex-start;gap:9px;font-size:12px}.footer-main>div:not(:first-child) a:hover{color:var(--white)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;max-width:1160px;margin:0 auto;padding:19px 0 23px;border-top:1px solid rgba(245,244,240,.12);font:9px var(--label);letter-spacing:.08em;text-transform:uppercase;color:#63707a}.footer-bottom a:hover{color:var(--warm)}@media(max-width:800px){.experience-layout{grid-template-columns:1fr;gap:54px}.chat-demo-card{justify-self:start}.footer-main{grid-template-columns:1fr 1fr}.footer-main>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:8px}.whatsapp-float,.chat-widget{bottom:14px}.whatsapp-float{left:14px;padding:11px}.whatsapp-float span{display:none}.chat-widget{right:14px}.chat-widget-label{display:none}.chat-widget-toggle{padding:13px}.chat-window{right:-1px}}@media(prefers-reduced-motion:reduce){.hero::before,.chat-pulse{animation:none}}
/* ═══ mpx-studio-moon-photo.css ═══ */
.studio-intro::before{display:none}.intro-moon{width:clamp(116px,15vw,178px);height:clamp(116px,15vw,178px);margin:10px 0 8px;background-image:linear-gradient(145deg,rgba(4,6,10,.02),rgba(4,6,10,.42)),url('https://images.unsplash.com/photo-1532693322450-2cb5c511067d?auto=format&fit=crop&w=900&q=90');background-size:cover;background-position:center;border:0;box-shadow:0 0 24px rgba(245,244,240,.22),0 0 80px rgba(91,138,178,.2),inset -20px -12px 30px rgba(0,0,0,.34);animation:moonPhotoReveal 1.2s .2s cubic-bezier(.2,.8,.2,1) forwards;overflow:visible}.intro-moon::before{inset:-17px;border:1px solid rgba(245,244,240,.2);border-right-color:transparent;border-bottom-color:transparent;box-shadow:0 0 12px rgba(201,185,155,.18);animation:moonPhotoOrbit 3.2s .15s cubic-bezier(.2,.7,.2,1) forwards}.intro-moon::after{inset:-17px;background:conic-gradient(from -90deg,transparent 0deg,transparent 24deg,rgba(201,185,155,.95) 25deg,rgba(245,244,240,.94) 95deg,rgba(201,185,155,.55) 150deg,transparent 151deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - .4px));mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - .4px));animation:moonPhotoCharge 3.25s .15s cubic-bezier(.2,.7,.2,1) forwards}@keyframes moonPhotoReveal{0%{opacity:0;transform:scale(.8);filter:blur(8px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}@keyframes moonPhotoOrbit{0%{transform:rotate(-90deg);opacity:.15}100%{transform:rotate(270deg);opacity:.8}}@keyframes moonPhotoCharge{0%{opacity:0;transform:rotate(-90deg)}10%{opacity:1}88%{opacity:1}100%{opacity:0;transform:rotate(270deg)}}@media(prefers-reduced-motion:reduce){.intro-moon{animation:none;opacity:1;transform:none;filter:none}.intro-moon::before,.intro-moon::after{animation:none;opacity:1;transform:none}}
/* ═══ mpx-studio-moon-crop.css ═══ */
.intro-moon{background-image:linear-gradient(145deg,rgba(4,6,10,.02),rgba(4,6,10,.18)),url('https://images.unsplash.com/photo-1532693322450-2cb5c511067d?auto=format&fit=crop&w=900&q=90')!important;background-size:220%!important;background-position:center!important;box-shadow:0 0 24px rgba(245,244,240,.22),0 0 80px rgba(91,138,178,.2),inset -20px -12px 30px rgba(0,0,0,.22)!important}
/* ═══ mpx-studio-catalog.css ═══ */
.demo-filters{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 20px}.demo-filter{padding:9px 12px;border:1px solid rgba(8,10,13,.2);background:transparent;color:#737c82;font:9px var(--label);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,border-color .25s}.demo-filter:hover,.demo-filter.is-active{border-color:#142a43;background:#142a43;color:#f5f4f0}.demo-card-list{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;border-top:1px solid rgba(8,10,13,.2)}.demo-card{position:relative;display:grid;grid-template-columns:28px 1fr 22px;grid-template-rows:auto auto;align-items:center;column-gap:10px;width:100%;padding:15px 0;border:0;border-bottom:1px solid rgba(8,10,13,.18);background:transparent;color:#17202a;text-align:left;cursor:pointer;transition:padding-left .25s,background .25s}.demo-card-number{grid-row:1/3;font:9px var(--label);color:#a98f65}.demo-card strong{font:500 18px var(--display);line-height:1.1}.demo-card small{font:8px var(--label);letter-spacing:.05em;text-transform:uppercase;color:#737c82;margin-top:5px}.demo-card b{grid-column:3;grid-row:1/3;font-size:18px;font-weight:400;color:#78838b;transition:transform .25s,color .25s}.demo-card:hover,.demo-card.is-active{padding-left:8px;background:rgba(8,10,13,.035)}.demo-card:hover b,.demo-card.is-active b{color:#a98f65;transform:translate(2px,-2px)}.demo-card[hidden]{display:none!important}@media(max-width:900px){.demo-card-list{grid-template-columns:1fr}}@media(max-width:600px){.demo-filters{gap:6px}.demo-filter{font-size:8px;padding:8px 9px}.demo-card strong{font-size:17px}}
/* ═══ mpx-studio-demo-layout.css ═══ */
.demo-layout{display:block;margin-top:72px}.demo-copy>p{max-width:560px}.demo-card-list{grid-template-columns:repeat(3,1fr);gap:0 28px}.demo-viewer{max-width:980px;margin:60px auto 0}.demo-filters{margin-top:30px}@media(max-width:900px){.demo-card-list{grid-template-columns:1fr 1fr}.demo-viewer{margin-top:48px}}@media(max-width:600px){.demo-layout{margin-top:52px}.demo-card-list{grid-template-columns:1fr}.demo-viewer{margin-top:40px}}
/* ═══ mpx-studio-brand.css ═══ */
.site-header .wordmark{font-size:13px;letter-spacing:.2em;gap:11px;color:rgba(245,244,240,.94)}.site-header .wordmark span{font-weight:600}.site-header .wordmark i{height:18px;background:linear-gradient(var(--warm),rgba(201,185,155,.35));box-shadow:0 0 10px rgba(201,185,155,.18)}.site-header .wordmark em{font-size:18px;color:var(--warm);text-shadow:0 0 16px rgba(201,185,155,.12)}.footer-main .wordmark{font-size:16px;letter-spacing:.22em;gap:13px}.footer-main .wordmark span{font-weight:600}.footer-main .wordmark i{height:22px;background:linear-gradient(var(--warm),rgba(201,185,155,.3))}.footer-main .wordmark em{font-size:22px;color:var(--warm)}.footer-main .wordmark::after{content:'DIGITAL EXPERIENCES';display:block;margin-left:13px;padding-left:13px;border-left:1px solid rgba(201,185,155,.38);font:8px var(--label);letter-spacing:.18em;color:#7f8a93;white-space:nowrap}@media(max-width:600px){.footer-main .wordmark::after{display:none}.site-header .wordmark{font-size:12px}.site-header .wordmark em{font-size:17px}}
/* ═══ mpx-studio-demo-luxury.css ═══ */
.demo-copy h2{max-width:520px;font-size:clamp(52px,6.5vw,94px);letter-spacing:-.035em}.demo-copy>p{max-width:510px;margin-top:28px;color:#65717a;font-size:15px;line-height:1.9}.demo-filters{display:flex;align-items:center;gap:0;margin:42px 0 0;border-top:1px solid rgba(8,10,13,.2);border-bottom:1px solid rgba(8,10,13,.2);overflow-x:auto;scrollbar-width:none}.demo-filters::-webkit-scrollbar{display:none}.demo-filter{position:relative;flex:0 0 auto;padding:15px 18px 14px 0;margin-right:22px;border:0;background:none;color:#879097;font:9px var(--label);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:color .25s}.demo-filter::after{content:'';position:absolute;left:0;right:18px;bottom:-1px;height:2px;background:var(--warm);transform:scaleX(0);transform-origin:left;transition:transform .3s}.demo-filter:hover,.demo-filter.is-active{color:#101820}.demo-filter.is-active::after{transform:scaleX(1)}.demo-card-list{grid-template-columns:repeat(3,1fr);gap:0;border-top:0}.demo-card{grid-template-columns:30px 1fr 22px;min-height:126px;padding:22px 20px 20px 0;border-bottom:1px solid rgba(8,10,13,.2);background:transparent;transition:padding-left .3s,background .3s}.demo-card:first-child{border-left:0}.demo-card-number{align-self:start;padding-top:3px;font-size:9px;letter-spacing:.12em}.demo-card strong{font-size:clamp(21px,2vw,29px);letter-spacing:-.01em}.demo-card small{font-size:8px;letter-spacing:.12em;line-height:1.5;color:#77828a}.demo-card b{font-size:20px;color:#9c8663}.demo-card:hover,.demo-card.is-active{padding-left:10px;background:rgba(255,255,255,.22)}.demo-card::after{height:2px}.demo-viewer{margin-top:72px}.demo-viewer::before{letter-spacing:.22em}@media(max-width:900px){.demo-card-list{grid-template-columns:1fr 1fr}.demo-card{min-height:112px}}@media(max-width:600px){.demo-copy h2{font-size:clamp(48px,14vw,74px)}.demo-filters{margin-top:34px}.demo-filter{padding-right:15px;margin-right:18px}.demo-card-list{grid-template-columns:1fr}.demo-card{min-height:96px;padding-right:10px}.demo-viewer{margin-top:48px}}
/* ═══ mpx-studio-minimal.css ═══ */
.intro-band,.work-section,.demo-section,.approach-section{padding-top:clamp(70px,8vw,108px);padding-bottom:clamp(70px,8vw,108px)}.intro-content{margin-top:48px}.demo-layout{margin-top:52px}.demo-viewer{margin-top:48px}.approach-section h2{margin:48px 0 55px}.experience-layout{margin-top:54px}.contact-section{padding-top:clamp(70px,8vw,108px)}.contact-section h2{margin:60px 0 36px}.contact-bottom{margin-top:120px}.footer-main{padding-top:48px;padding-bottom:40px}.whatsapp-float,.chat-widget-toggle{width:50px;height:50px;padding:0;border-radius:50%;justify-content:center;gap:0;box-shadow:0 12px 36px rgba(0,0,0,.4),0 0 0 1px rgba(201,185,155,.1)}.whatsapp-float span,.chat-widget-label{display:none}.whatsapp-float svg{width:19px;height:19px}.chat-widget-toggle svg{width:19px;height:19px}.chat-pulse{position:absolute;top:7px;right:7px;width:5px;height:5px}.whatsapp-float::after,.chat-widget-toggle::after{position:absolute;right:0;bottom:calc(100% + 9px);padding:7px 9px;background:#0b131d;color:#e8e6df;border:1px solid rgba(201,185,155,.35);font:8px var(--label);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .2s,transform .2s}.whatsapp-float::after{content:'WhatsApp'}.chat-widget-toggle::after{content:'Open chat'}.whatsapp-float:hover::after,.chat-widget-toggle:hover::after,.chat-widget-toggle:focus-visible::after{opacity:1;transform:none}.chat-window{bottom:64px}@media(max-width:600px){.intro-band,.work-section,.demo-section,.approach-section,.experience-section,.contact-section{padding-top:64px;padding-bottom:64px}.intro-content{margin-top:36px}.demo-layout{margin-top:38px}.demo-viewer{margin-top:38px}.approach-section h2{margin:38px 0 42px}.experience-layout{margin-top:38px}.contact-section h2{margin:44px 0 30px}.contact-bottom{margin-top:86px}.footer-main{padding-top:38px;padding-bottom:32px}}
/* ═══ mpx-studio-combined.css ═══ */
.combined-intro{max-width:760px;margin:0 auto 70px}.combined-intro h2{margin-top:34px;font:500 clamp(52px,6vw,88px)/1.02 var(--display);letter-spacing:-.035em}.combined-intro h2 i{color:var(--warm)}.combined-intro p{max-width:480px;margin:24px 0 25px;color:#65717a;font-size:15px;line-height:1.85}.demo-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px}.demo-heading span{font:500 clamp(25px,3vw,38px) var(--display);color:#0b121b}.demo-heading p{margin:0;color:#65717a;font-size:13px}.demo-copy>p{display:none}@media(max-width:600px){.combined-intro{margin-bottom:46px}.combined-intro h2{margin-top:26px}.demo-heading{display:block}.demo-heading p{margin-top:8px}}
/* ═══ mpx-studio-shooting-star.css ═══ */
.shooting-star{position:absolute;z-index:1;top:16%;right:8%;width:clamp(80px,11vw,150px);height:1px;opacity:0;transform:rotate(28deg);background:linear-gradient(90deg,transparent 0%,rgba(245,244,240,.08) 35%,rgba(201,185,155,.92) 82%,#fff 100%);box-shadow:0 0 7px rgba(201,185,155,.8),0 0 18px rgba(143,187,220,.42);animation:shootingStar 9s 2.8s cubic-bezier(.2,.7,.2,1) infinite}.shooting-star::after{content:'';position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 5px 2px rgba(255,255,255,.95),0 0 15px 5px rgba(201,185,155,.62)}.hero-copy{z-index:3}@keyframes shootingStar{0%,72%{opacity:0;transform:translate3d(0,0,0) rotate(28deg)}75%{opacity:1}86%{opacity:0;transform:translate3d(-8vw,8vh,0) rotate(28deg)}100%{opacity:0;transform:translate3d(-8vw,8vh,0) rotate(28deg)}}@media(max-width:760px){.shooting-star{top:16%;right:7%;width:90px;animation-duration:8s}}@media(prefers-reduced-motion:reduce){.shooting-star{animation:none;display:none}}
/* ═══ mpx-studio-compact-intro.css ═══ */
.demo-section{padding-top:clamp(52px,6vw,82px);padding-bottom:clamp(58px,7vw,92px)}.combined-intro{margin:0 auto 42px}.combined-intro h2{margin-top:22px}.combined-intro p{margin:17px 0 18px;line-height:1.65}.demo-layout{margin-top:36px}.demo-filters{margin-top:24px}.demo-viewer{margin-top:44px}@media(max-width:600px){.demo-section{padding-top:48px;padding-bottom:60px}.combined-intro{margin-bottom:34px}.combined-intro h2{margin-top:18px}.demo-layout{margin-top:30px}.demo-viewer{margin-top:36px}}
/* ═══ mpx-studio-menu.css ═══ */
.menu-brand{display:none}@media(max-width:760px){.menu-toggle{position:relative;z-index:31;width:44px;height:44px;align-items:center;justify-content:center}.menu-toggle span{position:absolute;transition:transform .32s ease,opacity .2s ease}.menu-toggle[aria-expanded="true"] span:first-child{transform:rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}.site-nav{z-index:25;padding:0 24px}.site-nav .menu-brand{position:absolute;top:22px;left:24px;display:flex;align-items:center;gap:10px;font:600 12px var(--label);letter-spacing:.2em;text-transform:uppercase;color:rgba(245,244,240,.95)}.site-nav .menu-brand i{display:block;width:1px;height:17px;background:var(--warm);transform:rotate(20deg)}.site-nav .menu-brand em{font:italic 18px var(--display);letter-spacing:0;text-transform:none;color:var(--warm)}.site-nav.is-open a:not(.menu-brand){animation:menuRise .42s both}.site-nav.is-open a:nth-of-type(2){animation-delay:.05s}.site-nav.is-open a:nth-of-type(3){animation-delay:.1s}.site-nav.is-open a:nth-of-type(4){animation-delay:.15s}@keyframes menuRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}
/* ═══ mpx-studio-filter-contrast.css ═══ */
.demo-filter.is-active,.demo-filter:hover{color:#fff!important}.demo-filter.is-active::after{background:#c9b99b}
/* ═══ mpx-studio-section-flow.css ═══ */
.approach-section{background:radial-gradient(ellipse at 12% 80%,rgba(20,42,67,.42),transparent 34%),#080f18}.experience-section{background:linear-gradient(180deg,#101d2c 0%,#14283c 58%,#1b3348 100%);border-top:1px solid rgba(201,185,155,.16)}.experience-section::after{content:'';position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(180deg,transparent,rgba(225,231,233,.16));pointer-events:none}.contact-section{background:linear-gradient(180deg,#e1e7e9 0%,#f4f3ee 32%,#f7f6f1 100%);border-top:1px solid rgba(201,185,155,.4)}.contact-section::before{content:'';position:absolute;left:0;right:0;top:-1px;height:34px;background:linear-gradient(180deg,rgba(201,185,155,.18),transparent);pointer-events:none}.footer-main{background:transparent}footer{background:linear-gradient(180deg,#05070b 0%,#0b131d 100%);border-top:1px solid rgba(201,185,155,.3)}
/* ═══ mpx-studio-scroll-luxury.css ═══ */
.scroll-progress{position:fixed;z-index:60;top:84px;left:0;right:0;height:2px;background:rgba(245,244,240,.12);pointer-events:none}.scroll-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,rgba(201,185,155,.4),#c9b99b 55%,#fff);box-shadow:0 0 9px rgba(201,185,155,.7);transition:width .12s linear}.scroll-status{position:absolute;right:clamp(78px,10vw,145px);bottom:13px;color:rgba(201,185,155,.76);font:8px var(--label);letter-spacing:.16em;transition:opacity .3s}.site-header.is-hidden .scroll-status{opacity:0}html{scrollbar-width:thin;scrollbar-color:#a98f65 #07090d}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background:linear-gradient(180deg,#05070b,#101d2c,#05070b)}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(201,185,155,.45),#c9b99b 48%,rgba(201,185,155,.4));border:2px solid #07090d;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#fff,#c9b99b,#fff)}.reveal{transition-delay:.05s}.project:nth-child(2),.project:nth-child(3){transition-delay:.12s}.approach-list article:nth-child(2){transition-delay:.1s}.approach-list article:nth-child(3){transition-delay:.18s}@media(max-width:760px){.scroll-status{right:76px;bottom:12px;font-size:7px}.scroll-progress{top:68px;height:2px}}
/* ═══ mpx-studio-header-cinematic.css ═══ */
.site-header{background:linear-gradient(180deg,rgba(4,7,11,.97) 0%,rgba(7,12,18,.9) 76%,rgba(7,12,18,.72) 100%);border-bottom:1px solid rgba(201,185,155,.18);box-shadow:0 10px 34px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(18px) saturate(.9);backdrop-filter:blur(18px) saturate(.9)}.site-header .wordmark,.site-header .site-nav a{color:rgba(245,244,240,.94)}.site-header .site-nav .nav-contact{border-color:rgba(201,185,155,.45);background:rgba(5,9,14,.3)}.site-header .site-nav .nav-contact:hover{background:rgba(201,185,155,.16)}@media(max-width:760px){.site-header{background:rgba(4,7,11,.98);box-shadow:0 10px 34px rgba(0,0,0,.3)}.site-header .site-nav{background:linear-gradient(145deg,#05080d 0%,#0d1725 100%)}}
/* ═══ mpx-studio-header-line.css ═══ */
.site-header{border-bottom:0!important}.site-header::after{bottom:0!important;opacity:.7}
/* ═══ mpx-studio-menu-two.css ═══ */
@media(max-width:760px){.menu-toggle span{position:absolute;left:10px;right:10px}.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:25px}.menu-toggle[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}}
/* ═══ mpx-studio-neutral-luxe.css ═══ */
.demo-section{background:linear-gradient(180deg,#f8f9f8 0%,#e9edef 100%)!important;color:#080a0d}.demo-section::before,.demo-section::after{background-color:transparent}.demo-card:hover,.demo-card.is-active{background:rgba(255,255,255,.78)}.contact-section{background:linear-gradient(180deg,#ffffff 0%,#f1f3f3 100%)!important;color:#080a0d;border-top:1px solid rgba(8,10,13,.14)}.contact-section::before{background:linear-gradient(180deg,rgba(120,132,141,.12),transparent)}.contact-section h2,.contact-section .contact-link{color:#080a0d}.contact-section .section-label,.contact-section .contact-top p{color:#626c74}.contact-bottom{border-top-color:rgba(8,10,13,.18);color:#69747c}.text-link.dark{color:#17222d;border-bottom-color:rgba(8,10,13,.24)}.demo-heading span,.combined-intro h2{color:#080a0d}.demo-copy>p,.combined-intro p,.demo-heading p{color:#626d75}.demo-filter{color:#66727b;border-color:transparent}.demo-filter.is-active,.demo-filter:hover{background:#0b121b;color:#fff!important}.demo-card{color:#111a23}.demo-card small{color:#6d7880}
/* ═══ mpx-studio-contact-tight.css ═══ */
.contact-section{padding-bottom:34px}.contact-bottom{margin-top:72px;padding-bottom:4px}@media(max-width:600px){.contact-section{padding-bottom:26px}.contact-bottom{margin-top:62px}}
/* ═══ mpx-studio-services-form.css ═══ */
.services-section{padding:clamp(70px,9vw,125px) clamp(24px,11vw,175px);background:#f1f3f3;color:#080a0d;border-top:1px solid rgba(8,10,13,.12)}.services-section .section-label{color:#65717a}.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:58px;border-top:1px solid rgba(8,10,13,.2)}.services-grid article{padding:22px 22px 0 0;margin-right:22px;border-right:1px solid rgba(8,10,13,.18)}.services-grid article:last-child{border-right:0;margin-right:0}.services-grid span{font:9px var(--label);letter-spacing:.14em;color:#a98f65}.services-grid h3{margin:42px 0 12px;font:500 27px var(--display)}.services-grid p{max-width:210px;color:#69747b;font-size:12px;line-height:1.7}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;max-width:720px;margin:0 0 34px}.contact-form label{display:flex;flex-direction:column;gap:7px;font:9px var(--label);letter-spacing:.14em;text-transform:uppercase;color:#626c74}.contact-form label:nth-child(3),.contact-form label:nth-child(4),.form-submit{grid-column:1/-1}.contact-form input,.contact-form textarea{width:100%;border:0;border-bottom:1px solid rgba(8,10,13,.28);padding:9px 0;background:transparent;color:#080a0d;font:15px var(--sans);outline:0;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-bottom-color:#142a43;box-shadow:0 1px #142a43}.form-submit{justify-self:start;margin-top:8px;border:1px solid #0b121b;background:#0b121b;color:#fff;padding:13px 17px;font:10px var(--label);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.form-submit span{margin-left:14px;color:#c9b99b}.contact-section .contact-link{margin-top:8px}.demo-disclaimer{margin:12px 0 0;color:#727c83;font:9px var(--label);letter-spacing:.04em}@media(max-width:900px){.services-grid{grid-template-columns:1fr 1fr;gap:0 24px}.services-grid article:nth-child(2){border-right:0;margin-right:0}.services-grid article:nth-child(3),.services-grid article:nth-child(4){border-top:1px solid rgba(8,10,13,.18);padding-top:22px;margin-top:22px}}@media(max-width:600px){.services-section{padding:64px 24px}.services-grid{grid-template-columns:1fr}.services-grid article{border-right:0;border-bottom:1px solid rgba(8,10,13,.18);padding:18px 0 24px;margin:0}.services-grid article:last-child{border-bottom:0}.services-grid article:nth-child(3),.services-grid article:nth-child(4){border-top:0;margin-top:0;padding-top:18px}.services-grid h3{margin:24px 0 8px}.contact-form{grid-template-columns:1fr;gap:17px}.contact-form label:nth-child(3),.contact-form label:nth-child(4),.form-submit{grid-column:auto}.form-submit{width:100%}}
/* ═══ mpx-studio-intro-cinematic.css ═══ */
.studio-intro{background:radial-gradient(ellipse at 50% 47%,rgba(29,55,79,.32),transparent 28%),#040609!important;overflow:hidden}.studio-intro::after{content:'';position:absolute;inset:0;opacity:.42;pointer-events:none;background-image:radial-gradient(circle at 11% 23%,rgba(255,255,255,.8) 0 1px,transparent 1.4px),radial-gradient(circle at 23% 71%,rgba(201,185,155,.68) 0 1px,transparent 1.4px),radial-gradient(circle at 36% 17%,rgba(188,211,230,.7) 0 1px,transparent 1.5px),radial-gradient(circle at 51% 78%,rgba(255,255,255,.72) 0 1px,transparent 1.4px),radial-gradient(circle at 68% 21%,rgba(255,255,255,.76) 0 1px,transparent 1.4px),radial-gradient(circle at 82% 64%,rgba(201,185,155,.7) 0 1px,transparent 1.5px),radial-gradient(circle at 91% 31%,rgba(188,211,230,.65) 0 1px,transparent 1.4px);animation:introStars 18s ease-in-out infinite alternate}@keyframes introStars{from{transform:scale(1);opacity:.26}to{transform:scale(1.08) translate3d(-1%,1%,0);opacity:.52}}.intro-moon{background-image:linear-gradient(145deg,rgba(4,6,10,.02),rgba(4,6,10,.16)),url('https://images.unsplash.com/photo-1532693322450-2cb5c511067d?auto=format&fit=crop&w=900&q=90')!important;box-shadow:0 0 22px rgba(245,244,240,.2),0 0 56px rgba(91,138,178,.2),0 0 110px rgba(91,138,178,.1),inset -20px -12px 30px rgba(0,0,0,.18)!important;animation:cinematicMoon 1.55s .18s cubic-bezier(.16,.84,.3,1) forwards!important}.intro-moon::before{border-color:rgba(245,244,240,.22);border-right-color:transparent;border-bottom-color:transparent;box-shadow:0 0 15px rgba(201,185,155,.24);animation:cinematicOrbit 3.4s .18s cubic-bezier(.2,.7,.2,1) forwards!important}.intro-moon::after{background:conic-gradient(from -90deg,transparent 0deg,transparent 20deg,rgba(201,185,155,.95) 24deg,rgba(255,255,255,.98) 82deg,rgba(201,185,155,.48) 137deg,transparent 142deg);box-shadow:0 0 12px rgba(201,185,155,.8);animation:cinematicCharge 3.4s .18s cubic-bezier(.2,.7,.2,1) forwards!important}@keyframes cinematicMoon{0%{opacity:0;transform:scale(.72);filter:blur(14px) brightness(.55)}55%{opacity:1;filter:blur(1px) brightness(.9)}100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1)}}@keyframes cinematicOrbit{0%{transform:rotate(-90deg);opacity:0}18%{opacity:.8}100%{transform:rotate(270deg);opacity:.85}}@keyframes cinematicCharge{0%{opacity:0;transform:rotate(-90deg)}14%{opacity:1}80%{opacity:1}100%{opacity:0;transform:rotate(270deg)}}.intro-line{position:relative;z-index:1;opacity:.6}.studio-intro small{position:relative;z-index:1}@media(prefers-reduced-motion:reduce){.studio-intro::after{animation:none}.intro-moon,.intro-moon::before,.intro-moon::after{animation:none!important;opacity:1;transform:none;filter:none}}
/* ═══ mpx-studio-portfolio-mobile.css ═══ */
.demo-heading{display:block;padding-bottom:18px;border-bottom:1px solid rgba(8,10,13,.2)}.demo-heading span{display:block;font:500 clamp(30px,4vw,48px)/1.05 var(--display);letter-spacing:-.02em}.demo-heading p{margin-top:9px;font-size:12px;color:#69747c}.demo-card{grid-template-columns:30px 1fr;grid-template-rows:auto auto;min-height:0;padding:18px 8px 17px 0}.demo-card b{display:none}.demo-card strong{font-size:clamp(19px,2.1vw,25px)}.demo-card small{margin-top:4px}.demo-card::before{content:'';grid-column:3;grid-row:1/3;display:block;width:5px;height:5px;border-right:1px solid #a98f65;border-top:1px solid #a98f65;transform:rotate(45deg);opacity:.35;transition:opacity .25s,transform .25s}.demo-card:hover::before,.demo-card.is-active::before{opacity:1;transform:translateX(3px) rotate(45deg)}.demo-viewer .browser-bar a{font-size:8px;letter-spacing:.1em}.demo-scroll-note{letter-spacing:.16em}.demo-card-list{margin-top:0}@media(max-width:600px){.demo-heading{padding-bottom:15px}.demo-heading span{font-size:32px}.demo-heading p{font-size:11px}.demo-card{grid-template-columns:27px 1fr 12px;padding:16px 0}.demo-card strong{font-size:20px}.demo-card small{font-size:8px}.demo-card::before{grid-column:3}.demo-viewer .browser-bar a{display:none}}
/* ═══ mpx-studio-final-polish.css ═══ */
:root {
--mpx-gold: #d7c19a;
--mpx-gold-soft: rgba(215, 193, 154, 0.18);
--mpx-surface: rgba(18, 25, 33, 0.9);
--mpx-surface-strong: rgba(10, 14, 20, 0.96);
--mpx-text: #f5f4f0;
}
.site-header {
background: rgba(5, 9, 15, 0.58);
border-bottom: 1px solid rgba(215, 193, 154, 0.22);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.08);
}
.site-header .wordmark em { font-size: 19px; }
.site-header { padding-top: 22px; padding-bottom: 22px; }
.hero-copy { max-width: 760px; }
.hero-copy h1 {
font-size: clamp(4rem, 7vw, 8rem);
letter-spacing: -0.07em;
line-height: 0.9;
text-wrap: balance;
}
.hero-intro {
max-width: 620px;
color: rgba(245, 244, 240, 0.8);
font-size: clamp(1.02rem, 1.5vw, 1.18rem);
}
.hero-actions { margin-top: 2rem; }
.hero-actions .text-link {
position: relative;
padding-bottom: 6px;
border-bottom: 1px solid rgba(215, 193, 154, 0.3);
transition: transform 0.25s ease, opacity 0.25s ease;
}
.hero-actions .text-link:hover { transform: translateY(-2px); opacity: 1; }
.hero-actions .text-link.dark {
border: 1px solid rgba(215, 193, 154, 0.28);
padding: 14px 18px;
background: rgba(255, 255, 255, 0.015);
color: #fffdf7;
}
.hero-actions .text-link.dark:hover,
.hero-actions .text-link.dark:focus-visible { color: #fffdf7; border-color: var(--mpx-gold); background: rgba(215, 193, 154, 0.12); }
.combined-intro .text-link.dark,
.demo-section .text-link.dark { color: #101922; }
.combined-intro .text-link.dark:hover,
.combined-intro .text-link.dark:focus-visible,
.demo-section .text-link.dark:hover,
.demo-section .text-link.dark:focus-visible { color: #101922; }
.site-nav a { position: relative; }
.site-nav a:not(.nav-contact)::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -7px; height: 1px;
background: rgba(215, 193, 154, 0.8);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.2s ease;
}
.site-nav a:not(.nav-contact):hover::after,
.site-nav a:not(.nav-contact):focus-visible::after {
transform: scaleX(1);
}
.site-nav .nav-contact {
border-color: rgba(215, 193, 154, 0.44);
background: rgba(215, 193, 154, 0.08);
color: #fffdf7;
transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.site-nav .nav-contact:hover,
.site-nav .nav-contact:focus-visible {
border-color: var(--mpx-gold);
background: rgba(215, 193, 154, 0.18);
color: #fffdf7;
}
.demo-card {
transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.demo-card:hover,
.demo-card.is-active {
transform: translateY(-2px);
border-color: rgba(215, 193, 154, 0.48);
background: rgba(255, 255, 255, 0.03);
}
.chat-widget { right: clamp(18px, 2.5vw, 28px); bottom: clamp(18px, 2.5vw, 28px); }
.chat-widget-toggle {
background: linear-gradient(180deg, rgba(15, 22, 29, 0.98), rgba(10, 15, 20, 0.98));
border: 1px solid rgba(215, 193, 154, 0.32);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.chat-window {
width: min(420px, calc(100vw - 28px));
border: 1px solid rgba(215, 193, 154, 0.22);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
background: rgba(24, 33, 42, 0.98);
color: var(--mpx-text);
}
.chat-window-head {
background: rgba(29, 49, 55, 0.98);
border-bottom: 1px solid rgba(215, 193, 154, 0.18);
}
.chat-window-head strong { display: block; color: #fffdf7; font: 600 14px/1.2 var(--label); letter-spacing: 0.02em; }
.chat-window-head small { display: block; max-width: 245px; margin-top: 5px; color: rgba(245, 244, 240, 0.68); font: 400 10px/1.45 var(--sans); letter-spacing: 0.01em; }
.chat-bubble.bot {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(215, 193, 154, 0.14);
color: rgba(255, 253, 247, 0.92);
font-size: 13px;
line-height: 1.55;
}
.chat-bubble.user {
background: rgba(215, 193, 154, 0.18);
border: 1px solid rgba(215, 193, 154, 0.28);
color: #fffdf7;
font-size: 13px;
line-height: 1.5;
}
.hero-intro,.combined-intro p,.services-section p,.approach-section p,.experience-section p,.faq-section p{max-width:62ch;line-height:1.78}
@media(max-width:600px){.hero-copy h1{font-size:clamp(3.35rem,14vw,5.4rem);line-height:.94}.hero-intro{font-size:1rem;line-height:1.7}.combined-intro p,.services-section p,.approach-section p,.experience-section p,.faq-section p{line-height:1.72}}
.skip-studio-intro .studio-intro{display:none!important}
.demo-filter{color:#52606a}
.demo-filter.is-active,.demo-filter:hover,.demo-filter:focus-visible{color:#0b121b;border-color:rgba(8,10,13,.3);background:rgba(8,10,13,.05)}
.demo-filter.is-active{box-shadow:inset 0 -2px 0 #a98f65}
.hero-actions .text-link.dark{font-weight:600;box-shadow:0 12px 28px rgba(0,0,0,.16)}
.hero-actions .text-link:not(.dark){color:rgba(245,244,240,.86)}
.section-label,.demo-heading span,.growth-kicker,.audit-kicker{letter-spacing:.13em}
@media(max-width:600px){.hero-copy h1{font-size:clamp(3.15rem,13vw,5rem)}.hero-intro{max-width:31ch}.demo-filter{padding:10px 13px}.demo-filters{gap:6px}}
.chat-thinking {
display: flex;
align-items: center;
gap: 4px;
min-height: 34px;
}
.chat-thinking span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--mpx-gold);
animation: chat-dot 1.1s ease-in-out infinite;
}
.chat-thinking span:nth-child(2) { animation-delay: 0.14s; }
.chat-thinking span:nth-child(3) { animation-delay: 0.28s; }
.chat-thinking small {
margin-left: 6px;
color: rgba(245, 244, 240, 0.55);
font-size: 10px;
letter-spacing: 0.04em;
}
@keyframes chat-dot {
0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
30% { transform: translateY(-3px); opacity: 1; }
}
.chat-quick {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(215, 193, 154, 0.15);
color: rgba(245, 244, 240, 0.9);
font: 500 10px/1.35 var(--label);
letter-spacing: 0.03em;
}
.chat-quick:hover {
border-color: rgba(215, 193, 154, 0.38);
background: rgba(255, 255, 255, 0.08);
}
.chat-whatsapp-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 9px 11px;
border: 1px solid rgba(157, 207, 171, 0.35);
color: #c8ead0;
font: 9px var(--label);
letter-spacing: 0.08em;
text-transform: uppercase;
transition: background 0.2s ease, border-color 0.2s ease;
}
.chat-whatsapp-link:hover,
.chat-whatsapp-link:focus-visible {
background: rgba(157, 207, 171, 0.12);
border-color: rgba(157, 207, 171, 0.62);
}
.chat-contact-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 9px 11px;
border: 1px solid rgba(215, 193, 154, 0.38);
color: #fffdf7;
font: 9px var(--label);
letter-spacing: 0.08em;
text-transform: uppercase;
transition: background 0.2s ease, border-color 0.2s ease;
}
.chat-contact-link:hover,
.chat-contact-link:focus-visible {
background: rgba(215, 193, 154, 0.12);
border-color: var(--mpx-gold);
}
.chat-window-input {
background: rgba(18, 27, 35, 0.98);
border-top: 1px solid rgba(215, 193, 154, 0.16);
}
.chat-window-input input {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(215, 193, 154, 0.22);
color: var(--mpx-text);
font: 400 13px/1.3 var(--sans);
}
.chat-window-input input::placeholder { color: rgba(245, 244, 240, 0.52); }
.chat-window-input button {
background: linear-gradient(135deg, rgba(215, 193, 154, 0.24), rgba(255, 255, 255, 0.08));
border: 1px solid rgba(215, 193, 154, 0.22);
color: var(--mpx-text);
font-size: 17px;
}
.demo-frame-status {
position: absolute;
left: 18px;
bottom: 18px;
padding: 8px 11px;
background: rgba(8, 10, 13, 0.82);
border: 1px solid rgba(215, 193, 154, 0.24);
color: rgba(245, 244, 240, 0.78);
font: 8px var(--label);
letter-spacing: 0.12em;
text-transform: uppercase;
transition: color 0.25s ease, border-color 0.25s ease;
}
.demo-frame-status.is-ready {
color: #b8d9bf;
border-color: rgba(184, 217, 191, 0.34);
}
.whatsapp-float {
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
border: 1px solid rgba(215, 193, 154, 0.22);
}
.whatsapp-float:hover,
.chat-widget-toggle:hover { transform: translateY(-2px); }
.whatsapp-float::before,
.chat-widget-toggle::before {
content: "";
position: absolute;
inset: -4px;
z-index: 0;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0 72%, rgba(215, 193, 154, 0.08) 78%, var(--mpx-gold) 94%, transparent 100%);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 0.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 0.5px));
opacity: 0;
pointer-events: none;
}
.whatsapp-float:hover::before,
.whatsapp-float:focus-visible::before,
.chat-widget-toggle:hover::before,
.chat-widget-toggle:focus-visible::before {
opacity: 1;
animation: orbit-loading 1.35s linear infinite;
}
@keyframes orbit-loading {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.whatsapp-float:hover::before,
.whatsapp-float:focus-visible::before,
.chat-widget-toggle:hover::before,
.chat-widget-toggle:focus-visible::before { animation: none; }
}
.contact-form input,
.contact-form textarea {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(15, 21, 28, 0.15);
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: rgba(215, 193, 154, 0.42);
box-shadow: 0 0 0 4px rgba(215, 193, 154, 0.08);
}
.form-submit {
background: linear-gradient(135deg, #0d131d, #122330);
border: 1px solid rgba(215, 193, 154, 0.26);
box-shadow: 0 14px 30px rgba(12, 18, 26, 0.18);
}
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-status { min-height: 1.2em; margin: 10px 0 0; color: rgba(15, 25, 34, 0.68); font: 10px var(--label); letter-spacing: 0.04em; }
.founder-section {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr);
gap: clamp(36px, 8vw, 120px);
align-items: center;
padding: clamp(80px, 11vw, 150px) clamp(24px, 11vw, 175px);
background: #0d1725;
color: var(--mpx-text);
}
.founder-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.52;
background: radial-gradient(circle at 78% 46%, rgba(215, 193, 154, 0.12), transparent 0 22%, rgba(215, 193, 154, 0.025) 38%, transparent 58%), linear-gradient(90deg, transparent 0 68%, rgba(215, 193, 154, 0.12) 68.1%, transparent 68.2%), linear-gradient(0deg, transparent 0 22%, rgba(215, 193, 154, 0.08) 22.1%, transparent 22.2%);
}
.founder-section::after {
content: "PRECISION / CALM / DIRECTION";
position: absolute;
right: clamp(24px, 5vw, 72px);
bottom: 28px;
color: rgba(215, 193, 154, 0.34);
font: 8px var(--label);
letter-spacing: 0.2em;
}
.founder-photo-wrap,
.founder-copy { position: relative; z-index: 1; }
.founder-photo-wrap {
aspect-ratio: 4 / 5;
overflow: hidden;
border: 1px solid rgba(215, 193, 154, 0.28);
background: #101923;
}
.founder-photo-wrap img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
filter: saturate(0.82) contrast(1.04);
}
.founder-copy h2 {
margin: 30px 0 24px;
font: 500 clamp(3rem, 6vw, 6.2rem) / 0.94 var(--display);
letter-spacing: -0.04em;
}
.founder-copy h2 i { color: var(--mpx-gold); }
.founder-copy > p { max-width: 34ch; color: rgba(245, 244, 240, 0.72); font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.founder-details { display: grid; gap: 7px; margin: 28px 0 32px; color: rgba(245, 244, 240, 0.58); font: 9px var(--label); letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase; }
.founder-signature { display: flex; flex-direction: column; gap: 3px; margin: 34px 0; }
.founder-signature strong { font: 600 14px var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.founder-signature span { color: var(--mpx-gold); font: 10px var(--label); letter-spacing: 0.14em; text-transform: uppercase; }
.founder-cta { display: inline-flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid rgba(215, 193, 154, 0.48); background: var(--mpx-gold); color: #111820; font: 700 10px var(--label); letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.founder-cta:hover, .founder-cta:focus-visible { background: #f0dfb9; color: #080d13; transform: translateY(-2px); }
.fit-section {
padding: clamp(90px, 12vw, 160px) clamp(24px, 11vw, 175px);
background: #111a24;
color: var(--mpx-text);
}
.fit-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(230px, 0.55fr); gap: clamp(30px, 8vw, 120px); align-items: end; margin-top: 42px; }
.fit-heading h2 { margin: 0; font: 500 clamp(3rem, 6vw, 6.4rem) / 0.94 var(--display); letter-spacing: -0.04em; }
.fit-heading h2 i { color: var(--mpx-gold); }
.fit-heading p { max-width: 32ch; margin: 0 0 5px; color: rgba(245, 244, 240, 0.64); }
.fit-tool { max-width: 920px; margin-top: 64px; padding: clamp(24px, 4vw, 48px); border: 1px solid rgba(215, 193, 154, 0.2); background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(5, 9, 15, 0.4)); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18); }
.fit-progress { display: flex; align-items: center; gap: 14px; color: var(--mpx-gold); font: 10px var(--label); letter-spacing: 0.16em; text-transform: uppercase; }
.fit-progress div { height: 1px; flex: 1; background: rgba(215, 193, 154, 0.2); }
.fit-progress i { display: block; width: 33%; height: 1px; background: var(--mpx-gold); transition: width 0.35s ease; }
.fit-progress small { color: rgba(245, 244, 240, 0.42); font-size: 9px; }
.fit-question { display: none; border: 0; padding: 0; margin: 48px 0 0; }
.fit-question.is-active { display: block; animation: fit-in 0.35s ease both; }
.fit-question legend { margin-bottom: 24px; color: var(--mpx-text); font: 500 clamp(1.5rem, 3vw, 2.5rem) / 1.1 var(--display); }
.fit-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fit-options button { min-height: 76px; padding: 16px; border: 1px solid rgba(215, 193, 154, 0.2); background: rgba(255, 255, 255, 0.035); color: rgba(245, 244, 240, 0.8); text-align: left; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
.fit-options button:hover, .fit-options button:focus-visible { border-color: var(--mpx-gold); background: rgba(215, 193, 154, 0.1); transform: translateY(-2px); }
.fit-result { display: none; margin-top: 48px; padding-top: 30px; border-top: 1px solid rgba(215, 193, 154, 0.22); }
.fit-result.is-visible { display: block; animation: fit-in 0.4s ease both; }
.fit-result-kicker { color: var(--mpx-gold); font: 9px var(--label); letter-spacing: 0.2em; text-transform: uppercase; }
.fit-result h3 { margin: 15px 0 10px; font: 500 clamp(1.8rem, 4vw, 3.2rem) / 1 var(--display); }
.fit-result p { max-width: 54ch; color: rgba(245, 244, 240, 0.66); }
.fit-result-link { display: inline-flex; gap: 10px; margin-top: 14px; padding-bottom: 6px; border-bottom: 1px solid rgba(215, 193, 154, 0.45); color: var(--mpx-text); }
@keyframes fit-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.faq-section { padding: clamp(80px, 11vw, 140px) clamp(24px, 11vw, 175px); background: #e9ecec; color: #0b121a; }
.investment-section { padding: clamp(80px, 11vw, 140px) clamp(24px, 11vw, 175px); background: #0b131d; color: var(--mpx-text); }
.investment-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 0.48fr); gap: clamp(30px, 8vw, 120px); align-items: end; margin-top: 38px; }
.investment-heading h2 { margin: 0; font: 500 clamp(3rem, 6vw, 6rem) / 0.94 var(--display); letter-spacing: -0.04em; }
.investment-heading h2 i { color: var(--mpx-gold); }
.investment-heading p { max-width: 31ch; margin: 0 0 5px; color: rgba(245, 244, 240, 0.66); line-height: 1.7; }
.investment-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 62px; border-top: 1px solid rgba(215, 193, 154, 0.2); border-bottom: 1px solid rgba(215, 193, 154, 0.2); }
.investment-grid article { min-height: 210px; padding: 24px 28px 28px 0; border-right: 1px solid rgba(215, 193, 154, 0.2); }
.investment-grid article + article { padding-left: 28px; }
.investment-grid article:last-child { border-right: 0; }
.investment-grid span { color: var(--mpx-gold); font: 10px var(--label); letter-spacing: 0.15em; }
.investment-grid h3 { margin: 42px 0 12px; font: 500 30px/1 var(--display); }
.investment-price { display: block; margin-bottom: 16px; color: var(--mpx-gold); font: 600 10px var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.investment-grid p { max-width: 28ch; color: rgba(245, 244, 240, 0.62); font-size: 13px; line-height: 1.7; }
.investment-footer { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 36px; }
.investment-footer p { max-width: 42ch; color: rgba(245, 244, 240, 0.58); font-size: 13px; }
.investment-cta { display: inline-flex; align-items: center; gap: 12px; padding: 13px 17px; border: 1px solid rgba(215, 193, 154, 0.42); color: #fffdf7; font: 600 10px var(--label); letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.2s ease, border-color 0.2s ease; }
.investment-cta:hover, .investment-cta:focus-visible { background: rgba(215, 193, 154, 0.14); border-color: var(--mpx-gold); }
.faq-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr); gap: clamp(30px, 8vw, 120px); align-items: end; margin-top: 38px; }
.faq-heading h2 { margin: 0; font: 500 clamp(3rem, 6vw, 6rem) / 0.94 var(--display); letter-spacing: -0.04em; }
.faq-heading h2 i { color: #657b8d; }
.faq-heading p { max-width: 30ch; margin: 0 0 5px; color: #59656e; }
.faq-list { max-width: 920px; margin-top: 58px; border-top: 1px solid rgba(11, 18, 26, 0.2); }
.faq-list details { border-bottom: 1px solid rgba(11, 18, 26, 0.2); }
.faq-list summary { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font: 600 12px/1.4 var(--label); letter-spacing: 0.06em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: #9b8052; font: 22px/1 var(--sans); font-weight: 300; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 62ch; padding: 0 48px 24px 0; color: #53616b; font-size: 14px; line-height: 1.75; }
@media (max-width: 760px) {
.founder-section { grid-template-columns: 1fr; padding-top: 70px; padding-bottom: 70px; }
.founder-photo-wrap { max-width: 360px; }
.fit-section { padding-top: 70px; padding-bottom: 70px; }
.fit-heading { grid-template-columns: 1fr; margin-top: 28px; }
.fit-tool { margin-top: 38px; }
.fit-options { grid-template-columns: 1fr; }
.fit-options button { min-height: 58px; }
.faq-section { padding-top: 70px; padding-bottom: 70px; }
.faq-heading { grid-template-columns: 1fr; margin-top: 28px; }
.faq-list { margin-top: 38px; }
.investment-section { padding-top: 70px; padding-bottom: 70px; }
.investment-heading { grid-template-columns: 1fr; margin-top: 28px; }
.investment-grid { grid-template-columns: 1fr; margin-top: 38px; }
.investment-grid article, .investment-grid article + article { min-height: 0; padding: 22px 0 28px; border-right: 0; border-bottom: 1px solid rgba(215, 193, 154, 0.2); }
.investment-grid article:last-child { border-bottom: 0; }
.investment-grid h3 { margin-top: 24px; }
.investment-footer { align-items: flex-start; flex-direction: column; margin-top: 28px; }
}
@media (max-width: 760px) {
.site-header { padding-left: 18px; padding-right: 18px; }
.hero-copy h1 { font-size: clamp(3.15rem, 18vw, 5rem); }
.hero-actions { flex-direction: column; align-items: flex-start; }
.hero-orbit { right: -28%; bottom: 30px; width: 250px; opacity: 0.58; }
.chat-window { right: 0; bottom: 68px; }
}
/* Desktop-only polish: one composited layer, no layout work on pointermove. */
.cursor-spotlight {
position: fixed;
z-index: 3;
top: -90px;
left: -90px;
width: 180px;
height: 180px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(215, 193, 154, 0.065), rgba(215, 193, 154, 0.018) 36%, transparent 70%);
mix-blend-mode: screen;
opacity: 0.42;
will-change: transform;
}
.nav-contact,
.founder-cta,
.form-submit {
transform: translate3d(var(--magnetic-x, 0px), var(--magnetic-y, 0px), 0);
will-change: transform;
}
.demo-card::after {
content: "Bekijk live case";
display: block;
margin-top: 8px;
color: rgba(215, 193, 154, 0.72);
font: 8px var(--label);
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.demo-card:hover::after,
.demo-card.is-active::after { opacity: 1; transform: none; }
@media (pointer: coarse) {
.cursor-spotlight { display: none; }
.nav-contact, .founder-cta, .form-submit { transform: none; will-change: auto; }
}
@media (prefers-reduced-motion: reduce) {
.cursor-spotlight { display: none; }
.nav-contact, .founder-cta, .form-submit { transform: none; will-change: auto; }
}
footer {
position: relative;
background: linear-gradient(180deg, #071019 0%, #05080d 100%);
color: rgba(245, 244, 240, 0.7);
}
footer::before {
content: "";
position: absolute;
top: 0;
left: clamp(24px, 5vw, 72px);
right: clamp(24px, 5vw, 72px);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(215, 193, 154, 0.65), transparent);
}
.footer-main { padding-top: 68px; padding-bottom: 56px; gap: clamp(38px, 8vw, 120px); }
.footer-main > div:first-child p { max-width: 28ch; margin-top: 18px; color: rgba(245, 244, 240, 0.54); line-height: 1.7; }
.footer-main h4 { margin-bottom: 17px; color: var(--mpx-gold); font: 600 9px var(--label); letter-spacing: 0.18em; text-transform: uppercase; }
.footer-main > div:not(:first-child) { padding-top: 7px; }
.footer-main > div:not(:first-child) a { color: rgba(245, 244, 240, 0.62); transition: color 0.2s ease, transform 0.2s ease; }
.footer-main > div:not(:first-child) a:hover { color: #fffdf7; transform: translateX(3px); }
.footer-bottom { color: rgba(245, 244, 240, 0.42); border-top-color: rgba(215, 193, 154, 0.16); }
.footer-bottom a:hover { color: var(--mpx-gold); }
.footer-bottom {
display: grid;
grid-template-columns: repeat(4, max-content);
align-items: center;
justify-content: start;
flex-wrap: wrap;
clear: both;
flex: 0 0 100%;
width: 100%;
gap: 8px 24px;
}
/* Final footer structure: content columns above, legal metadata below. */
.site-footer {
display: block !important;
padding: 0 clamp(24px, 5vw, 72px);
}
.site-footer .footer-main {
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr) minmax(180px, 1fr);
gap: clamp(32px, 7vw, 96px);
max-width: 1160px;
margin: 0 auto;
padding: 38px 0 34px;
}
.site-footer .footer-brand p { margin-top: 16px; }
.site-footer .footer-bottom {
display: flex !important;
grid-column: auto;
width: min(1160px, 100%);
max-width: none;
min-height: 58px;
margin: 0 auto;
padding: 16px 0 18px;
border-top: 1px solid rgba(215, 193, 154, .16);
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px 24px;
}
@media (max-width: 760px) {
.site-footer .footer-main { grid-template-columns: 1fr; gap: 28px; padding-top: 34px; padding-bottom: 30px; }
.site-footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
footer .footer-main {
display: grid !important;
grid-template-columns: 2fr 1fr 1fr;
max-width: 1160px;
margin-right: auto;
margin-left: auto;
padding-top: 36px;
padding-bottom: 32px;
}
footer .footer-bottom {
display: flex !important;
position: relative;
clear: both;
grid-column: 1 / -1;
max-width: 1160px;
width: 100%;
margin-right: auto;
margin-left: auto;
border-top: 1px solid rgba(215, 193, 154, 0.16);
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 8px 24px;
padding-top: 16px;
padding-bottom: 20px;
}
@media (max-width: 760px) {
.footer-main { padding-top: 52px; padding-bottom: 40px; gap: 30px; }
footer .footer-main { grid-template-columns: 1fr; }
footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
.footer-main > div:not(:first-child) { padding-top: 0; }
}
/* Guardrails for smaller desktop windows, browser zoom, and narrow phones. */
html, body { overflow-x: hidden; }
img, iframe { max-width: 100%; }
button, input, textarea { max-width: 100%; }
@supports (animation-timeline: view()) {
.founder-section,
.fit-section,
footer {
animation: section-rise linear both;
animation-timeline: view block;
animation-range: entry 0% cover 28%;
}
@keyframes section-rise {
from { opacity: 0.55; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
}
@supports (view-transition-name: root) {
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.38s; }
::view-transition-old(root) { animation-name: mpx-fade-out; }
::view-transition-new(root) { animation-name: mpx-fade-in; }
@keyframes mpx-fade-out { to { opacity: 0; filter: blur(2px); } }
@keyframes mpx-fade-in { from { opacity: 0; filter: blur(2px); } }
}
@media (max-width: 1120px) and (min-width: 761px) {
.site-header { padding-left: 28px; padding-right: 28px; }
.site-nav { gap: 20px; font-size: 10px; }
.site-nav .nav-contact { padding: 10px 12px; }
.scroll-status { right: 28px; }
.hero-copy h1 { font-size: clamp(4rem, 8vw, 6.5rem); }
.hero-orbit { right: 6vw; transform: scale(0.82); }
.footer-main { gap: 42px; }
}
@media (max-width: 760px) {
.site-header { min-height: 68px; }
.site-header .wordmark { max-width: calc(100% - 64px); }
.site-header .wordmark em { font-size: 17px; }
.scroll-status { display: none; }
.hero { min-height: 720px; }
.hero-copy { padding-top: 34px; }
.hero-copy h1 { max-width: 8ch; line-height: 0.94; }
.hero-intro { max-width: 31ch; font-size: 1rem; line-height: 1.55; }
.hero-actions .text-link { max-width: 100%; }
.browser-bar { min-height: 42px; }
.browser-url { max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-frame-wrap { height: 480px; }
.founder-section::after { right: 24px; bottom: 18px; font-size: 7px; }
.founder-details { max-width: 32ch; }
.chat-window { width: min(390px, calc(100vw - 24px)); }
.chat-window-head small { max-width: 210px; }
.fit-heading h2 { max-width: 10ch; }
.contact-form input, .contact-form textarea { width: 100%; min-width: 0; }
.footer-bottom { grid-template-columns: 1fr; align-items: flex-start; gap: 8px; }
}
.intro-moon {
width: clamp(150px, 20vw, 240px) !important;
height: clamp(150px, 20vw, 240px) !important;
}
.intro-moon::before { inset: 0 !important; }
.intro-moon {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.intro-moon::before {
border: 0 !important;
background: conic-gradient(from -90deg, var(--mpx-gold) 0deg, #f5f4f0 var(--mpx-ring-progress), transparent var(--mpx-ring-progress), transparent 360deg) !important;
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px)) !important;
mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px)) !important;
animation: mpx-ring-progress 5.6s linear forwards !important;
box-shadow: none !important;
}
.intro-moon::after,
.intro-line { display: none !important; }
.intro-loader {
position: relative;
width: clamp(132px, 17vw, 196px);
aspect-ratio: 1;
display: grid;
place-items: center;
color: var(--mpx-gold);
font: 600 clamp(16px, 2vw, 22px) var(--label);
letter-spacing: .24em;
text-indent: .24em;
}
.intro-loader::before,
.intro-loader::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(245, 244, 240, .18);
border-radius: 50%;
}
.intro-loader::after {
border: 0;
background: conic-gradient(from 0deg, var(--mpx-gold) 0deg, #f5f4f0 var(--intro-loader-progress), transparent var(--intro-loader-progress), transparent 360deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px));
animation: intro-loader-progress 1.3s linear forwards;
}
.intro-loader i {
position: absolute;
inset: -7px;
border: 1px solid rgba(201, 185, 155, .08);
border-radius: 50%;
}
.intro-loader i::after {
content: '';
position: absolute;
top: -3px;
left: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: #f5f4f0;
box-shadow: 0 0 12px rgba(245, 244, 240, .8);
transform: translateX(-50%);
animation: intro-loader-orbit 2.8s linear infinite reverse;
}
.intro-loader i::after { display: none; }
.wordmark,
.intro-logo,
.menu-brand {
display: inline-flex !important;
flex-direction: row;
align-items: baseline;
gap: .22em !important;
line-height: 1;
letter-spacing: .08em !important;
}
.wordmark span,
.intro-logo span,
.menu-brand span {
font-family: var(--label);
font-size: 1em;
font-weight: 800 !important;
line-height: .9;
letter-spacing: .08em;
}
.wordmark em,
.intro-logo em,
.menu-brand em {
margin-top: 0;
position: relative;
top: -1px;
color: var(--mpx-gold) !important;
font-family: var(--label) !important;
font-size: 1em !important;
font-style: normal !important;
font-weight: 100 !important;
letter-spacing: .16em !important;
opacity: .78;
line-height: 1;
text-transform: uppercase;
}
.wordmark i,
.intro-logo i,
.menu-brand i { display: none !important; }
.intro-loader .intro-logo {
align-items: baseline;
letter-spacing: .08em !important;
}
.intro-loader .intro-logo span,
.intro-loader .intro-logo em { font-size: clamp(30px, 4vw, 46px) !important; }
.site-header .wordmark,
.site-nav .menu-brand,
.footer-main .wordmark { align-items: flex-start; }
.site-nav .menu-brand { display: none !important; }
@media (max-width: 760px) {
.site-nav .menu-brand { display: inline-flex !important; }
}
.hero-orbit .orbit-core { line-height: .9; }
.hero-orbit .orbit-core small { display: block; margin-top: -2px; line-height: 1; }
.text-link span,
.founder-cta span,
.fit-result-link span,
.investment-cta span,
.chat-whatsapp-link span,
.chat-contact-link span,
.growth-footer a span,
.growth-card-link span,
.service-link span,
.payment-option span,
.payment-secondary span,
.audit-result-cta span,
.demo-open,
.nav-contact b,
.demo-card b {
width: 18px !important;
height: 18px !important;
}
.text-link span::before,
.founder-cta span::before,
.fit-result-link span::before,
.investment-cta span::before,
.chat-whatsapp-link span::before,
.chat-contact-link span::before,
.growth-footer a span::before,
.growth-card-link span::before,
.service-link span::before,
.payment-option span::before,
.payment-secondary span::before,
.audit-result-cta span::before,
.demo-open::before,
.nav-contact b::before,
.demo-card b::before {
top: 1px !important;
left: 1px !important;
width: 14px !important;
height: 14px !important;
border: 0 !important;
border-radius: 50%;
background: conic-gradient(currentColor 0deg 300deg, transparent 300deg 360deg) !important;
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px));
transform: none !important;
}
.text-link span::after,
.founder-cta span::after,
.fit-result-link span::after,
.investment-cta span::after,
.chat-whatsapp-link span::after,
.chat-contact-link span::after,
.growth-footer a span::after,
.growth-card-link span::after,
.service-link span::after,
.payment-option span::after,
.payment-secondary span::after,
.audit-result-cta span::after,
.demo-open::after,
.nav-contact b::after,
.demo-card b::after {
top: 0 !important;
right: auto !important;
left: 3px !important;
display: none !important;
}
.text-link:hover span::after,
.text-link:focus-visible span::after,
.founder-cta:hover span::after,
.founder-cta:focus-visible span::after,
.fit-result-link:hover span::after,
.fit-result-link:focus-visible span::after,
.investment-cta:hover span::after,
.investment-cta:focus-visible span::after,
.chat-whatsapp-link:hover span::after,
.chat-contact-link:hover span::after,
.growth-footer a:hover span::after,
.growth-card-link:hover span::after,
.service-link:hover span::after,
.payment-option:hover span::after,
.payment-secondary:hover span::after,
.audit-result-cta:hover span::after,
.demo-open:hover::after,
.nav-contact:hover b::after,
.demo-card:hover b::after {
transform: rotate(325deg);
}
.text-link:hover span::before,
.text-link:focus-visible span::before,
.founder-cta:hover span::before,
.founder-cta:focus-visible span::before,
.fit-result-link:hover span::before,
.fit-result-link:focus-visible span::before,
.investment-cta:hover span::before,
.investment-cta:focus-visible span::before,
.chat-whatsapp-link:hover span::before,
.chat-contact-link:hover span::before,
.growth-footer a:hover span::before,
.growth-card-link:hover span::before,
.service-link:hover span::before,
.payment-option:hover span::before,
.payment-secondary:hover span::before,
.audit-result-cta:hover span::before,
.demo-open:hover::before,
.nav-contact:hover b::before,
.demo-card:hover b::before {
transform: rotate(360deg) !important;
transition: transform .55s ease;
}
:is(.text-link span, .founder-cta span, .fit-result-link span, .investment-cta span, .chat-whatsapp-link span, .chat-contact-link span, .growth-footer a span, .growth-card-link span, .service-link span, .payment-option span, .payment-secondary span, .audit-result-cta span, .demo-open, .nav-contact b, .demo-card b)::before {
border: 1px solid currentColor !important;
background: transparent !important;
-webkit-mask: none !important;
mask: none !important;
transform: none !important;
}
:is(.text-link span, .founder-cta span, .fit-result-link span, .investment-cta span, .chat-whatsapp-link span, .chat-contact-link span, .growth-footer a span, .growth-card-link span, .service-link span, .payment-option span, .payment-secondary span, .audit-result-cta span, .demo-open, .nav-contact b, .demo-card b)::after {
content: '' !important;
display: block !important;
top: 1px !important;
left: 1px !important;
width: 14px !important;
height: 14px !important;
border: 0 !important;
border-radius: 50%;
background: conic-gradient(currentColor 0deg 95deg, transparent 95deg 360deg) !important;
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px));
transform: rotate(0deg) !important;
transition: transform .55s ease;
}
:is(.text-link:hover span, .text-link:focus-visible span, .founder-cta:hover span, .founder-cta:focus-visible span, .fit-result-link:hover span, .fit-result-link:focus-visible span, .investment-cta:hover span, .investment-cta:focus-visible span, .chat-whatsapp-link:hover span, .chat-contact-link:hover span, .growth-footer a:hover span, .growth-card-link:hover span, .service-link:hover span, .payment-option:hover span, .payment-secondary:hover span, .audit-result-cta:hover span, .demo-open:hover, .nav-contact:hover b, .demo-card:hover b)::after {
transform: rotate(360deg) !important;
}
:is(.text-link span, .founder-cta span, .fit-result-link span, .investment-cta span, .chat-whatsapp-link span, .chat-contact-link span, .growth-footer a span, .growth-card-link span, .service-link span, .payment-option span, .payment-secondary span, .audit-result-cta span, .demo-open, .nav-contact b, .demo-card b)::before {
top: 6px !important;
left: 6px !important;
width: 6px !important;
height: 6px !important;
border: 0 !important;
border-radius: 50%;
background: var(--mpx-gold) !important;
-webkit-mask: none !important;
mask: none !important;
opacity: .7;
color: var(--mpx-gold) !important;
transform: scale(.85) !important;
transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease;
}
:is(.text-link span, .founder-cta span, .fit-result-link span, .investment-cta span, .chat-whatsapp-link span, .chat-contact-link span, .growth-footer a span, .growth-card-link span, .service-link span, .payment-option span, .payment-secondary span, .audit-result-cta span, .demo-open, .nav-contact b, .demo-card b) {
font-size: 0 !important;
color: transparent !important;
}
:is(.text-link span, .founder-cta span, .fit-result-link span, .investment-cta span, .chat-whatsapp-link span, .chat-contact-link span, .growth-footer a span, .growth-card-link span, .service-link span, .payment-option span, .payment-secondary span, .audit-result-cta span, .demo-open, .nav-contact b, .demo-card b)::after {
display: none !important;
}
:is(.text-link:hover span, .text-link:focus-visible span, .founder-cta:hover span, .founder-cta:focus-visible span, .fit-result-link:hover span, .fit-result-link:focus-visible span, .investment-cta:hover span, .investment-cta:focus-visible span, .chat-whatsapp-link:hover span, .chat-contact-link:hover span, .growth-footer a:hover span, .growth-card-link:hover span, .service-link:hover span, .payment-option:hover span, .payment-secondary:hover span, .audit-result-cta:hover span, .demo-open:hover, .nav-contact:hover b, .demo-card:hover b)::before {
opacity: 1;
transform: scale(1.45) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent), 0 0 10px currentColor;
}
.intro-loader {
width: clamp(250px, 32vw, 360px);
display: grid;
place-items: center;
color: inherit;
font: inherit;
letter-spacing: normal;
text-indent: 0;
}
.intro-loader .intro-logo {
position: relative;
z-index: 1;
}
.intro-loader .intro-logo i {
align-self: center;
flex: 0 0 1px;
margin: 0 1px;
}
.intro-loader b {
top: calc(100% + 22px);
color: var(--mpx-gold);
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
transition: color .2s ease;
}
.chat-demo-input b {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
color: transparent !important;
font-size: 0 !important;
}
.chat-demo-input b::before {
content: '';
position: absolute;
inset: 5px;
border: 1px solid currentColor;
border-radius: 50%;
background: var(--mpx-gold);
box-shadow: 0 0 8px rgba(215, 193, 154, .45);
}
.contact-link span,
.form-submit span,
.audit-submit span,
.chat-window-input button {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
color: transparent !important;
font-size: 0 !important;
}
.contact-link span::before,
.form-submit span::before,
.audit-submit span::before,
.chat-window-input button::before {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
background: var(--mpx-gold);
box-shadow: 0 0 8px rgba(215, 193, 154, .45);
transition: transform .25s ease, box-shadow .25s ease;
}
.contact-link:hover span::before,
.contact-link:focus-visible span::before,
.form-submit:hover span::before,
.form-submit:focus-visible span::before,
.audit-submit:hover span::before,
.audit-submit:focus-visible span::before,
.chat-window-input button:hover::before,
.chat-window-input button:focus-visible::before {
transform: scale(1.45);
box-shadow: 0 0 0 3px rgba(215, 193, 154, .16), 0 0 12px var(--mpx-gold);
}
.contact-section .contact-link {
min-width: min(100%, 300px);
justify-content: space-between;
margin-top: 12px;
padding: 15px 17px;
border: 1px solid rgba(8, 10, 13, .24);
background: rgba(255, 255, 255, .32);
transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.contact-section .contact-link + .contact-link { margin-left: 10px; }
.contact-section .contact-link:hover,
.contact-section .contact-link:focus-visible {
border-color: #8a7045;
background: rgba(255, 255, 255, .62);
transform: translateY(-2px);
}
@media (max-width: 600px) {
.contact-section .contact-link { width: 100%; }
.contact-section .contact-link + .contact-link { margin-left: 0; }
}
.demo-open { font-size: inherit !important; }
.demo-open::before,
.demo-open::after { display: none !important; }
.intro-loader b {
position: absolute;
top: calc(50% + 24px);
left: 50%;
width: max-content;
color: rgba(245, 244, 240, .72);
font: 8px var(--label);
letter-spacing: .13em;
text-transform: uppercase;
opacity: 0;
transform: translateX(-50%);
animation: intro-loader-message 2.7s linear forwards;
}
.studio-intro { animation-duration: 2.7s !important; }
@property --intro-loader-progress {
syntax: '';
inherits: false;
initial-value: 0deg;
}
@keyframes intro-loader-progress {
0% { --intro-loader-progress: 0deg; }
100% { --intro-loader-progress: 360deg; }
}
@keyframes intro-loader-message {
0%, 45% { opacity: 0; color: var(--mpx-gold); text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
50% { opacity: .72; color: #fff; text-shadow: 0 0 12px rgba(245, 244, 240, .7); }
55% { opacity: 1; color: #fff; text-shadow: 0 0 22px rgba(245, 244, 240, 1); }
60% { opacity: .58; color: var(--mpx-gold); text-shadow: 0 0 8px rgba(201, 185, 155, .6); }
68%, 100% { opacity: 1; color: #fff; text-shadow: 0 0 12px rgba(245, 244, 240, .72); }
}
@media (prefers-reduced-motion: reduce) {
.intro-loader::after { animation: none; --intro-loader-progress: 360deg; }
.intro-loader b { animation: none; opacity: 0; }
}
@media (max-width: 600px) {
.hero-copy h1 { font-size: clamp(3.15rem, 13vw, 5rem) !important; }
.hero-intro { max-width: 31ch !important; font-size: 1rem !important; line-height: 1.7 !important; }
}
/* ═══ mpx-studio-hero-clear.css ═══ */
@media (max-width: 760px) {
body.menu-open { overflow: hidden; }
h1,
h2,
h3,
p,
li,
legend,
label,
.section-label,
.hero-intro,
.experience-copy,
.chat-demo-card,
.founder-copy,
.fit-result,
.investment-grid article,
.faq-list details {
min-width: 0;
max-width: 100%;
overflow-wrap: break-word;
}
.hero h1,
.experience-copy h2,
.founder-copy h2,
.fit-heading h2,
.investment-heading h2,
.faq-heading h2,
.contact-section h2 {
text-wrap: balance;
}
.hero-actions .text-link,
.form-submit,
.investment-cta,
.founder-cta,
.fit-result-link {
white-space: normal;
overflow-wrap: anywhere;
}
.demo-filters {
display: flex;
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.demo-filters::-webkit-scrollbar { display: none; }
.services-section,
.approach-section,
.experience-section,
.founder-section,
.fit-section,
.investment-section,
.faq-section,
.contact-section {
scroll-margin-top: 76px;
}
.founder-section,
.fit-section,
.investment-section,
.faq-section {
padding-top: 78px;
padding-bottom: 78px;
}
.founder-copy > p,
.fit-heading > p,
.investment-heading > p,
.faq-heading > p {
margin-top: 22px;
}
.experience-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 42px;
min-width: 0;
}
.experience-copy,
.chat-demo-card {
width: 100%;
min-width: 0;
}
.experience-copy h2,
.experience-copy p,
.experience-copy li {
max-width: 100%;
overflow-wrap: anywhere;
}
.hero-orbit {
right: -3%;
top: auto;
bottom: 14px;
width: 118px;
opacity: .58;
}
}
/* Keep secondary copy readable without weakening the quiet studio palette. */
.section-label { font-weight: 600; }
.combined-intro p,
.demo-copy > p,
.demo-heading p,
.contact-top p,
.faq-heading p { color: #4d5a64; }
.founder-details { color: rgba(245, 244, 240, 0.7); }
.growth-section {
padding: clamp(86px, 11vw, 148px) clamp(24px, 11vw, 175px);
background: #f4f5f3;
color: #080a0d;
border-top: 1px solid rgba(8, 10, 13, 0.14);
}
.growth-heading {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.6fr);
gap: clamp(32px, 8vw, 120px);
align-items: end;
margin-top: 34px;
}
.growth-heading h2 {
margin: 0;
font: 500 clamp(3rem, 6vw, 6rem) / .94 var(--display);
letter-spacing: -.04em;
}
.growth-heading h2 i { color: #71879a; }
.growth-heading p { max-width: 34ch; margin: 0 0 5px; color: #53616b; line-height: 1.75; }
.growth-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin-top: 64px;
background: rgba(8, 10, 13, 0.16);
border-top: 1px solid rgba(8, 10, 13, 0.16);
border-bottom: 1px solid rgba(8, 10, 13, 0.16);
}
.growth-card {
display: flex;
min-width: 0;
min-height: 330px;
flex-direction: column;
justify-content: space-between;
gap: 28px;
padding: 24px 26px 28px 0;
background: #f4f5f3;
}
.growth-card + .growth-card { padding-left: 26px; }
.growth-card-featured { background: #e8edef; }
.growth-card-number { color: #9b8052; font: 10px var(--label); letter-spacing: .16em; }
.growth-kicker { display: block; margin-bottom: 18px; color: #71808a; font: 9px var(--label); letter-spacing: .18em; text-transform: uppercase; }
.growth-card h3 { margin: 0 0 14px; font: 500 clamp(1.8rem, 3vw, 2.6rem) / 1 var(--display); }
.growth-card p { max-width: 30ch; color: #596771; font-size: 13px; line-height: 1.72; }
.growth-card strong { display: block; margin-top: 18px; color: #8a7045; font: 600 10px var(--label); letter-spacing: .12em; text-transform: uppercase; }
.growth-card-link { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; border-bottom: 1px solid rgba(8, 10, 13, .28); padding-bottom: 8px; color: #101922; font: 10px var(--label); letter-spacing: .1em; text-transform: uppercase; }
.growth-card-link span { color: #9b8052; font-size: 17px; }
.growth-card-link:hover { border-color: #9b8052; }
.growth-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; color: #64717a; font: 10px var(--label); letter-spacing: .08em; text-transform: uppercase; }
.growth-footer a { color: #172631; border-bottom: 1px solid rgba(8, 10, 13, .24); padding-bottom: 6px; }
@media (max-width: 760px) {
.growth-section { padding-top: 78px; padding-bottom: 78px; scroll-margin-top: 76px; }
.growth-heading { grid-template-columns: 1fr; gap: 22px; margin-top: 26px; }
.growth-grid { grid-template-columns: 1fr; margin-top: 42px; }
.growth-card, .growth-card + .growth-card { min-height: 0; padding: 22px 0 28px; }
.growth-card + .growth-card { border-top: 1px solid rgba(8, 10, 13, .16); }
.growth-footer { align-items: flex-start; flex-direction: column; gap: 16px; line-height: 1.5; }
}
/* Editorial portfolio rhythm: let the work carry the visual weight. */
.demo-section .combined-intro {
max-width: 860px;
margin-bottom: clamp(58px, 8vw, 108px);
}
.demo-section .combined-intro h2 {
max-width: 13ch;
text-wrap: balance;
}
.demo-section .demo-layout {
position: relative;
padding-top: clamp(30px, 4vw, 52px);
border-top: 1px solid rgba(8, 10, 13, 0.18);
}
.demo-section .demo-copy {
max-width: 360px;
}
.demo-section .demo-heading span {
letter-spacing: 0.08em;
}
@media (max-width: 760px) {
.demo-section .combined-intro { margin-bottom: 42px; }
.demo-section .demo-layout { padding-top: 26px; }
}
/* ═══ mpx-studio-audit-polish.css ═══ */
.audit-section {
position: relative;
padding: clamp(76px, 10vw, 140px) clamp(24px, 11vw, 175px);
background: #101a24;
color: #f5f4f0;
overflow: hidden;
}
.audit-section::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, rgba(215, 193, 154, .08), transparent 38%, rgba(255, 255, 255, .035));
pointer-events: none;
}
.audit-section > * { position: relative; z-index: 1; }
.audit-section .section-label { color: rgba(245, 244, 240, .58); }
.audit-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr); gap: clamp(42px, 9vw, 150px); align-items: end; margin-top: 58px; }
.audit-kicker { display: block; margin-bottom: 18px; color: #d7c19a; font: 600 10px var(--label); letter-spacing: .16em; text-transform: uppercase; }
.audit-layout h2 { max-width: 680px; font-size: clamp(48px, 6.4vw, 94px); text-wrap: balance; }
.audit-layout p { max-width: 540px; margin-top: 28px; color: rgba(245, 244, 240, .7); font-size: 16px; line-height: 1.8; }
.audit-form { padding: 26px 26px 24px; border: 1px solid rgba(215, 193, 154, .28); background: rgba(5, 9, 15, .34); }
.audit-form label { display: flex; flex-direction: column; gap: 10px; color: rgba(245, 244, 240, .58); font: 10px var(--label); letter-spacing: .14em; text-transform: uppercase; }
.audit-form input { width: 100%; min-height: 48px; border: 1px solid rgba(245, 244, 240, .22); padding: 12px 14px; background: rgba(255, 255, 255, .06); color: #fff; font: 15px var(--sans); outline: 0; }
.audit-form input:focus { border-color: #d7c19a; box-shadow: 0 0 0 3px rgba(215, 193, 154, .12); }
.audit-submit { width: 100%; min-height: 48px; margin-top: 18px; border: 1px solid #d7c19a; background: #d7c19a; color: #101a24; font: 600 10px var(--label); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.audit-submit:hover { background: #f1dfb9; transform: translateY(-2px); }
.audit-status { min-height: 24px; margin: 12px 0 0 !important; color: rgba(245, 244, 240, .58) !important; font-size: 12px !important; line-height: 1.5 !important; }
.audit-result { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 34px; margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(245, 244, 240, .18); }
.audit-score strong { display: block; color: #d7c19a; font: 500 clamp(60px, 8vw, 108px)/.85 var(--display); }
.audit-score span { display: block; margin-top: 12px; color: rgba(245, 244, 240, .55); font: 10px/1.5 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.audit-result-kicker { color: #d7c19a; font: 10px var(--label); letter-spacing: .14em; text-transform: uppercase; }
.audit-result h3 { margin-top: 12px; font-size: clamp(26px, 3vw, 42px); }
.audit-result ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 28px 0; padding: 0; list-style: none; }
.audit-result li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: rgba(245, 244, 240, .68); font-size: 12px; line-height: 1.5; }
.audit-result li strong { color: #b8d9bf; }
.audit-result li.is-fail strong { color: #e1b27d; }
.audit-result li b { display: block; color: #f5f4f0; font: 600 10px var(--label); letter-spacing: .04em; text-transform: uppercase; }
.audit-result-cta { display: inline-flex; gap: 12px; align-items: center; border-bottom: 1px solid rgba(215, 193, 154, .55); padding-bottom: 8px; color: #fff; font: 10px var(--label); letter-spacing: .1em; text-transform: uppercase; }
.audit-result-cta span { color: #d7c19a; font-size: 17px; }
.growth-card-link span,
.service-link span,
.payment-option span,
.payment-secondary span,
.audit-result-cta span { position: relative; display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; font-size: 0; color: transparent; }
.growth-card-link span::before,
.service-link span::before,
.payment-option span::before,
.payment-secondary span::before,
.audit-result-cta span::before { content: ''; position: absolute; top: 8px; left: 1px; width: 13px; height: 1px; background: currentColor; transform: rotate(-45deg); transform-origin: right center; }
.growth-card-link span::after,
.service-link span::after,
.payment-option span::after,
.payment-secondary span::after,
.audit-result-cta span::after { content: ''; position: absolute; top: 2px; right: 1px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.growth-card-link span { color: #9b8052; }
.service-link span, .payment-option span { color: #a98f65; }
.payment-option-paypal span { color: #d7c19a; }
.payment-secondary span { color: #a98f65; }
.audit-result-cta span { color: #d7c19a; }
@media (max-width: 760px) {
.audit-layout, .audit-result { grid-template-columns: 1fr; }
.audit-layout { margin-top: 42px; gap: 34px; }
.audit-layout h2 { font-size: clamp(45px, 14vw, 70px); }
.audit-form { padding: 20px; }
.audit-result { gap: 24px; margin-top: 42px; }
.audit-result ul { grid-template-columns: 1fr; }
}
.payment-actions { display: grid; gap: 13px; align-self: start; }
.payment-secondary { color: #69747b; font: 9px var(--label); letter-spacing: .1em; text-transform: uppercase; }
.payment-secondary span { color: #a98f65; font-size: 15px; }
.bank-payment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr); gap: 42px; margin-top: 58px; padding-top: 28px; border-top: 1px solid rgba(8, 10, 13, .18); color: #101922; }
.bank-payment .growth-kicker { color: #8a7045; }
.bank-payment h3 { margin-top: 10px; font: 500 clamp(26px, 3vw, 40px) / 1.05 var(--display); }
.bank-payment p { max-width: 570px; margin-top: 16px; color: #596771; font-size: 13px; line-height: 1.7; }
.bank-payment p strong { color: #101922; }
.bank-payment dl { display: grid; gap: 0; border-top: 1px solid rgba(8, 10, 13, .18); }
.bank-payment dl div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(8, 10, 13, .14); }
.bank-payment dt { color: #69747b; font: 9px var(--label); letter-spacing: .1em; text-transform: uppercase; }
.bank-payment dd { margin: 0; color: #101922; font: 500 13px var(--sans); text-align: right; }
.copy-iban { border: 0; border-bottom: 1px solid rgba(8, 10, 13, .25); padding: 0 0 3px; background: none; color: inherit; font: inherit; cursor: pointer; }
.copy-iban span { margin-left: 7px; color: #8a7045; font: 9px var(--label); letter-spacing: .08em; text-transform: uppercase; }
.bank-details { margin-top: 20px; }
.bank-details summary { cursor: pointer; color: #596771; font: 10px var(--label); letter-spacing: .08em; text-transform: uppercase; }
.bank-details summary::marker { color: #8a7045; }
.bank-details dl { margin-top: 14px; }
.payment-option-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.payment-option { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(8, 10, 13, .22); padding: 12px 14px; color: #101922; font: 9px var(--label); letter-spacing: .08em; text-transform: uppercase; }
.payment-option span { color: #8a7045; font-size: 16px; }
.payment-option:hover { border-color: #8a7045; }
.payment-option-paypal { background: #101922; border-color: #101922; color: #fff; }
.payment-option-paypal span { color: #d7c19a; }
@media (max-width: 760px) {
.bank-payment { grid-template-columns: 1fr; gap: 26px; margin-top: 42px; }
.bank-payment dl div { display: grid; gap: 5px; }
.bank-payment dd { text-align: left; }
}
.growth-card-link span,
.service-link span,
.payment-option span,
.payment-secondary span,
.audit-result-cta span { font-size: 0 !important; }
.growth-card-link span::before,
.service-link span::before,
.payment-option span::before,
.payment-secondary span::before,
.audit-result-cta span::before { background: #a98f65; }
.payment-option-paypal span::before,
.audit-result-cta span::before { background: #d7c19a; }
/* ═══ mpx-studio-mobile-polish.css ═══ */
.text-link span,
.founder-cta span,
.fit-result-link span,
.investment-cta span,
.chat-whatsapp-link span,
.chat-contact-link span,
.growth-footer a span,
.demo-open,
.nav-contact b,
.demo-card b { font-size: 0 !important; }
.text-link span,
.founder-cta span,
.fit-result-link span,
.investment-cta span,
.chat-whatsapp-link span,
.chat-contact-link span,
.growth-footer a span,
.demo-open,
.nav-contact b,
.demo-card b { position: relative; display: inline-block; width: 18px; height: 18px; margin-left: 6px; color: transparent; vertical-align: middle; }
.text-link span::before,
.founder-cta span::before,
.fit-result-link span::before,
.investment-cta span::before,
.chat-whatsapp-link span::before,
.chat-contact-link span::before,
.growth-footer a span::before,
.demo-open::before,
.nav-contact b::before,
.demo-card b::before { content: ''; position: absolute; top: 9px; left: 1px; width: 13px; height: 1px; background: currentColor; transform: rotate(-45deg); transform-origin: right center; }
.text-link span::after,
.founder-cta span::after,
.fit-result-link span::after,
.investment-cta span::after,
.chat-whatsapp-link span::after,
.chat-contact-link span::after,
.growth-footer a span::after,
.demo-open::after,
.nav-contact b::after,
.demo-card b::after { content: ''; position: absolute; top: 3px; right: 1px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.text-link span,
.founder-cta span,
.fit-result-link span,
.investment-cta span,
.growth-footer a span,
.nav-contact b,
.demo-card b { color: #a98f65; }
.chat-whatsapp-link span { color: #c8ead0; }
.chat-contact-link span,
.demo-open { color: #d7c19a; }
.intro-moon {
width: clamp(150px, 19vw, 198px) !important;
height: clamp(150px, 19vw, 198px) !important;
margin: 10px 0 8px !important;
background-image: radial-gradient(circle at 29% 25%, rgba(255,255,255,.96) 0 4%, transparent 4.5%), radial-gradient(circle at 64% 35%, rgba(76,83,87,.32) 0 8%, transparent 8.8%), radial-gradient(circle at 40% 67%, rgba(78,84,87,.26) 0 6%, transparent 6.8%), radial-gradient(circle at 72% 72%, rgba(255,255,255,.2) 0 5%, transparent 5.8%), radial-gradient(circle at 31% 24%, #f3f1e8 0%, #b9bcba 47%, #656d72 78%, #3e474d 100%) !important;
background-size: 100% 100% !important;
background-position: center !important;
background-repeat: no-repeat !important;
animation: mpx-moon-roll 5.4s linear infinite !important;
opacity: 1 !important;
transform: scale(1);
border: 0 !important;
outline: 0 !important;
box-shadow: inset -18px -12px 24px rgba(0,0,0,.42), inset 8px 6px 14px rgba(255,255,255,.16) !important;
}
.studio-intro { perspective: 800px; }
.intro-moon::before { inset: -6px !important; border: 0 !important; background: conic-gradient(from -90deg, #b9d9e8 0deg, #ffffff var(--mpx-ring-progress), transparent var(--mpx-ring-progress), transparent 360deg) !important; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px)) !important; mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px)) !important; transform: rotateY(calc(var(--mpx-moon-angle) * -1)) !important; animation: mpx-ring-progress 5.6s linear forwards !important; }
.intro-moon::after { inset: -17px !important; animation: mpx-moon-glow 3.6s linear infinite !important; }
.studio-intro { animation: mpx-intro-exit 2.7s linear forwards !important; }
.intro-line { display: none !important; }
@property --mpx-ring-progress { syntax: ''; inherits: false; initial-value: 0deg; }
@property --mpx-moon-angle { syntax: ''; inherits: true; initial-value: 0deg; }
.intro-moon::before { border: 0 !important; background: conic-gradient(from -90deg, #d7c19a 0deg, #f5f4f0 var(--mpx-ring-progress), transparent var(--mpx-ring-progress), transparent 360deg) !important; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px)) !important; mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px)) !important; animation: mpx-ring-progress 5.6s linear forwards !important; }
.intro-moon::after { content: ''; display: block !important; position: absolute; inset: 0 !important; z-index: 1; border-radius: 50%; background: radial-gradient(circle at 31% 25%, rgba(255,255,255,.26), transparent 27%), radial-gradient(circle at 74% 72%, rgba(0,0,0,.62), transparent 63%), linear-gradient(90deg, transparent 35%, rgba(0,0,0,.12) 66%, rgba(0,0,0,.4) 100%); box-shadow: inset -18px -12px 24px rgba(0,0,0,.42), inset 8px 6px 14px rgba(255,255,255,.16); pointer-events: none; animation: mpx-moon-shade 5.4s linear infinite !important; }
@keyframes mpx-ring-progress { from { --mpx-ring-progress: 0deg; } to { --mpx-ring-progress: 360deg; } }
@keyframes mpx-intro-exit { 0%, 88% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes mpx-moon-roll { from { --mpx-moon-angle: 0deg; transform: scale(1) rotateY(0deg); } to { --mpx-moon-angle: 360deg; transform: scale(1) rotateY(360deg); } }
@keyframes mpx-moon-orbit { to { transform: rotate(270deg); } }
@keyframes mpx-moon-glow { 0%,100% { opacity: .35; transform: rotate(0deg); } 50% { opacity: .95; transform: rotate(180deg); } }
@keyframes mpx-moon-shade { 0%,100% { opacity: .92; } 50% { opacity: .68; } }
@media (prefers-reduced-motion: reduce) {
.intro-moon { animation: none !important; }
.intro-moon::before, .intro-moon::after { animation: none !important; }
}
.text-link span::before,
.founder-cta span::before,
.fit-result-link span::before,
.investment-cta span::before,
.chat-whatsapp-link span::before,
.chat-contact-link span::before,
.growth-footer a span::before,
.demo-open::before,
.nav-contact b::before,
.demo-card b::before { width: 11px; transform: rotate(-45deg); }
.text-link span::after,
.founder-cta span::after,
.fit-result-link span::after,
.investment-cta span::after,
.chat-whatsapp-link span::after,
.chat-contact-link span::after,
.growth-footer a span::after,
.demo-open::after,
.nav-contact b::after,
.demo-card b::after { width: 7px; height: 7px; }
.text-link span,
.founder-cta span,
.fit-result-link span,
.investment-cta span,
.chat-whatsapp-link span,
.chat-contact-link span,
.growth-footer a span,
.demo-open,
.nav-contact b,
.demo-card b { width: 16px; height: 16px; margin-left: 4px; }
.growth-card-link span,
.service-link span,
.payment-option span,
.payment-secondary span { width: 16px !important; height: 16px !important; flex-basis: 16px !important; margin-left: 4px !important; font-size: 0 !important; }
.growth-card-link span::before,
.service-link span::before,
.payment-option span::before,
.payment-secondary span::before { width: 11px !important; }
.growth-card-link span::after,
.service-link span::after,
.payment-option span::after,
.payment-secondary span::after { width: 7px !important; height: 7px !important; }
.intro-moon {
background-image: radial-gradient(circle at 29% 25%, rgba(255,255,255,.96) 0 4%, transparent 4.5%), radial-gradient(circle at 64% 35%, rgba(76,83,87,.32) 0 8%, transparent 8.8%), radial-gradient(circle at 40% 67%, rgba(78,84,87,.26) 0 6%, transparent 6.8%), radial-gradient(circle at 72% 72%, rgba(255,255,255,.2) 0 5%, transparent 5.8%), radial-gradient(circle at 31% 24%, #f3f1e8 0%, #b9bcba 47%, #656d72 78%, #3e474d 100%) !important;
background-size: 100% 100% !important;
background-position: center !important;
background-repeat: no-repeat !important;
box-shadow: inset -22px -14px 30px rgba(0,0,0,.48), inset 9px 7px 18px rgba(255,255,255,.18) !important;
}
.intro-moon::before { inset: -1px !important; }
.intro-moon::before {
inset: -1px !important;
background: conic-gradient(from -90deg, #b9d9e8 0deg, #ffffff var(--mpx-ring-progress), transparent var(--mpx-ring-progress), transparent 360deg) !important;
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px)) !important;
mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - .5px)) !important;
transform: rotateY(calc(var(--mpx-moon-angle) * -1)) !important;
animation: mpx-ring-progress 5.6s linear forwards !important;
}
.intro-moon::after { box-shadow: inset -18px -12px 24px rgba(0,0,0,.42), inset 8px 6px 14px rgba(255,255,255,.16) !important; }
/* The loader is a fixed progress ring; the moon texture rolls inside the orb. */
.intro-moon {
background-image: linear-gradient(145deg,rgba(4,6,10,.02),rgba(4,6,10,.16)), url('https://images.unsplash.com/photo-1532693322450-2cb5c511067d?auto=format&fit=crop&w=900&q=90'), radial-gradient(circle at 31% 24%, #f7f5eb 0%, #b4b8b7 48%, #4d5961 100%) !important;
background-size: cover, cover, 100% 100% !important;
background-position: center, center, center !important;
box-shadow: inset -22px -14px 30px rgba(0,0,0,.48), inset 9px 7px 18px rgba(255,255,255,.18) !important;
transform: none !important;
animation: none !important;
}
.intro-moon::before {
inset: 0 !important;
transform: none !important;
background: conic-gradient(from -90deg, #b9d9e8 0deg, #ffffff var(--mpx-ring-progress), transparent var(--mpx-ring-progress), transparent 360deg) !important;
animation: mpx-ring-progress 5.6s linear forwards !important;
}
.intro-moon::after {
inset: 0 !important;
display: block !important;
border-radius: 50%;
background-image: radial-gradient(circle at 30% 23%, rgba(255,255,255,.22), transparent 25%), radial-gradient(ellipse at 78% 70%, rgba(0,0,0,.72), transparent 60%), linear-gradient(90deg, transparent 32%, rgba(0,0,0,.08) 48%, rgba(0,0,0,.52) 100%) !important;
background-size: 100% 100%, 100% 100%, 100% 100% !important;
background-position: center, center, center !important;
background-repeat: no-repeat !important;
box-shadow: inset -22px -14px 30px rgba(0,0,0,.44), inset 9px 7px 18px rgba(255,255,255,.14) !important;
animation: mpx-globe-texture 5.4s linear infinite !important;
}
@keyframes mpx-globe-texture {
0%, 100% { background-position: center, center, center, 50% center; }
50% { background-position: center, center, center, 0% center; }
}
.text-link span,
.growth-card-link span,
.service-link span,
.payment-option span,
.payment-secondary span,
.founder-cta span,
.fit-result-link span,
.investment-cta span,
.chat-whatsapp-link span,
.chat-contact-link span,
.growth-footer a span,
.nav-contact b,
.demo-card b { width: 15px !important; height: 15px !important; flex: 0 0 15px !important; margin-left: 6px !important; }
.text-link span::before,
.growth-card-link span::before,
.service-link span::before,
.payment-option span::before,
.payment-secondary span::before,
.founder-cta span::before,
.fit-result-link span::before,
.investment-cta span::before,
.chat-whatsapp-link span::before,
.chat-contact-link span::before,
.growth-footer a span::before,
.nav-contact b::before,
.demo-card b::before { top: 4px !important; left: 4px !important; width: 6px !important; height: 6px !important; border: 0 !important; border-radius: 50%; background: currentColor !important; transform: none !important; }
.text-link span::after,
.growth-card-link span::after,
.service-link span::after,
.payment-option span::after,
.payment-secondary span::after,
.founder-cta span::after,
.fit-result-link span::after,
.investment-cta span::after,
.chat-whatsapp-link span::after,
.chat-contact-link span::after,
.growth-footer a span::after,
.nav-contact b::after,
.demo-card b::after { display: none !important; }
/* ═══ mpx-studio-ux-hardening.css ═══ */
/* Interaction hardening: preserve the visual system while making keyboard and small-screen paths reliable. */
:where(button, a, input, textarea, summary):focus-visible {
outline: 2px solid #d7c19a;
outline-offset: 4px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.contact-form small {
display: block;
margin-top: 3px;
color: #69747b;
font: 11px/1.5 var(--sans);
letter-spacing: 0;
text-transform: none;
}
.fit-progress[role="progressbar"] { min-width: 0; }
.fit-question[hidden] { display: none; }
.fit-result[hidden] { display: none; }
.fit-options button,
.chat-quick,
.chat-window-input button,
.menu-toggle { min-height: 44px; }
.chat-window {
max-height: min(680px, calc(100dvh - 104px));
}
.chat-window-body {
overscroll-behavior: contain;
}
.demo-nojs {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 24px;
color: #c9b99b;
text-align: center;
}
.demo-nojs a {
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 760px) {
.site-nav {
max-height: calc(100dvh - 72px);
overflow-y: auto;
overscroll-behavior: contain;
}
.chat-widget {
right: max(12px, env(safe-area-inset-right));
bottom: max(12px, env(safe-area-inset-bottom));
}
.chat-window {
right: 0;
width: min(390px, calc(100vw - 24px));
max-height: calc(100dvh - 92px);
}
.chat-window-input {
padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.contact-form input,
.contact-form textarea {
font-size: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* ─────────────────────────────────────────────────────────────
Twee overlap-defecten in de hero, gemeten op 1280x900
───────────────────────────────────────────────────────────── */
/* 1. De vaste WhatsApp-knop (links onder) liep over de locatietekst in de
hero-footer heen en dekte de "M" van Maastricht af (8px overlap).
De tekst wijkt nu uit zodat beide volledig leesbaar blijven. */
/* De knop is 50px breed en staat op left:22px, dus zijn rechterrand ligt op 72px.
De tekst moet op elke breedte op minstens 92px beginnen. Omdat .hero-footer zelf
een variabele left heeft, wordt de padding daarop berekend in plaats van vast. */
.hero-footer {
padding-left: max(0px, calc(92px - clamp(24px, 5vw, 72px)));
}
/* Onder 760px staat de knop op left:14px, dus rechterrand op 64px. */
@media (max-width: 760px) {
.hero-footer {
padding-left: max(0px, calc(84px - 24px));
}
}
/* 2. De scroll-percentage indicator stond rechts onderin de header en kwam
daardoor onder de "Bespreek je project"-knop uit, wat als losse tekst
overkwam. Hij staat nu links, onder het wordmark, waar geen enkel
element mee kan botsen. */
.scroll-status {
right: auto;
left: clamp(24px, 5vw, 72px);
}
@media (max-width: 760px) {
.scroll-status {
right: auto;
left: 24px;
}
}
/* ═══ mpx-studio-revenue-cro.css ═══ */
/* ═════════════════════════════════════════════════════════════════════
MPX Studio — Revenue, Conversion & High-Ticket CRO Enhancements
═════════════════════════════════════════════════════════════════════ */
/* ── 1. Trust & Performance Metric Strip ── */
.trust-stats-strip {
background: linear-gradient(180deg, #05070b 0%, #0c131c 100%);
border-top: 1px solid rgba(201, 185, 155, 0.16);
border-bottom: 1px solid rgba(201, 185, 155, 0.16);
padding: clamp(36px, 5vw, 56px) clamp(24px, 8vw, 120px);
position: relative;
z-index: 2;
}
.trust-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 3vw, 40px);
max-width: 1280px;
margin: 0 auto;
}
.trust-stat-item {
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
padding-right: 20px;
border-right: 1px solid rgba(245, 244, 240, 0.1);
}
.trust-stat-item:last-child {
border-right: none;
padding-right: 0;
}
.trust-stat-number {
font-family: var(--display);
font-size: clamp(32px, 3.8vw, 52px);
font-weight: 600;
color: #fffdf7;
line-height: 1;
letter-spacing: -0.02em;
}
.trust-stat-number i {
color: var(--warm);
font-style: italic;
font-weight: 400;
}
.trust-stat-label {
font-family: var(--label);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--warm);
font-weight: 600;
}
.trust-stat-desc {
font-family: var(--sans);
font-size: 13px;
color: #a2abb4;
line-height: 1.5;
margin: 0;
}
/* ── 2. ROI & Value Calculator Section ── */
.roi-section {
padding: clamp(80px, 10vw, 140px) clamp(24px, 8vw, 120px);
background: radial-gradient(circle at 80% 20%, rgba(20, 42, 67, 0.45), transparent 60%), #080a0d;
color: var(--white);
border-bottom: 1px solid rgba(245, 244, 240, 0.12);
position: relative;
}
.roi-layout {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: clamp(40px, 6vw, 80px);
max-width: 1280px;
margin: 50px auto 0;
align-items: start;
}
.roi-copy h2 {
font-size: clamp(36px, 4.8vw, 64px);
margin: 18px 0 24px;
}
.roi-copy p {
color: #b0b9c2;
font-size: 15px;
line-height: 1.8;
margin-bottom: 24px;
}
.roi-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.roi-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(201, 185, 155, 0.08);
border: 1px solid rgba(201, 185, 155, 0.25);
border-radius: 4px;
font-family: var(--label);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--warm);
text-transform: uppercase;
}
.roi-badge span {
color: #4ade80;
}
.roi-card {
background: #0f1622;
border: 1px solid rgba(201, 185, 155, 0.28);
border-radius: 8px;
padding: clamp(28px, 4vw, 44px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.roi-presets-group {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(245, 244, 240, 0.1);
}
.roi-presets-label {
display: block;
font-family: var(--label);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--warm);
margin-bottom: 10px;
font-weight: 600;
}
.roi-presets-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.roi-preset-btn {
background: rgba(245, 244, 240, 0.05);
border: 1px solid rgba(245, 244, 240, 0.15);
color: #cbd5e1;
padding: 6px 12px;
border-radius: 4px;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
display: inline-flex;
align-items: center;
gap: 6px;
}
.roi-preset-btn:hover {
background: rgba(201, 185, 155, 0.15);
border-color: rgba(201, 185, 155, 0.4);
color: #fffdf7;
}
.roi-preset-btn.is-active {
background: var(--warm);
border-color: var(--warm);
color: #080a0d;
font-weight: 700;
box-shadow: 0 4px 12px rgba(201, 185, 155, 0.25);
}
.roi-control-group {
margin-bottom: 26px;
}
.roi-control-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.roi-control-header label {
font-family: var(--label);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #d2d9de;
font-weight: 600;
}
.roi-val-display {
font-family: var(--sans);
font-size: 18px;
font-weight: 700;
color: var(--warm);
}
.roi-slider {
width: 100%;
height: 6px;
border-radius: 3px;
background: rgba(245, 244, 240, 0.15);
outline: none;
-webkit-appearance: none;
appearance: none;
accent-color: #d7c19a;
cursor: pointer;
}
.roi-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #d7c19a;
border: 2px solid #080a0d;
cursor: grab;
box-shadow: 0 0 10px rgba(215, 193, 154, 0.5);
}
.roi-results-box {
margin-top: 34px;
padding: 24px;
background: rgba(8, 10, 13, 0.7);
border: 1px solid rgba(201, 185, 155, 0.2);
border-radius: 6px;
}
.roi-results-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 22px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(245, 244, 240, 0.1);
}
.roi-metric small {
display: block;
font-family: var(--label);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8c96a0;
margin-bottom: 6px;
}
.roi-metric strong {
font-family: var(--display);
font-size: clamp(24px, 2.5vw, 34px);
color: #fffdf7;
font-weight: 600;
}
.roi-metric.highlight strong {
color: #4ade80;
}
.roi-verdict {
font-family: var(--sans);
font-size: 13px;
color: #cbd5e1;
line-height: 1.6;
margin-bottom: 22px;
}
.roi-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.roi-cta-button {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--warm);
color: #080a0d;
font-family: var(--label);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 14px 24px;
border-radius: 3px;
border: none;
cursor: pointer;
transition: background 0.25s ease, transform 0.2s ease;
text-decoration: none;
}
.roi-cta-button:hover {
background: #fff;
transform: translateY(-2px);
}
.roi-secondary-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: #e2e8f0;
font-family: var(--label);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 13px 20px;
border: 1px solid rgba(245, 244, 240, 0.25);
border-radius: 3px;
text-decoration: none;
transition: border-color 0.25s, color 0.25s;
cursor: pointer;
}
.roi-secondary-btn:hover {
border-color: var(--warm);
color: var(--warm);
}
.roi-copy-feedback {
display: block;
font-size: 12px;
color: var(--warm);
margin-top: 8px;
font-weight: 600;
text-align: center;
}
/* ── 3. Interactive Project Configurator & Quote Builder ── */
.configurator-section {
padding: clamp(80px, 10vw, 140px) clamp(24px, 8vw, 120px);
background: #090e16;
color: var(--white);
border-bottom: 1px solid rgba(245, 244, 240, 0.12);
position: relative;
}
.configurator-heading {
max-width: 800px;
margin-bottom: 50px;
}
.configurator-heading h2 {
font-size: clamp(34px, 4.5vw, 58px);
margin: 16px 0;
}
.configurator-heading p {
color: #b0b9c2;
font-size: 15px;
line-height: 1.8;
}
.config-builder-wrap {
display: grid;
grid-template-columns: 1.3fr 0.9fr;
gap: clamp(30px, 5vw, 60px);
max-width: 1280px;
margin: 0 auto;
align-items: start;
}
.config-options-box {
display: flex;
flex-direction: column;
gap: 32px;
}
.config-group-title {
font-family: var(--label);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 14px;
display: block;
}
.config-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.config-pill {
background: rgba(245, 244, 240, 0.04);
border: 1px solid rgba(245, 244, 240, 0.15);
color: #cbd5e1;
padding: 12px 18px;
border-radius: 4px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
}
.config-pill:hover {
border-color: var(--warm);
color: #fff;
}
.config-pill.is-selected {
background: rgba(201, 185, 155, 0.15);
border-color: var(--warm);
color: #fffdf7;
font-weight: 600;
}
.config-pill.is-selected::after {
content: "✓";
color: var(--warm);
font-weight: 700;
margin-left: 4px;
}
.config-summary-card {
background: #0f1622;
border: 1px solid var(--warm);
border-radius: 8px;
padding: clamp(28px, 4vw, 36px);
position: sticky;
top: 100px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.config-summary-title {
font-family: var(--display);
font-size: 24px;
color: #fffdf7;
margin-bottom: 6px;
}
.config-summary-sub {
font-size: 12px;
color: #8c96a0;
margin-bottom: 20px;
display: block;
}
.config-estimate-box {
background: rgba(8, 10, 13, 0.8);
border: 1px solid rgba(201, 185, 155, 0.25);
border-radius: 6px;
padding: 20px;
margin-bottom: 22px;
}
.config-estimate-price {
font-family: var(--display);
font-size: 34px;
font-weight: 700;
color: var(--warm);
display: block;
margin-bottom: 4px;
}
.config-estimate-time {
font-family: var(--label);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #94a3b8;
}
.config-items-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.config-items-list li {
font-size: 13px;
color: #cbd5e1;
padding: 8px 0;
border-bottom: 1px solid rgba(245, 244, 240, 0.08);
display: flex;
justify-content: space-between;
}
.config-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ── 4. Before / After Case Transformation Visualizer ── */
.transformation-section {
padding: clamp(80px, 10vw, 130px) clamp(24px, 8vw, 120px);
background: #05070b;
color: var(--white);
border-bottom: 1px solid rgba(245, 244, 240, 0.12);
}
.trans-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 4vw, 40px);
max-width: 1280px;
margin: 40px auto 0;
}
.trans-card {
border-radius: 6px;
padding: 34px 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.trans-card.before {
background: #0e1218;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.trans-card.after {
background: #0f1c2d;
border: 1px solid var(--warm);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.trans-badge {
font-family: var(--label);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
display: inline-block;
margin-bottom: 16px;
}
.trans-card.before .trans-badge {
color: #f87171;
}
.trans-card.after .trans-badge {
color: #4ade80;
}
.trans-card h3 {
font-family: var(--display);
font-size: 26px;
margin-bottom: 14px;
}
.trans-stats {
list-style: none;
padding: 0;
margin: 20px 0 0;
border-top: 1px solid rgba(245, 244, 240, 0.1);
padding-top: 20px;
}
.trans-stats li {
font-size: 14px;
color: #cbd5e1;
margin-bottom: 12px;
display: flex;
justify-content: space-between;
}
.trans-stats li span:last-child {
font-weight: 700;
}
.trans-card.before .trans-stats li span:last-child {
color: #fca5a5;
}
.trans-card.after .trans-stats li span:last-child {
color: #86efac;
}
/* ── 5. Client Testimonials & Social Proof Strip ── */
.testimonials-section {
padding: clamp(80px, 10vw, 130px) clamp(24px, 8vw, 120px);
background: radial-gradient(circle at 20% 80%, rgba(20, 42, 67, 0.35), transparent 60%), #080a0d;
border-bottom: 1px solid rgba(245, 244, 240, 0.12);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 36px);
max-width: 1280px;
margin: 40px auto 0;
}
.testimonial-card {
background: #0d1624;
border: 1px solid rgba(201, 185, 155, 0.2);
border-radius: 6px;
padding: 32px 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.25s ease, border-color 0.25s ease;
}
.testimonial-card:hover {
transform: translateY(-4px);
border-color: var(--warm);
}
.testimonial-stars {
color: var(--warm);
font-size: 16px;
letter-spacing: 2px;
margin-bottom: 16px;
}
.testimonial-quote {
font-family: var(--sans);
font-size: 14px;
color: #cbd5e1;
line-height: 1.7;
font-style: italic;
margin-bottom: 24px;
}
.testimonial-author {
display: flex;
flex-direction: column;
gap: 3px;
border-top: 1px solid rgba(245, 244, 240, 0.1);
padding-top: 16px;
}
.testimonial-author strong {
font-family: var(--display);
font-size: 16px;
color: #fff;
}
.testimonial-author span {
font-family: var(--label);
font-size: 11px;
color: var(--warm);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ── 6. Interactive 15-Minute Strategy Session Booker ── */
.strategy-booker-section {
padding: clamp(80px, 10vw, 130px) clamp(24px, 8vw, 120px);
background: #0c1420;
border-bottom: 1px solid rgba(245, 244, 240, 0.12);
}
.strategy-booker-card {
background: #080c12;
border: 1px solid var(--warm);
border-radius: 8px;
padding: clamp(32px, 5vw, 50px);
max-width: 1000px;
margin: 40px auto 0;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.booker-step {
margin-bottom: 32px;
}
.booker-step:last-of-type {
margin-bottom: 24px;
}
.booker-step-title {
font-family: var(--label);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.booker-grid-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.booker-days-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.booker-day-btn {
background: rgba(245, 244, 240, 0.03);
border: 1px solid rgba(245, 244, 240, 0.12);
color: #94a3b8;
padding: 12px 14px;
border-radius: 4px;
font-family: var(--sans);
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
}
.booker-day-btn strong {
display: block;
color: #f5f4f0;
font-size: 13px;
margin-bottom: 2px;
}
.booker-day-btn small {
font-size: 11px;
color: #64748b;
}
.booker-day-btn:hover {
border-color: rgba(201, 185, 155, 0.5);
color: #fff;
}
.booker-day-btn.is-active {
background: rgba(201, 185, 155, 0.15);
border-color: var(--warm);
box-shadow: 0 0 16px rgba(201, 185, 155, 0.1);
}
.booker-day-btn.is-active strong {
color: #fffdf7;
}
.booker-day-btn.is-active small {
color: var(--warm);
}
.booker-times-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 10px;
}
.booker-time-btn {
background: rgba(245, 244, 240, 0.03);
border: 1px solid rgba(245, 244, 240, 0.12);
color: #cbd5e1;
padding: 10px 12px;
border-radius: 4px;
font-family: var(--mono);
font-size: 12px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
}
.booker-time-btn:hover {
border-color: var(--warm);
color: #fff;
}
.booker-time-btn.is-active {
background: var(--warm);
color: #07090d;
font-weight: 700;
border-color: var(--warm);
}
.booker-option-btn {
background: rgba(245, 244, 240, 0.04);
border: 1px solid rgba(245, 244, 240, 0.15);
color: #cbd5e1;
padding: 14px 18px;
border-radius: 4px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: all 0.2s ease;
}
.booker-option-btn:hover {
border-color: var(--warm);
color: #fff;
}
.booker-option-btn.is-active {
background: rgba(201, 185, 155, 0.16);
border-color: var(--warm);
color: #fffdf7;
font-weight: 600;
}
.booker-inputs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.booker-input-group label {
display: block;
font-family: var(--label);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #94a3b8;
margin-bottom: 6px;
}
.booker-input-group input {
width: 100%;
padding: 12px 14px;
background: rgba(245, 244, 240, 0.05);
border: 1px solid rgba(245, 244, 240, 0.16);
border-radius: 4px;
color: #fff;
font-family: var(--sans);
font-size: 14px;
transition: border-color 0.2s ease;
}
.booker-input-group input:focus {
outline: none;
border-color: var(--warm);
background: rgba(245, 244, 240, 0.08);
}
.booker-final-action {
background: #0f1a28;
border: 1px solid rgba(201, 185, 155, 0.3);
border-radius: 6px;
padding: 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-top: 24px;
}
.booker-summary-badge {
font-size: 14px;
color: #f5f4f0;
}
.booker-summary-badge strong {
color: var(--warm);
display: block;
margin-top: 2px;
}
.booker-btn-confirm {
background: var(--warm);
color: #07090d;
font-family: var(--sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 14px 26px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.booker-btn-confirm:hover {
background: #fff;
box-shadow: 0 4px 20px rgba(201, 185, 155, 0.3);
}
.booker-confirmation-modal {
background: rgba(201, 185, 155, 0.1);
border: 1px solid var(--warm);
border-radius: 6px;
padding: 20px;
margin-top: 20px;
text-align: center;
}
.booker-confirmation-modal h4 {
font-family: var(--serif);
font-size: 20px;
color: #fffdf7;
margin-bottom: 8px;
}
.booker-confirmation-modal p {
color: #cbd5e1;
font-size: 14px;
margin-bottom: 14px;
}
/* ── 8. Exit-Intent & Value Lead Magnet Modal ── */
.exit-intent-overlay {
position: fixed;
inset: 0;
background: rgba(5, 7, 11, 0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
padding: 20px;
}
.exit-intent-overlay.is-visible {
opacity: 1;
pointer-events: auto;
}
.exit-intent-dialog {
background: #090e16;
border: 1px solid var(--warm);
border-radius: 8px;
padding: clamp(28px, 5vw, 44px);
max-width: 540px;
width: 100%;
position: relative;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85);
transform: scale(0.95);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.exit-intent-overlay.is-visible .exit-intent-dialog {
transform: scale(1);
}
.exit-intent-close {
position: absolute;
top: 14px;
right: 14px;
background: none;
border: none;
color: #94a3b8;
font-size: 28px;
line-height: 1;
cursor: pointer;
padding: 6px;
transition: color 0.2s;
}
.exit-intent-close:hover {
color: #fff;
}
.exit-badge {
display: inline-block;
background: rgba(201, 185, 155, 0.18);
border: 1px solid var(--warm);
color: #fffdf7;
font-family: var(--label);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 3px;
margin-bottom: 16px;
}
.exit-intent-dialog h3 {
font-family: var(--serif);
font-size: clamp(22px, 3.5vw, 28px);
color: #f5f4f0;
font-weight: 400;
line-height: 1.25;
margin-bottom: 12px;
}
.exit-intent-dialog h3 i {
font-style: italic;
color: var(--warm);
}
.exit-intent-dialog p {
color: #cbd5e1;
font-size: 14px;
line-height: 1.6;
margin-bottom: 22px;
}
.exit-checklist-perks {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
display: grid;
gap: 8px;
}
.exit-checklist-perks li {
display: flex;
align-items: center;
gap: 10px;
color: #e2e8f0;
font-size: 13px;
}
.exit-checklist-perks li span {
color: var(--warm);
font-weight: 700;
}
.exit-form-row {
display: grid;
gap: 10px;
margin-bottom: 12px;
}
.exit-form-row input {
padding: 12px 16px;
background: rgba(245, 244, 240, 0.06);
border: 1px solid rgba(245, 244, 240, 0.2);
border-radius: 4px;
color: #fff;
font-family: var(--sans);
font-size: 14px;
}
.exit-form-row input:focus {
outline: none;
border-color: var(--warm);
background: rgba(245, 244, 240, 0.1);
}
.exit-btn-download {
background: var(--warm);
color: #07090d;
font-family: var(--sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 14px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
width: 100%;
}
.exit-btn-download:hover {
background: #fff;
box-shadow: 0 4px 24px rgba(201, 185, 155, 0.35);
}
.exit-privacy-note {
font-size: 11px;
color: #64748b;
text-align: center;
display: block;
margin-top: 10px;
}
/* ── 7. Aviation Guarantees Grid ── */
.guarantee-section {
padding: clamp(60px, 8vw, 100px) clamp(24px, 8vw, 120px);
background: linear-gradient(180deg, #090e16 0%, #05070b 100%);
border-bottom: 1px solid rgba(245, 244, 240, 0.12);
}
.guarantee-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 36px);
max-width: 1280px;
margin: 40px auto 0;
}
.guarantee-card {
background: #0d1522;
border: 1px solid rgba(201, 185, 155, 0.22);
border-radius: 6px;
padding: 30px 24px;
}
.guarantee-icon {
font-size: 28px;
color: var(--warm);
margin-bottom: 14px;
display: block;
}
.guarantee-card h4 {
font-family: var(--display);
font-size: 21px;
color: #fffdf7;
margin: 0 0 10px;
}
.guarantee-card p {
font-size: 13px;
color: #a4afba;
line-height: 1.6;
margin: 0;
}
/* ── 8. Sticky Quick-Action Conversion Bar ── */
.sticky-cro-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(8, 10, 13, 0.94);
backdrop-filter: blur(14px);
border-top: 1px solid rgba(201, 185, 155, 0.28);
padding: 12px clamp(20px, 4vw, 40px);
z-index: 999;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
transform: translateY(110%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sticky-cro-bar.is-visible {
transform: translateY(0);
}
.sticky-bar-copy {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--sans);
font-size: 13px;
color: #cbd5e1;
}
.sticky-bar-copy strong {
color: #fffdf7;
}
.sticky-bar-badge {
background: rgba(201, 185, 155, 0.15);
color: var(--warm);
font-family: var(--label);
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 3px;
text-transform: uppercase;
}
.sticky-bar-actions {
display: flex;
align-items: center;
gap: 12px;
}
.sticky-btn-primary {
background: var(--warm);
color: #080a0d;
font-family: var(--label);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 10px 18px;
border-radius: 3px;
text-decoration: none;
white-space: nowrap;
}
.sticky-btn-primary:hover {
background: #fff;
}
.sticky-btn-wa {
background: #25d366;
color: #05190c;
font-family: var(--label);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 10px 16px;
border-radius: 3px;
text-decoration: none;
white-space: nowrap;
}
/* ── 9. Investment Tabs & Retainers ── */
.investment-tabs {
display: flex;
justify-content: center;
gap: 12px;
margin: 36px 0 44px;
}
.investment-tab-btn {
background: rgba(245, 244, 240, 0.05);
border: 1px solid rgba(245, 244, 240, 0.15);
color: #a2abb4;
font-family: var(--label);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 12px 24px;
border-radius: 30px;
cursor: pointer;
transition: all 0.25s ease;
}
.investment-tab-btn.is-active {
background: var(--warm);
color: #080a0d;
border-color: var(--warm);
font-weight: 700;
}
.retainer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 36px);
margin-top: 20px;
}
.retainer-card {
background: #0d1725;
border: 1px solid rgba(245, 244, 240, 0.15);
border-radius: 6px;
padding: 34px 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
transition: border-color 0.3s, transform 0.3s;
}
.retainer-card.featured {
background: #111e30;
border-color: var(--warm);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.retainer-card:hover {
transform: translateY(-5px);
border-color: var(--warm);
}
.retainer-tag {
position: absolute;
top: -12px;
right: 24px;
background: var(--warm);
color: #080a0d;
font-family: var(--label);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 12px;
}
.retainer-num {
font-family: var(--label);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--warm);
text-transform: uppercase;
}
.retainer-card h3 {
font-family: var(--display);
font-size: 24px;
margin: 12px 0 16px;
color: #fffdf7;
}
.retainer-price {
display: block;
font-family: var(--sans);
font-size: 28px;
font-weight: 700;
color: #fffdf7;
margin-bottom: 16px;
}
.retainer-price span {
font-size: 14px;
font-weight: 400;
color: #8f9aa4;
}
.retainer-features {
list-style: none;
padding: 0;
margin: 20px 0 28px;
border-top: 1px solid rgba(245, 244, 240, 0.1);
padding-top: 20px;
}
.retainer-features li {
font-family: var(--sans);
font-size: 13px;
color: #b8c2cc;
margin-bottom: 11px;
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.5;
}
.retainer-features li span {
color: var(--warm);
font-weight: 700;
}
.retainer-cta {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 8px;
width: 100%;
padding: 12px 18px;
background: rgba(245, 244, 240, 0.08);
border: 1px solid rgba(245, 244, 240, 0.2);
color: #fffdf7;
font-family: var(--label);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 3px;
text-decoration: none;
transition: all 0.25s ease;
}
.retainer-card.featured .retainer-cta,
.retainer-cta:hover {
background: var(--warm);
color: #080a0d;
border-color: var(--warm);
}
/* ── 10. Discovery Call Banner ── */
.schedule-banner {
background: #0c131d;
border: 1px solid rgba(201, 185, 155, 0.25);
border-radius: 6px;
padding: clamp(24px, 4vw, 36px);
margin: 40px 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.schedule-banner-text h4 {
font-family: var(--display);
font-size: 22px;
color: #fffdf7;
margin: 0 0 6px;
}
.schedule-banner-text p {
font-size: 14px;
color: #a4afba;
margin: 0;
}
.schedule-banner-action {
display: inline-flex;
align-items: center;
gap: 10px;
background: #25d366;
color: #06190e;
font-family: var(--label);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 13px 22px;
border-radius: 4px;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.2s, transform 0.2s;
}
.schedule-banner-action:hover {
opacity: 0.92;
transform: translateY(-2px);
}
/* ── 11. Print Styles for Instant Proposal Generation ── */
@media print {
body {
background: #fff !important;
color: #000 !important;
}
.site-header, .site-footer, .sticky-cro-bar, .whatsapp-float, .chat-widget, .hero, .demo-section, .audit-section, .roi-section, .fit-section, .founder-section {
display: none !important;
}
.configurator-section {
background: #fff !important;
color: #000 !important;
padding: 20px !important;
}
.config-summary-card {
border: 2px solid #000 !important;
background: #fff !important;
color: #000 !important;
box-shadow: none !important;
}
}
/* ── 13. Hero Capacity & Scarcity Badge ── */
.hero-capacity-pill {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(16, 185, 129, 0.08);
border: 1px solid rgba(16, 185, 129, 0.28);
padding: 6px 14px;
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
color: #34d399;
letter-spacing: 0.04em;
margin-bottom: 18px;
backdrop-filter: blur(4px);
}
.capacity-dot {
width: 7px;
height: 7px;
background: #10b981;
border-radius: 50%;
box-shadow: 0 0 10px #10b981;
animation: pulseGreen 2s infinite ease-in-out;
}
@keyframes pulseGreen {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.6; }
}
/* ── 14. Demo Device Switcher (Desktop / Tablet / Mobile) ── */
.browser-device-toggle {
display: flex;
align-items: center;
gap: 4px;
background: rgba(245, 244, 240, 0.06);
border: 1px solid rgba(245, 244, 240, 0.12);
border-radius: 4px;
padding: 2px;
}
.device-btn {
background: transparent;
border: none;
color: #94a3b8;
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 3px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all 0.2s ease;
}
.device-btn:hover {
color: #f5f4f0;
}
.device-btn.is-active {
background: rgba(201, 185, 155, 0.22);
color: #fffdf7;
font-weight: 700;
}
.demo-frame-wrap {
transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin 0.35s ease, border-radius 0.35s ease;
margin: 0 auto;
}
.demo-frame-wrap[data-device="desktop"] {
max-width: 100%;
}
.demo-frame-wrap[data-device="tablet"] {
max-width: 768px;
border-left: 2px solid rgba(201, 185, 155, 0.4);
border-right: 2px solid rgba(201, 185, 155, 0.4);
}
.demo-frame-wrap[data-device="mobile"] {
max-width: 390px;
border-left: 3px solid rgba(201, 185, 155, 0.5);
border-right: 3px solid rgba(201, 185, 155, 0.5);
border-radius: 20px;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}
/* ── 15. Word-of-Mouth & Viral Referral Engine ── */
.referral-section {
padding: clamp(80px, 10vw, 130px) clamp(24px, 8vw, 120px);
background: #080d16;
border-bottom: 1px solid rgba(245, 244, 240, 0.12);
}
.referral-card {
background: linear-gradient(145deg, #0d1726 0%, #06090f 100%);
border: 1px solid var(--warm);
border-radius: 8px;
padding: clamp(32px, 5vw, 54px);
max-width: 1000px;
margin: 40px auto 0;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.referral-dual-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 28px 0;
}
.referral-reward-box {
background: rgba(245, 244, 240, 0.03);
border: 1px solid rgba(245, 244, 240, 0.12);
border-radius: 6px;
padding: 24px;
}
.referral-reward-box.highlight {
background: rgba(201, 185, 155, 0.08);
border-color: rgba(201, 185, 155, 0.4);
}
.referral-reward-box .ref-tag {
display: inline-block;
font-family: var(--label);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 10px;
}
.referral-reward-box .ref-amount {
font-family: var(--serif);
font-size: clamp(28px, 4vw, 38px);
color: #fffdf7;
display: block;
line-height: 1.1;
margin-bottom: 6px;
}
.referral-reward-box p {
color: #94a3b8;
font-size: 13px;
line-height: 1.5;
margin: 0;
}
.referral-toolkit {
background: #090e18;
border: 1px solid rgba(201, 185, 155, 0.25);
border-radius: 6px;
padding: 26px;
margin-top: 24px;
}
.referral-toolkit h4 {
font-family: var(--serif);
font-size: 18px;
color: #f5f4f0;
margin: 0 0 6px 0;
}
.referral-toolkit p {
color: #94a3b8;
font-size: 13px;
margin-bottom: 18px;
}
.referral-input-wrap {
display: flex;
gap: 12px;
margin-bottom: 18px;
}
.referral-input-wrap input {
flex: 1;
padding: 12px 16px;
background: rgba(245, 244, 240, 0.05);
border: 1px solid rgba(245, 244, 240, 0.18);
border-radius: 4px;
color: #fff;
font-family: var(--sans);
font-size: 14px;
}
.referral-input-wrap input:focus {
outline: none;
border-color: var(--warm);
}
.referral-share-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.ref-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
border-radius: 4px;
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
border: none;
}
.ref-share-btn.wa {
background: #25d366;
color: #041407;
}
.ref-share-btn.wa:hover {
background: #2ee06e;
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}
.ref-share-btn.li {
background: #0077b5;
color: #fff;
}
.ref-share-btn.li:hover {
background: #0a8ed4;
box-shadow: 0 4px 16px rgba(0, 119, 181, 0.35);
}
.ref-share-btn.copy {
background: rgba(245, 244, 240, 0.08);
border: 1px solid rgba(245, 244, 240, 0.2);
color: #cbd5e1;
}
.ref-share-btn.copy:hover {
border-color: var(--warm);
color: #fff;
}
.ref-copy-feedback {
font-size: 12px;
color: var(--warm);
text-align: center;
margin-top: 10px;
display: block;
}
/* ── 16. Dynamic Social Proof Activity Toast ── */
.social-proof-toast {
position: fixed;
bottom: 24px;
left: 24px;
background: rgba(8, 13, 20, 0.94);
border: 1px solid var(--warm);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 14px 18px;
border-radius: 6px;
box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65);
max-width: 350px;
z-index: 998;
display: flex;
align-items: flex-start;
gap: 12px;
transform: translateY(140%);
opacity: 0;
pointer-events: none;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.social-proof-toast.is-active {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.social-proof-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(201, 185, 155, 0.15);
border: 1px solid var(--warm);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.social-proof-content {
flex: 1;
}
.social-proof-title {
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
color: #fffdf7;
display: block;
line-height: 1.3;
margin-bottom: 2px;
}
.social-proof-meta {
font-size: 11px;
color: #94a3b8;
display: block;
}
.social-proof-close {
background: none;
border: none;
color: #64748b;
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 0 0 0 6px;
transition: color 0.2s;
}
.social-proof-close:hover {
color: #fff;
}
/* ── 17. Aviation Flight-Readiness Checklist Module ── */
.flight-checklist-section {
padding: clamp(60px, 8vw, 100px) clamp(24px, 8vw, 120px);
background: linear-gradient(180deg, #05070b 0%, #0b111a 100%);
border-bottom: 1px solid rgba(245, 244, 240, 0.12);
}
.flight-checklist-card {
background: #080c14;
border: 1px solid var(--warm);
border-radius: 8px;
padding: clamp(28px, 5vw, 44px);
max-width: 900px;
margin: 36px auto 0;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.flight-checklist-grid {
display: grid;
gap: 12px;
margin: 24px 0;
}
.flight-checklist-item {
background: rgba(245, 244, 240, 0.03);
border: 1px solid rgba(245, 244, 240, 0.12);
border-radius: 4px;
padding: 14px 18px;
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.flight-checklist-item:hover {
background: rgba(245, 244, 240, 0.06);
border-color: rgba(201, 185, 155, 0.4);
}
.flight-checklist-item.is-checked {
background: rgba(201, 185, 155, 0.12);
border-color: var(--warm);
}
.flight-checkbox {
width: 22px;
height: 22px;
border-radius: 4px;
border: 1px solid rgba(245, 244, 240, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: #07090d;
font-weight: 800;
font-size: 13px;
background: transparent;
flex-shrink: 0;
transition: all 0.2s ease;
}
.flight-checklist-item.is-checked .flight-checkbox {
background: var(--warm);
border-color: var(--warm);
}
.flight-check-text {
flex: 1;
}
.flight-check-text strong {
display: block;
font-size: 13px;
color: #f5f4f0;
}
.flight-check-text small {
font-size: 11px;
color: #94a3b8;
}
.flight-score-bar {
background: #0f1926;
border: 1px solid rgba(201, 185, 155, 0.3);
border-radius: 6px;
padding: 18px 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.flight-score-badge {
font-family: var(--sans);
font-size: 13px;
color: #cbd5e1;
}
.flight-score-badge strong {
color: var(--warm);
font-size: 16px;
}
/* ── 18. Case Study Deep-Dive Modal ── */
.case-modal-overlay {
position: fixed;
inset: 0;
background: rgba(5, 7, 11, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
padding: 20px;
}
.case-modal-overlay.is-visible {
opacity: 1;
pointer-events: auto;
}
.case-modal-dialog {
background: #0a1018;
border: 1px solid var(--warm);
border-radius: 8px;
padding: clamp(28px, 5vw, 44px);
max-width: 680px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85);
}
.case-modal-close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
color: #94a3b8;
font-size: 28px;
cursor: pointer;
}
.case-modal-close:hover {
color: #fff;
}
.case-modal-header h3 {
font-family: var(--serif);
font-size: clamp(24px, 4vw, 32px);
color: #fffdf7;
margin: 8px 0 12px;
}
.case-modal-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 20px 0;
}
.case-modal-stat-box {
background: rgba(245, 244, 240, 0.04);
border: 1px solid rgba(245, 244, 240, 0.12);
border-radius: 4px;
padding: 14px;
text-align: center;
}
.case-modal-stat-box strong {
display: block;
font-size: 22px;
color: var(--warm);
font-family: var(--serif);
}
.case-modal-stat-box small {
font-size: 11px;
color: #94a3b8;
}
/* ── 19. Interactive FAQ Search & Categories ── */
.faq-search-wrap {
margin: 24px 0 20px;
position: relative;
}
.faq-search-input {
width: 100%;
padding: 14px 20px 14px 44px;
background: rgba(245, 244, 240, 0.04);
border: 1px solid rgba(245, 244, 240, 0.18);
border-radius: 6px;
color: #fff;
font-family: var(--sans);
font-size: 14px;
box-sizing: border-box;
transition: all 0.2s ease;
}
.faq-search-input:focus {
outline: none;
border-color: var(--warm);
background: rgba(245, 244, 240, 0.08);
}
.faq-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 15px;
pointer-events: none;
}
.faq-category-pills {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.faq-cat-pill {
background: rgba(245, 244, 240, 0.04);
border: 1px solid rgba(245, 244, 240, 0.12);
color: #94a3b8;
padding: 8px 16px;
border-radius: 20px;
font-family: var(--label);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease;
}
.faq-cat-pill:hover {
border-color: var(--warm);
color: #fff;
}
.faq-cat-pill.is-active {
background: var(--warm);
color: #07090d;
border-color: var(--warm);
}
/* ── 20. Live Speed & Deloitte Research Benchmark Box ── */
.speed-research-strip {
background: #090e18;
border: 1px solid rgba(201, 185, 155, 0.25);
border-radius: 6px;
padding: 24px clamp(20px, 4vw, 36px);
margin-top: 32px;
}
.speed-research-heading {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.speed-research-heading span {
background: rgba(201, 185, 155, 0.15);
color: var(--warm);
font-family: var(--label);
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 3px;
text-transform: uppercase;
}
.speed-research-heading strong {
color: #fffdf7;
font-family: var(--serif);
font-size: 17px;
}
.speed-stats-comparison {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.speed-stat-item {
background: rgba(245, 244, 240, 0.03);
border: 1px solid rgba(245, 244, 240, 0.1);
border-radius: 4px;
padding: 16px;
text-align: center;
}
.speed-stat-item .stat-num {
font-family: var(--serif);
font-size: 26px;
color: var(--warm);
display: block;
line-height: 1.1;
margin-bottom: 4px;
}
.speed-stat-item p {
font-size: 12px;
color: #94a3b8;
margin: 0;
line-height: 1.4;
}
/* ── 21. WhatsApp Live Status Pill ── */
.whatsapp-float {
position: relative;
}
.whatsapp-float::after {
content: '● Martijn online';
position: absolute;
top: -24px;
right: 0;
background: #0b140e;
border: 1px solid #25d366;
color: #25d366;
font-family: var(--mono);
font-size: 9px;
padding: 2px 8px;
border-radius: 10px;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
/* ── 12. Responsive Rules ── */
@media (max-width: 1024px) {
.speed-stats-comparison {
grid-template-columns: 1fr;
}
.referral-dual-grid {
grid-template-columns: 1fr;
}
.case-modal-stats {
grid-template-columns: 1fr;
}
.flight-score-bar {
flex-direction: column;
align-items: flex-start;
}
.trust-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.trust-stat-item:nth-child(2) {
border-right: none;
}
.roi-layout,
.config-builder-wrap,
.trans-grid,
.testimonials-grid {
grid-template-columns: 1fr;
}
.retainer-grid,
.guarantee-grid {
grid-template-columns: 1fr;
}
.config-summary-card {
position: static;
}
.booker-final-action {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 640px) {
.social-proof-toast {
bottom: 80px;
left: 14px;
right: 14px;
max-width: none;
}
.browser-device-toggle {
display: none;
}
.referral-input-wrap {
flex-direction: column;
}
.referral-share-buttons {
grid-template-columns: 1fr;
}
.trust-stats-grid {
grid-template-columns: 1fr;
}
.trust-stat-item {
border-right: none;
border-bottom: 1px solid rgba(245, 244, 240, 0.1);
padding-bottom: 20px;
padding-right: 0;
}
.trust-stat-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.schedule-banner {
flex-direction: column;
align-items: flex-start;
}
.roi-results-grid {
grid-template-columns: 1fr;
}
.investment-tabs {
flex-direction: column;
}
.sticky-cro-bar {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.sticky-bar-actions {
justify-content: space-between;
}
.sticky-btn-primary, .sticky-btn-wa {
flex: 1;
text-align: center;
}
}
/* ==========================================================================
INTERACTIVE BEFORE / AFTER SPEED & UX SLIDER
========================================================================== */
.trans-slider-container {
margin-top: 36px;
background: #09101d;
border: 1px solid rgba(215, 193, 154, 0.25);
border-radius: 8px;
padding: 24px;
position: relative;
overflow: hidden;
}
.trans-slider-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
}
.trans-slider-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 20px;
color: #fffdf7;
margin: 0;
}
.trans-slider-controls {
display: inline-flex;
gap: 8px;
background: rgba(255, 255, 255, 0.05);
padding: 4px;
border-radius: 4px;
}
.trans-slider-btn {
background: transparent;
border: none;
color: #94a3b8;
font-family: 'Manrope', sans-serif;
font-size: 12px;
font-weight: 700;
padding: 6px 14px;
border-radius: 3px;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.trans-slider-btn.is-active {
background: var(--warm);
color: #080a0d;
}
.trans-split-viewer {
position: relative;
width: 100%;
height: 380px;
border-radius: 6px;
overflow: hidden;
user-select: none;
touch-action: pan-y;
background: #05070b;
}
.trans-panel {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
padding: 28px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.trans-panel.panel-before {
left: 0;
background: linear-gradient(145deg, #181115 0%, #0d0a0e 100%);
border-right: 2px solid #ef4444;
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.trans-panel.panel-after {
right: 0;
background: linear-gradient(145deg, #0e1a2c 0%, #08111f 100%);
}
.trans-panel-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 3px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
width: fit-content;
}
.panel-before .trans-panel-badge {
background: rgba(239, 68, 68, 0.2);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.4);
}
.panel-after .trans-panel-badge {
background: rgba(215, 193, 154, 0.2);
color: var(--warm);
border: 1px solid rgba(215, 193, 154, 0.4);
}
.trans-panel-content {
margin: 16px 0;
}
.trans-panel-content h4 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
margin: 0 0 12px;
color: #fff;
}
.trans-panel-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.metric-pill {
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 12px 14px;
border-radius: 4px;
}
.metric-pill strong {
display: block;
font-size: 20px;
font-family: 'Playfair Display', Georgia, serif;
margin-bottom: 2px;
}
.panel-before .metric-pill strong { color: #f87171; }
.panel-after .metric-pill strong { color: var(--warm); }
.metric-pill small {
font-size: 11px;
color: #94a3b8;
display: block;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.trans-panel-footer {
font-size: 13px;
color: #cbd5e1;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 12px;
}
.trans-slider-handle {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 4px;
background: var(--warm);
cursor: ew-resize;
transform: translateX(-50%);
z-index: 10;
box-shadow: 0 0 12px rgba(215, 193, 154, 0.8);
}
.trans-handle-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 42px;
height: 42px;
background: var(--warm);
color: #080a0d;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 900;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
pointer-events: none;
}
/* ==========================================================================
LIVE DEMO BROWSER ACTIONS & SHARING
========================================================================== */
.browser-actions-group {
display: flex;
align-items: center;
gap: 8px;
}
.demo-share-btn {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(215, 193, 154, 0.3);
color: #fffdf7;
font-family: var(--label);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 10px;
border-radius: 3px;
cursor: pointer;
transition: all 0.2s ease;
}
.demo-share-btn:hover {
background: var(--warm);
color: #080a0d;
}
.demo-share-feedback {
margin-top: 8px;
background: rgba(215, 193, 154, 0.15);
border: 1px solid var(--warm);
color: var(--warm);
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 3px;
text-align: center;
}
header.sub-header {
padding: 16px clamp(20px, 5vw, 60px);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(201, 185, 155, 0.18);
background: rgba(8, 10, 13, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
position: sticky;
top: 0;
z-index: 90;
}
header.sub-header .brand {
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fffdf7;
text-decoration: none;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 6px;
}
header.sub-header .brand em {
color: var(--warm);
font-style: italic;
font-family: 'Playfair Display', Georgia, serif;
}
.sub-header-nav {
display: flex;
align-items: center;
gap: 22px;
}
.sub-header-nav a {
color: #94a3b8;
text-decoration: none;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
transition: color 0.2s ease;
}
.sub-header-nav a:hover {
color: #fffdf7;
}
.sub-header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.sub-header-cta {
background: var(--warm);
color: #080a0d !important;
font-family: var(--sans);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 8px 16px;
border-radius: 3px;
text-decoration: none;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.sub-header-cta:hover {
background: #fffdf7;
transform: translateY(-1px);
}
@media (max-width: 820px) {
.sub-header-nav {
display: none;
}
}
/* ── Sector Pages Reusable CRO Modules ── */
.sector-roi-card {
background: linear-gradient(145deg, #0f1826 0%, #080b10 100%);
border: 1px solid rgba(201, 185, 155, 0.35);
border-radius: 8px;
padding: clamp(24px, 4vw, 40px);
margin: 3.5rem 0;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.sector-roi-header {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(245, 244, 240, 0.1);
padding-bottom: 16px;
}
.sector-roi-header strong {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(20px, 3vw, 26px);
color: #fffdf7;
}
.sector-roi-header span {
font-family: var(--label);
font-size: 11px;
color: var(--warm);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.sector-roi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 20px 0;
}
.sector-roi-metric {
background: rgba(245, 244, 240, 0.04);
border: 1px solid rgba(245, 244, 240, 0.08);
border-radius: 6px;
padding: 16px;
}
.sector-roi-metric small {
display: block;
font-size: 11.5px;
color: #94a3b8;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sector-roi-metric strong {
font-size: 22px;
color: #fffdf7;
font-family: var(--display);
}
.sector-roi-metric.highlight {
border-color: rgba(201, 185, 155, 0.4);
background: rgba(201, 185, 155, 0.08);
}
.sector-roi-metric.highlight strong {
color: var(--warm);
}
.sector-roi-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(245, 244, 240, 0.1);
}
.sector-faq-group {
margin: 4rem 0;
}
.sector-faq-group h3 {
font-size: clamp(24px, 4vw, 32px);
margin-bottom: 24px;
color: #fffdf7;
}
.sector-faq-item {
border: 1px solid rgba(245, 244, 240, 0.1);
border-radius: 6px;
margin-bottom: 12px;
background: rgba(13, 23, 37, 0.4);
overflow: hidden;
}
.sector-faq-item summary {
padding: 18px 24px;
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
color: #fffdf7;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.sector-faq-item summary::-webkit-details-marker {
display: none;
}
.sector-faq-item summary::after {
content: "+";
font-size: 20px;
color: var(--warm);
font-weight: 400;
transition: transform 0.2s ease;
}
.sector-faq-item[open] summary::after {
content: "−";
}
.sector-faq-item p {
padding: 0 24px 20px;
margin: 0;
color: #cbd5e1;
font-size: 14.5px;
line-height: 1.7;
}
.footer-colophon {
background: rgba(13, 23, 37, 0.6);
border: 1px solid rgba(215, 193, 154, 0.2);
border-radius: 6px;
padding: 24px 28px;
margin-bottom: 40px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px;
align-items: center;
}
.colophon-director {
border-right: 1px solid rgba(215, 193, 154, 0.15);
padding-right: 24px;
}
.colophon-tag {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--warm);
margin-bottom: 4px;
}
.colophon-director strong {
display: block;
font-family: 'Playfair Display', Georgia, serif;
font-size: 18px;
color: #fffdf7;
}
.colophon-director small {
display: block;
font-size: 12px;
color: #94a3b8;
letter-spacing: 0.02em;
}
.footer-colophon p {
color: #cbd5e1;
font-size: 13.5px;
line-height: 1.6;
margin: 0;
max-width: 60ch;
}
.colophon-links {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
}
.colophon-links a {
color: var(--warm);
text-decoration: none;
font-weight: 600;
transition: opacity 0.2s ease;
}
.colophon-links a:hover {
opacity: 0.8;
text-decoration: underline;
}
@media (max-width: 860px) {
.footer-colophon {
grid-template-columns: 1fr;
gap: 16px;
}
.colophon-director {
border-right: none;
border-bottom: 1px solid rgba(215, 193, 154, 0.15);
padding-right: 0;
padding-bottom: 16px;
}
.colophon-links {
flex-direction: row;
flex-wrap: wrap;
gap: 14px;
}
}
/* ── 22. Partner Calculator & Earnings Visualizer ── */
.partner-calc-wrapper {
background: linear-gradient(135deg, rgba(13, 23, 37, 0.95), rgba(7, 12, 20, 0.98));
border: 1px solid rgba(215, 193, 154, 0.35);
border-radius: 8px;
padding: 32px 28px;
margin: 40px 0;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.calc-header {
margin-bottom: 24px;
}
.calc-header h3 {
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
color: #fffdf7;
margin: 0 0 8px;
}
.calc-header p {
color: #94a3b8;
font-size: 14px;
margin: 0;
}
.calc-slider-row {
margin-bottom: 28px;
}
.calc-label-val {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: #cbd5e1;
font-weight: 600;
margin-bottom: 10px;
}
.calc-val-pill {
background: rgba(215, 193, 154, 0.15);
color: var(--gold, #d7c19a);
padding: 3px 12px;
border-radius: 999px;
font-family: "JetBrains Mono", Consolas, monospace;
font-size: 14px;
font-weight: 700;
border: 1px solid rgba(215, 193, 154, 0.3);
}
.calc-range-slider {
width: 100%;
height: 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.calc-range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--gold, #d7c19a);
border: 2px solid #05070b;
box-shadow: 0 0 10px rgba(215, 193, 154, 0.8);
cursor: pointer;
transition: transform 0.15s ease;
}
.calc-range-slider::-webkit-slider-thumb:hover {
transform: scale(1.18);
}
.calc-range-slider::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--gold, #d7c19a);
border: 2px solid #05070b;
box-shadow: 0 0 10px rgba(215, 193, 154, 0.8);
cursor: pointer;
}
.partner-calc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 24px 0;
}
.partner-payout-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(215, 193, 154, 0.18);
border-radius: 6px;
padding: 20px;
text-align: center;
}
.partner-payout-box.featured {
background: rgba(215, 193, 154, 0.08);
border-color: var(--gold, #d7c19a);
}
.partner-payout-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #94a3b8;
display: block;
margin-bottom: 6px;
}
.partner-payout-amount {
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.8rem, 3vw, 2.4rem);
font-weight: 700;
color: var(--gold, #d7c19a);
display: block;
line-height: 1.1;
margin-bottom: 4px;
}
.partner-payout-sub {
font-size: 12px;
color: #cbd5e1;
}
.calc-cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 20px;
}
.calc-cta-row .cta-btn {
flex: 1;
min-width: 220px;
}
/* ── 23. AI Automation Calculator & Sandbox Demo ── */
.ai-calc-wrapper {
background: linear-gradient(135deg, rgba(13, 23, 37, 0.95), rgba(7, 12, 20, 0.98));
border: 1px solid rgba(215, 193, 154, 0.35);
border-radius: 8px;
padding: 32px 28px;
margin: 40px 0;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.ai-calc-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 24px 0;
}
.ai-stat-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(215, 193, 154, 0.2);
border-radius: 6px;
padding: 18px 14px;
text-align: center;
}
.ai-stat-box.highlight {
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.35);
}
.ai-stat-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #94a3b8;
display: block;
margin-bottom: 6px;
}
.ai-stat-val {
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.5rem, 2.5vw, 2.1rem);
font-weight: 700;
color: var(--gold, #d7c19a);
display: block;
line-height: 1.1;
margin-bottom: 4px;
}
.ai-stat-box.highlight .ai-stat-val {
color: #34d399;
}
.ai-stat-sub {
font-size: 11.5px;
color: #cbd5e1;
}
/* AI Interactive Sandbox */
.ai-sandbox-card {
background: #090f17;
border: 1px solid rgba(215, 193, 154, 0.25);
border-radius: 8px;
overflow: hidden;
margin: 36px 0;
}
.ai-sandbox-head {
background: #0d1725;
padding: 14px 20px;
border-bottom: 1px solid rgba(215, 193, 154, 0.15);
display: flex;
justify-content: space-between;
align-items: center;
}
.ai-sandbox-head strong {
color: #fff;
font-size: 13.5px;
display: flex;
align-items: center;
gap: 8px;
}
.ai-latency-badge {
font-family: "JetBrains Mono", Consolas, monospace;
font-size: 11px;
color: #34d399;
background: rgba(16, 185, 129, 0.12);
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.ai-sandbox-tabs {
display: flex;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 8px 12px;
gap: 8px;
overflow-x: auto;
}
.ai-scenario-btn {
background: transparent;
border: 1px solid rgba(215, 193, 154, 0.2);
color: #cbd5e1;
padding: 6px 14px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
}
.ai-scenario-btn:hover,
.ai-scenario-btn.active {
background: rgba(215, 193, 154, 0.15);
color: var(--gold, #d7c19a);
border-color: var(--gold, #d7c19a);
}
.ai-sandbox-body {
padding: 20px;
min-height: 200px;
display: flex;
flex-direction: column;
gap: 14px;
background: #070c14;
}
.ai-chat-item {
display: flex;
gap: 12px;
max-width: 88%;
}
.ai-chat-item.user {
margin-left: auto;
flex-direction: row-reverse;
}
.ai-chat-item-bubble {
padding: 12px 16px;
border-radius: 6px;
font-size: 13.5px;
line-height: 1.55;
}
.ai-chat-item.bot .ai-chat-item-bubble {
background: #0d1725;
border: 1px solid rgba(215, 193, 154, 0.2);
color: #f1f5f9;
}
.ai-chat-item.user .ai-chat-item-bubble {
background: var(--gold, #d7c19a);
color: #05070b;
font-weight: 600;
}
/* ── 24. Performance Scan Interactive Tools & Sample Report Explorer ── */
.scan-interactive-bar {
background: linear-gradient(135deg, #132235, #0a111a);
border: 1px solid var(--gold, #d7c19a);
border-radius: 8px;
padding: 28px;
margin: 36px 0;
}
.scan-bar-form {
display: flex;
gap: 12px;
margin-top: 16px;
}
.scan-bar-form input {
flex: 1;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(215, 193, 154, 0.3);
border-radius: 4px;
color: #fff;
font-size: 14px;
outline: none;
}
.scan-bar-form input:focus {
border-color: var(--gold, #d7c19a);
box-shadow: 0 0 0 2px rgba(215, 193, 154, 0.2);
}
.scan-bar-form button {
padding: 14px 24px;
background: var(--gold, #d7c19a);
color: #05070b;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
border: none;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
}
.scan-bar-form button:hover {
background: #fff;
}
.scan-quick-results {
margin-top: 20px;
padding: 18px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(215, 193, 154, 0.2);
border-radius: 6px;
}
.scan-metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-top: 12px;
}
.scan-metric-card {
background: rgba(255, 255, 255, 0.03);
padding: 12px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.scan-metric-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #94a3b8;
display: block;
margin-bottom: 4px;
}
.scan-metric-status {
font-size: 13px;
font-weight: 600;
color: #cbd5e1;
display: flex;
align-items: center;
gap: 6px;
}
.scan-metric-status.pass { color: #34d399; }
.scan-metric-status.warn { color: #fbbf24; }
.scan-metric-status.fail { color: #f87171; }
/* Interactive Sample Report Explorer */
.sample-report-section {
margin: 48px 0;
}
.sample-report-nav {
display: flex;
gap: 8px;
border-bottom: 1px solid rgba(215, 193, 154, 0.2);
padding-bottom: 12px;
margin-bottom: 24px;
overflow-x: auto;
}
.sample-tab-btn {
background: transparent;
border: 1px solid rgba(215, 193, 154, 0.2);
color: #94a3b8;
padding: 8px 16px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
}
.sample-tab-btn.active,
.sample-tab-btn:hover {
background: rgba(215, 193, 154, 0.15);
color: var(--gold, #d7c19a);
border-color: var(--gold, #d7c19a);
}
.sample-panel {
background: #0d1725;
border: 1px solid rgba(215, 193, 154, 0.25);
border-radius: 8px;
padding: 28px;
}
.finding-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 8px;
}
.finding-severity {
font-family: "JetBrains Mono", Consolas, monospace;
font-size: 11px;
padding: 3px 10px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.severity-high {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.severity-medium {
background: rgba(245, 158, 11, 0.15);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.3);
}
.finding-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 18px;
}
.comparison-box {
background: rgba(0, 0, 0, 0.3);
padding: 16px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.comparison-box strong {
display: block;
font-size: 13px;
margin-bottom: 6px;
}
.comparison-box.before strong { color: #f87171; }
.comparison-box.after strong { color: #34d399; }
.comparison-box p { font-size: 13px; color: #cbd5e1; margin: 0; line-height: 1.5; }
@media (max-width: 760px) {
.partner-calc-grid,
.ai-calc-stats-grid,
.finding-comparison {
grid-template-columns: 1fr;
}
.scan-bar-form {
flex-direction: column;
}
}
/* ── Reset document flow: guarantee standard block flow without flex-order artifacts ── */
main, #main-content {
display: block !important;
width: 100% !important;
}
main > *, #main-content > * {
order: 0 !important;
float: none !important;
}
/* ── 25. Cost of Inaction & Loss Aversion Indicator ── */
.roi-loss-box {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.28);
border-radius: 6px;
padding: 14px 18px;
margin-top: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.roi-loss-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: #fca5a5;
font-weight: 600;
}
.roi-loss-amount {
font-family: "JetBrains Mono", Consolas, monospace;
font-size: 15px;
font-weight: 700;
color: #f87171;
white-space: nowrap;
}
/* ── 26. Installment & Termijnen Toggle for Pricing ── */
.installment-toggle-wrap {
display: flex;
justify-content: center;
margin-bottom: 28px;
}
.installment-toggle {
display: inline-flex;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(215, 193, 154, 0.25);
border-radius: 999px;
padding: 4px;
gap: 4px;
}
.installment-btn {
background: transparent;
border: none;
color: #94a3b8;
padding: 8px 18px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.installment-btn.is-active {
background: var(--gold, #d7c19a);
color: #05070b;
font-weight: 700;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.investment-installment-note {
font-size: 12px;
color: var(--gold, #d7c19a);
margin-top: 4px;
display: block;
}