/* ZONURA DARK LUXURY — preview only. Keep existing forms and application behavior. */
:root{--ink:#f6f3ff;--muted:#aaa2bb;--violet:#9955ff;--violet-light:#211330;--paper:#08060f;--line:#2d203f}
html{background:#08060f}body{background:#08060f;color:#f6f3ff}
.topline{background:#0b0714;color:#91839e;border-bottom:1px solid #251832}
.header{background:rgba(9,7,16,.95);border-bottom:1px solid #281a3d;backdrop-filter:blur(18px)}
.nav-links a,.language a,.brand-word{color:#f7f3ff}.brand-period{color:#a65fff}.brand-mark{background:linear-gradient(135deg,#5e2bba,#a465ff);color:white}
.nav-contact{background:transparent;border:1px solid #9450fa;color:#f5eaff;box-shadow:0 0 17px #7e31ff1c;border-radius:8px}.nav-contact:hover{background:#7134db}
.menu-toggle span{background:#f5edff}
.hero{background:radial-gradient(ellipse at 77% 48%,#3a146c 0%,#1b0d32 31%,#0b0716 69%,#08060e 100%);min-height:680px;border-bottom:1px solid #45236b;position:relative}
.hero:before{background:linear-gradient(90deg,transparent 0%,#a35aff0c 49%,transparent 50%),repeating-linear-gradient(90deg,transparent 0,transparent 105px,#7d44ca0c 106px);opacity:.7}
.hero h1{color:#fff;font-size:clamp(51px,5.4vw,82px)}.hero h1 em,.section-head h2 em,.about-copy h2 em,.people-copy h2 em,.contact-inner h2 em{color:#a765ff}
.hero-desc{color:#c1b9cc}.hero .eyebrow{color:#c8a0ff}.hero .button-dark{background:linear-gradient(110deg,#a455ff,#6927f0);box-shadow:0 8px 28px #7223f34d}
.hero .text-link{color:#f5eaff;border-color:#8c51b5}
.studio-art{min-height:530px;perspective:1100px}
.studio-grid{opacity:.65}.studio-halo{width:min(440px,85%);border:2px solid #bb7aff;box-shadow:0 0 18px #b46bff,0 0 85px #7d2dff66,inset 0 0 45px #7827eb35}
.z-crop{width:min(400px,82%);filter:drop-shadow(0 0 28px #7534e577)}
.glass-back{width:260px;height:220px;right:0;top:18px;border-color:#ae72ff70;box-shadow:0 0 28px #a15eff25}
.glass-front{right:0;bottom:25px;border-color:#a96dff65;box-shadow:0 0 30px #a35aff24}
.ticker{background:#100a1d;border-top:1px solid #48246a;border-bottom:1px solid #38214f}.service-strip a{border-right-color:#60317d}.service-strip span{color:#efe4ff}.service-strip b{color:#af6aff}
.section{color:#f5f0ff}#services{padding-top:104px;padding-bottom:110px}
.section-label{color:#ad75ff}.section-label span:first-child{color:#ad75ff}.section-head p,.service-card p,.people-copy p,.about-copy p{color:#ada4ba}
.section-head h2,.people-copy h2,.about-copy h2,.contact-inner h2{color:#fff}
.services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.service-card{background:linear-gradient(145deg,#1a102b,#0e0a17 78%);border:1px solid #3b2554;border-radius:15px;box-shadow:0 15px 45px #0004;min-height:280px;transition:transform .25s,border-color .25s}
.service-card:hover{transform:translateY(-5px);border-color:#9855e9}
.service-card h3{color:#fff;font-size:23px}.service-icon{background:#2a1645;color:#bd81ff;width:52px;height:52px}.service-top,.service-bottom{color:#a77acb}.service-bottom{border-top:1px solid #38254b}
.people-section{color:#fff}.people-photo{border-radius:14px;overflow:hidden;border:1px solid #322344}.people-photo img{filter:saturate(.6) brightness(.68)}.photo-disclaimer{color:#8d829d}
.statement{background:radial-gradient(circle at 85% 30%,#2b124c,#0e081a 65%);border-top:1px solid #342047;border-bottom:1px solid #342047}.statement-inner{color:#fff}.statement-inner em{color:#b67dff}
.approach-section{background:#100a1b;border-top:1px solid #312045;border-bottom:1px solid #312045}
.approach-section .section-head h2,.approach-section .step h3{color:#fff}
.approach-section .section-head p,.step p{color:#a99bb8}.step{border-color:#39274b}.step-number{color:#ae72ff}.step-arrow{color:#b985f6}
.about-section{background:#08060f}.about-photo{border-radius:14px;overflow:hidden;border:1px solid #322344}.about-photo img{filter:saturate(.6) brightness(.65)}
.contact-section{background:radial-gradient(ellipse at 80% 55%,#24113d,#0c0715 65%);border-top:1px solid #3e225b;color:#fff}
.contact-inner h2{color:#fff}.contact-inner>p{color:#b8aec6}
.project-form{background:linear-gradient(145deg,#1a1228,#100b1b);border:1px solid #3b2851;border-radius:16px;box-shadow:0 20px 70px #0005;color:#f7f2ff}
.project-form-heading,.project-form label span{color:#e7dafa}
.project-form input,.project-form textarea,.project-form select{background:#21192f;border:1px solid #3a2d4e;color:#fff;border-radius:7px}
.project-form input::placeholder,.project-form textarea::placeholder{color:#968aa6}
.project-form input:focus,.project-form textarea:focus,.project-form select:focus{outline:2px solid #9d64ef;outline-offset:1px}
.project-submit{background:linear-gradient(100deg,#a052ff,#6824e8);color:#fff;border-radius:8px}
.project-form-note{color:#aaa0b8}.project-form-status{color:#d8c7ef}
.footer{background:#07050d;border-top:1px solid #2e1b43;color:#d7cce5}.footer-logo{color:#fff}.footer-links a{color:#cbbfda}.footer-bottom{border-color:#2a1b39;color:#91849e}
@media(max-width:900px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.hero{min-height:0}.studio-art{min-height:385px}.studio-halo{width:285px}.z-crop{width:285px}.services-grid{grid-template-columns:1fr}.service-card{min-height:245px}.header .nav-links{background:#130d20;border:1px solid #362248}.header .nav-links a{color:#fff}}
@media(prefers-reduced-motion:reduce){.service-card{transition:none}}

/* Simple white Zonura wordmark in navigation */
.header .brand-simple{gap:0;text-decoration:none}
.header .brand-simple .brand-word{font-family:var(--heading,'Manrope',sans-serif);font-weight:800;font-size:clamp(30px,3vw,38px);letter-spacing:-.085em;line-height:1;color:#fff}
.header .brand-simple .brand-period{color:#a75aff}

/* Premium laptop and floating glass UI hero */
.laptop-showcase{position:relative;min-height:540px;isolation:isolate;overflow:visible;display:block}
.showcase-aura{position:absolute;inset:8% -4% 0;background:radial-gradient(ellipse at 55% 58%,#8b35f44d,transparent 58%);filter:blur(24px);z-index:-1}
.laptop-device{position:absolute;left:12%;right:8%;top:23%;height:65%;transform:perspective(950px) rotateY(-10deg) rotateX(3deg);filter:drop-shadow(0 28px 35px #0009)}
.laptop-screen{position:relative;height:84%;border:9px solid #16111f;border-bottom-width:15px;border-radius:17px 17px 6px 6px;background:radial-gradient(ellipse at 70% 35%,#41117c 0%,#170b31 42%,#070610 90%);box-shadow:0 0 0 1px #8d62c7,0 0 38px #8a38ff6e,inset 0 0 70px #4c139c55;overflow:hidden}
.screen-top{position:absolute;top:6%;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;color:#e6d8f8;font-size:10px;font-weight:800;z-index:2}
.screen-top>span:first-child{font-size:17px;letter-spacing:-.08em}.screen-top>span:last-child{font-size:8px;letter-spacing:4px;color:#8d6aac}
.screen-wave{position:absolute;width:115%;height:90%;left:-10%;top:10%;border:2px solid #a45bff;border-radius:50%;transform:rotate(-30deg);box-shadow:0 0 15px #a75aff,0 0 60px #8735ff8a,inset 0 0 65px #6724ff44}
.screen-wave:after{content:"";position:absolute;inset:20%;border:1px solid #7732e9;border-radius:50%;box-shadow:0 0 32px #8a42f6}
.screen-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:white;text-shadow:0 3px 25px #0009;z-index:2}
.screen-content strong{font-family:var(--heading,'Manrope',sans-serif);font-size:clamp(33px,4.5vw,63px);font-weight:800;letter-spacing:-.09em}
.screen-content small{font-size:8px;letter-spacing:.16em;color:#cbb1ed}
.laptop-base{height:14%;margin:0 -8%;background:linear-gradient(180deg,#b2a3c3,#4a3d59 48%,#16101e 82%,#06050b);clip-path:polygon(7% 0,93% 0,100% 85%,96% 100%,4% 100%,0 85%);border-radius:0 0 22px 22px;box-shadow:0 15px 25px #000b}
.floating-tile{position:absolute;z-index:3;min-width:135px;padding:14px 15px;border:1px solid #9a65ed90;border-radius:13px;background:linear-gradient(135deg,#33204bbd,#160f28bd);backdrop-filter:blur(14px);box-shadow:0 12px 36px #0008,0 0 20px #8e42ff30;color:#fff;display:flex;flex-direction:column;gap:6px}
.tile-kicker{font-size:8px;letter-spacing:.16em;color:#bb8fff}.floating-tile strong{font-size:13px;font-weight:700}
.tile-web{top:6%;left:0}.tile-ai{top:8%;right:-3%}.tile-app{bottom:10%;left:-3%}.tile-brand{bottom:10%;right:-5%}
.tile-lines{display:grid;gap:4px;margin-top:7px}.tile-lines i{height:5px;background:linear-gradient(90deg,#9652ff,#4e238d);border-radius:8px}.tile-lines i:nth-child(2){width:75%}.tile-lines i:nth-child(3){width:48%}
.tile-bars{height:34px;display:flex;gap:6px;align-items:end;margin-top:5px}.tile-bars i{width:12px;background:linear-gradient(#bc79ff,#6420de);border-radius:4px 4px 0 0}.tile-bars i:nth-child(1){height:35%}.tile-bars i:nth-child(2){height:75%}.tile-bars i:nth-child(3){height:53%}.tile-bars i:nth-child(4){height:100%}
.tile-orbit{width:42px;height:32px;border:2px solid #a565ff;border-radius:8px;margin:7px auto 0;box-shadow:10px 6px 0 -3px #6c30db}
.tile-brand-mark{font-size:30px;font-weight:900;letter-spacing:-.12em;line-height:1.1}.tile-brand-mark span{color:#ac6aff}
.showcase-caption{position:absolute;right:5%;bottom:0;font-size:9px;letter-spacing:.16em;color:#ab86d2}
@media(max-width:1100px){.floating-tile{min-width:108px;padding:10px}.floating-tile strong{font-size:11px}.laptop-device{left:8%;right:5%}}
@media(max-width:760px){.laptop-showcase{min-height:420px;margin:0 15px}.laptop-device{left:8%;right:5%;top:23%;height:65%}.floating-tile{min-width:88px;padding:9px}.floating-tile strong{font-size:10px}.tile-web{left:0}.tile-ai{right:0}.tile-app{left:0}.tile-brand{right:0}.screen-content small{font-size:6px}.showcase-caption{font-size:7px}}
@media(max-width:400px){.laptop-showcase{min-height:330px}.floating-tile{min-width:72px;padding:7px}.tile-kicker{font-size:6px}.floating-tile strong{font-size:9px}.tile-app,.tile-brand{bottom:5%}}

/* Preview workspace hero: real HTML navigation/copy/buttons over approved background. */
.hero.hero-workspace{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;isolation:isolate;min-height:clamp(570px,56vw,850px);padding:90px max(6%,calc((100vw - 1320px)/2)) 90px;width:100%;margin:0;overflow:hidden;background:#080510 url('/Neon%20Zonura-werkplek%20bij%20nacht%20(1).png') center center/cover no-repeat;border-bottom:1px solid #45236b}
.hero.hero-workspace::before{content:"";display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(6,4,14,.46) 0%,rgba(6,4,14,.19) 37%,transparent 62%);opacity:1}
.hero.hero-workspace .hero-copy{position:relative;z-index:1;width:min(610px,48vw);max-width:100%;margin:0;padding:0}
.hero.hero-workspace .hero-copy h1{font-size:clamp(42px,4.8vw,76px);line-height:1.06}
.hero.hero-workspace .hero-desc{max-width:560px}
@media(max-width:900px){.hero.hero-workspace{min-height:650px;background-position:58% center;padding:70px 32px}.hero.hero-workspace .hero-copy{width:min(540px,72%)}.hero.hero-workspace::before{background:linear-gradient(90deg,rgba(6,4,14,.76),rgba(6,4,14,.36) 65%,transparent)}}
@media(max-width:760px){.hero.hero-workspace{min-height:700px;padding:65px 24px 50px;background-position:65% center;justify-content:flex-start}.hero.hero-workspace .hero-copy{width:100%;max-width:550px}.hero.hero-workspace::before{background:linear-gradient(180deg,rgba(6,4,14,.86) 0%,rgba(6,4,14,.67) 49%,rgba(6,4,14,.14) 100%)}.hero.hero-workspace .hero-copy h1{font-size:clamp(40px,9vw,60px)}.hero.hero-workspace .hero-actions{flex-wrap:wrap}}

/* Fix: paint uploaded image on its own visible layer, above legacy hero overlays. */
.hero.hero-workspace{background-color:#080510;background-image:none!important;isolation:isolate}
.hero.hero-workspace::after{content:"";position:absolute;inset:0;display:block;z-index:0;pointer-events:none;background-image:url("/Neon%20Zonura-werkplek%20bij%20nacht%20%281%29.png");background-repeat:no-repeat;background-size:cover;background-position:center center;opacity:1}
.hero.hero-workspace::before{z-index:1!important;opacity:1;pointer-events:none}
.hero.hero-workspace>.hero-copy{z-index:2!important}
@media(max-width:900px){.hero.hero-workspace::after{background-position:58% center}}
@media(max-width:760px){.hero.hero-workspace::after{background-position:65% center}}