*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--fg)}:root{--bg:#08090e;--panel:#12141c;--fg:#f7f5fc;--muted:#b5b0c0;--border:#34303d;--accent:#b65bc7;--lime:#b9de24}html[data-theme=light]{--bg:#f7f8fb;--panel:#fff;--fg:#17151c;--muted:#5b5864;--border:#dedce4;--accent:#8e278f}a{color:inherit;text-decoration:none}.wrap{max-width:1160px;margin:auto;padding:0 22px}header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--border)}nav{display:flex;gap:16px;align-items:center;justify-content:space-between;min-height:76px}.logo{width:145px;height:54px;object-fit:contain}.lightlogo{display:none}html[data-theme=light] .darklogo{display:none}html[data-theme=light] .lightlogo{display:inline-block}.links{display:flex;gap:17px;align-items:center;flex-wrap:wrap;font-size:14px}button,select,input,textarea{font:inherit}button,select{background:var(--panel);color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:8px}button{cursor:pointer}.hero{padding:95px 0 90px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.17em;color:var(--accent);font-weight:800}h1{font-size:clamp(42px,7vw,78px);letter-spacing:-.06em;line-height:1.04;max-width:900px;margin:20px 0}h2{font-size:clamp(29px,4vw,47px);letter-spacing:-.04em;line-height:1.13}p.lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:780px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-block;border:1px solid var(--border);border-radius:12px;padding:12px 18px;font-weight:700}.btn.primary{background:#922d9b;color:white;border-color:#922d9b}section{padding:70px 0;border-top:1px solid var(--border)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.card{padding:23px;background:var(--panel);border:1px solid var(--border);border-radius:19px;min-width:0}.card p,.muted{color:var(--muted)}.card h3{margin:8px 0}.card img{height:64px;max-width:90%;object-fit:contain;object-position:left}.tag{font-size:12px;color:var(--accent);font-weight:800}.qflogo{width:min(420px,100%);object-fit:contain}.split{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.steps{display:flex;gap:10px;flex-wrap:wrap}.steps span{padding:10px 14px;background:var(--panel);border:1px solid var(--border);border-radius:20px}label{display:block;font-weight:650;margin-top:16px}input:not([type=checkbox]),textarea,select.field{display:block;width:100%;padding:12px;margin-top:6px;border-radius:9px;background:var(--panel);color:var(--fg);border:1px solid var(--border)}textarea{min-height:130px}.check{display:flex;gap:10px;align-items:start}.check input{margin-top:6px}.check a{text-decoration:underline}footer{padding:35px 0;border-top:1px solid var(--border);color:var(--muted)}.small{font-size:13px}.menu-toggle{display:none}@media(max-width:800px){.wrap{padding:0 16px}.menu-toggle{display:block}.links{display:none;position:absolute;top:70px;left:0;right:0;padding:20px;background:var(--bg);border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch}.links.open{display:flex}.hero{padding:64px 0}.grid,.split{grid-template-columns:1fr}section{padding:52px 0}nav{min-height:70px}}
/* ZoeLabs 2026 polish */
:root{--accent:#ae6aff;--ring:#16c1c8}html[data-theme=light]{--accent:#812cb5;--ring:#087c83}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 17%,transparent);transition:box-shadow .2s}
button,.btn,.card,.tile,article{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover,.tile:hover,article:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 28px rgba(90,50,145,.12)}
button:hover,.btn:hover{filter:brightness(1.12)}
.logo{width:160px;max-width:100%;object-fit:contain} .tech-logos{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:25px 0}.tech-logos img{max-height:35px;max-width:100px;object-fit:contain}
@media(max-width:500px){.logo{width:132px;height:48px}.tech-logos img{max-width:72px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Branding & navigation repair */
.logo{object-fit:contain;object-position:left center;max-width:100%}
.links a[aria-current=page]{color:var(--accent);font-weight:800}
.links a:hover,.links a:focus-visible{color:var(--accent)}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--ring,#16c1c8);outline-offset:3px}
@media(max-width:800px){.links.open{max-height:calc(100dvh - 70px);overflow:auto}}

/* Final release: navigation, focus and brand polish */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #16c1c8;outline-offset:3px}a.btn:hover,.card:hover{transform:translateY(-2px);transition:transform .2s ease}.logo{object-fit:contain;object-position:left center}html[data-theme=dark] .logo{filter:none}html[data-theme=light] .logo{filter:none}

/* ZoeLabs logos: original user-provided files, never recolored. */
nav>a[aria-label="ZoeLabs"]{display:inline-flex;align-items:center;flex-shrink:0;padding:4px 9px;border-radius:10px;background:#fff}nav>a[aria-label="ZoeLabs"] .logo{width:155px;height:58px;object-fit:contain}html[data-theme="light"] nav>a[aria-label="ZoeLabs"]{background:#fff}

.zl-live-form label{display:block;margin:12px 0 6px;font-weight:600}.zl-live-form input:not([type=checkbox]),.zl-live-form select,.zl-live-form textarea{display:block;width:100%;padding:12px;border:1px solid #718096;border-radius:10px;background:var(--panel);color:var(--text);font:inherit}.zl-live-form :is(input,select,textarea):focus-visible{outline:3px solid #16c1c8;outline-offset:2px}.zl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.zl-check{display:flex!important;gap:12px}.zl-trap{position:absolute!important;left:-9999px;opacity:0}.zl-status{min-height:1.6em;font-weight:700}@media(max-width:640px){.zl-grid{grid-template-columns:1fr}}


.zl-live-form .zl-status{min-height:1.4em;margin-top:12px;font-weight:650}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #16c1c8;outline-offset:3px}


/* ZoeLabs UX release 2026-10-16: compact editorial rhythm */
:root{--space-section:clamp(36px,5vw,58px);--space-card:20px}
body{line-height:1.52}
.wrap{max-width:1120px}
.hero{padding:clamp(44px,6vw,70px) 0 clamp(40px,5vw,58px)}
.hero h1{font-size:clamp(37px,5.3vw,64px);line-height:1.09;letter-spacing:-.045em;max-width:850px;margin:14px 0 16px}
.hero .lead{margin:0;max-width:720px}
section{padding:var(--space-section) 0}
section h2{font-size:clamp(26px,3.1vw,38px);margin:0 0 14px;line-height:1.17}
section .lead{margin:8px 0 20px;font-size:clamp(16px,1.7vw,19px)}
section p{margin-top:9px;margin-bottom:13px}
.card{padding:var(--space-card);border-radius:15px}
.card h3{font-size:19px;line-height:1.25;margin:8px 0}
.card p{line-height:1.48}
.card .btn{margin-top:6px}
.grid{gap:14px}
.actions{margin-top:22px}
.steps{gap:8px}.steps span{padding:8px 12px;border-radius:12px}
.zl-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.zl-service-card{border:1px solid var(--border);background:var(--panel);padding:20px;border-radius:16px;display:flex;flex-direction:column;gap:8px}
.zl-service-card h3{font-size:19px;margin:0}.zl-service-card p{color:var(--muted);margin:0;flex:1}
.zl-service-card a{color:var(--accent);font-weight:750;text-decoration:underline;text-underline-offset:3px;margin-top:7px}
.zl-kicker{color:var(--accent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.zl-compact-intro{max-width:780px;color:var(--muted)}
.zl-slim-section{padding:34px 0}
.zl-live-form input:not([type=checkbox]),.zl-live-form select,.zl-live-form textarea{color:var(--fg)}
@media(max-width:850px){.zl-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.zl-service-grid{grid-template-columns:1fr}.hero{padding:38px 0 40px}section{padding:38px 0}.grid{gap:12px}.card,.zl-service-card{padding:17px}}

/* 2026-10-16 ZoeLabs UX refinement: consistent rhythm and readable contact */
:root{--space-section:42px;--space-card:19px}
html{scroll-padding-top:78px}
body{font-size:16px;line-height:1.58}
.wrap{width:min(100%,1120px);padding-inline:clamp(18px,3vw,34px)}
header nav{min-height:70px}
header .logo{width:154px;height:52px;object-fit:contain;object-position:left center}
header .darklogo{background:transparent;border:0;box-shadow:none}
.hero{padding:clamp(42px,5vw,66px) 0 clamp(30px,4vw,48px)}
.hero h1{font-size:clamp(37px,4.7vw,62px);line-height:1.1;margin:12px 0 14px}
.hero .lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6}
section{padding:clamp(30px,4vw,48px) 0}
section h2{font-size:clamp(25px,2.6vw,36px);margin:0 0 14px}
section p{max-width:78ch}
.card,.zl-service-card{padding:clamp(17px,2vw,23px);border-radius:16px}
.card:hover,.zl-service-card:hover{border-color:color-mix(in srgb,var(--accent) 48%,var(--border));transform:translateY(-2px);transition:transform .18s ease,border-color .18s ease}
.btn,.zl-service-card a{transition:filter .15s ease}
.btn:hover{filter:brightness(1.13)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.zl-live-form{max-width:760px}
.zl-live-form label{font-size:14px}
.zl-live-form input:not([type=checkbox]),.zl-live-form select,.zl-live-form textarea{font-size:16px;min-height:43px}
.zl-live-form textarea{min-height:128px}
.cf-turnstile{min-height:65px;margin:16px 0 10px}
.zl-status{min-height:1.5em;font-weight:600}
footer{padding:26px 0}
@media(max-width:800px){header nav{min-height:64px}.hero{padding:38px 0 30px}section{padding:30px 0}.grid,.split,.zl-service-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.card:hover,.zl-service-card:hover{transform:none}*{scroll-behavior:auto!important;transition:none!important}}

/* ZoeLabs contact UX, final override */
html:not([data-theme=light]) img.darklogo{background:none!important;border:0!important;padding:0!important;box-shadow:none!important;filter:none!important}
header .logo{width:170px;height:56px;object-fit:contain}
.zl-contact-intro{max-width:780px}.zl-contact-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 14px}
.zl-channel{display:flex;align-items:center;gap:13px;padding:18px;border:1px solid var(--border);background:var(--panel);border-radius:17px;min-height:92px;transition:transform .2s,border-color .2s;text-decoration:none}
.zl-channel:hover{transform:translateY(-2px);border-color:var(--accent)}.zl-channel svg{width:34px;height:34px;flex:none}.zl-channel strong{display:block;font-size:17px}.zl-channel small{display:block;color:var(--muted);font-size:13px;line-height:1.35}.zl-channel.wa svg{color:#25d366}.zl-channel.tg svg{color:#2aabee}.zl-channel.cal svg{color:var(--accent)}
.zl-form-toggle{margin:16px 0 0;border:1px solid var(--border);border-radius:16px;background:var(--panel);overflow:hidden}.zl-form-toggle summary{padding:19px 22px;font-weight:750;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}.zl-form-toggle summary::-webkit-details-marker{display:none}.zl-form-toggle summary:after{content:'+';font-size:24px}.zl-form-toggle[open] summary:after{content:'−'}.zl-form-inner{padding:0 22px 22px}.zl-form-toggle[open] summary{border-bottom:1px solid var(--border);margin-bottom:8px}
.zl-contact-page main>section{padding:30px 0}.zl-contact-page main>section:first-child{padding:42px 0 18px}.zl-contact-page .demo-cta{display:none}.zl-contact-page .zl-contact-layout{max-width:920px}
@media(max-width:760px){.zl-contact-choices{grid-template-columns:1fr;gap:10px}.zl-channel{min-height:76px;padding:14px}.zl-contact-page main>section:first-child{padding:28px 0 12px}}

/* V5 brand assets: transparent logo, no white capsule. */
header nav>a[aria-label="ZoeLabs"],html[data-theme="light"] header nav>a[aria-label="ZoeLabs"]{background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important}
header .logo{width:190px;height:66px;object-fit:contain;object-position:left center;background:transparent!important}
.zl-vertical-brand{margin:16px 0 4px}.zl-vertical-brand img{width:min(380px,100%);height:auto;max-height:100px;object-fit:contain;object-position:left center}.card img.darklogo,.card img.lightlogo{width:min(240px,100%);height:62px;max-width:100%;object-fit:contain;object-position:left center;margin-bottom:10px}
@media(max-width:600px){header .logo{width:154px;height:54px}.zl-vertical-brand img{max-height:75px}}

/* V6: explicit logo contrast; keep alpha transparency in all themes */
header nav > a[aria-label="ZoeLabs"]{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;display:inline-flex;align-items:center}
header nav img.logo{width:clamp(155px,16vw,205px)!important;height:auto!important;max-height:72px!important;object-fit:contain!important;object-position:left center!important;filter:none!important;background:transparent!important;box-shadow:none!important;padding:0!important}
html:not([data-theme="light"]) header nav img.darklogo{display:block!important}
html:not([data-theme="light"]) header nav img.lightlogo{display:none!important}
html[data-theme="light"] header nav img.darklogo{display:none!important}
html[data-theme="light"] header nav img.lightlogo{display:block!important}
.zl-vertical-brand img{max-width:min(420px,100%);width:auto;height:auto;max-height:115px;object-fit:contain}
@media(max-width:640px){header nav img.logo{width:154px!important;max-height:55px!important}}

/* V6: explicit logo contrast; keep alpha transparency in all themes */
header nav > a[aria-label="ZoeLabs"]{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;display:inline-flex;align-items:center}
header nav img.logo{width:clamp(155px,16vw,205px)!important;height:auto!important;max-height:72px!important;object-fit:contain!important;object-position:left center!important;filter:none!important;background:transparent!important;box-shadow:none!important;padding:0!important}
html:not([data-theme="light"]) header nav img.darklogo{display:block!important}
html:not([data-theme="light"]) header nav img.lightlogo{display:none!important}
html[data-theme="light"] header nav img.darklogo{display:none!important}
html[data-theme="light"] header nav img.lightlogo{display:block!important}
.zl-vertical-brand img{max-width:min(420px,100%);width:auto;height:auto;max-height:115px;object-fit:contain}
@media(max-width:640px){header nav img.logo{width:154px!important;max-height:55px!important}}

/* Final logo override: brand assets 02 (dark) / 03 (light), no background. */
header nav > a[aria-label="ZoeLabs"],
header nav > a[aria-label="ZoeLabs"]:hover {background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;outline-offset:4px}
header nav img.logo{background:transparent!important;filter:none!important;box-shadow:none!important;border:0!important;padding:0!important;width:clamp(170px,16vw,215px)!important;height:auto!important;max-height:76px!important;image-rendering:auto!important}
html:not([data-theme="light"]) header nav img.darklogo{display:block!important}
html:not([data-theme="light"]) header nav img.lightlogo{display:none!important}
html[data-theme="light"] header nav img.darklogo{display:none!important}
html[data-theme="light"] header nav img.lightlogo{display:block!important}
@media(max-width:640px){header nav img.logo{width:158px!important;max-height:60px!important}}