/* Approved HOZQ identity: vivid animated colors, dark text, plain HOZQ wordmark. */
:root[data-identity="vivid"]{--ink:#101716;--muted:#101716;--accent:#101716;--line:#10171625;--green:#101716;--hero-bg:#81dcf2;--on-dark:#fff;--hero-on:#101716;--hero-sub:#101716;--hero-accent:#101716}
:root[data-identity="vivid"],:root[data-identity="vivid"] body{background:#a4d9fa;background-image:none;color:var(--ink)}
:root[data-identity="vivid"] .intro-surface{background-image:none}
:root[data-identity="vivid"] footer{background:#a4d9fa}
:root[data-identity="vivid"] .button{background:var(--ink);color:#fff}
:root[data-identity="vivid"] .button.outline{background:transparent;color:var(--ink);border-color:var(--ink)}
@keyframes hozq-color-flow{0%{transform:translate(-5%,-3%) rotate(-9deg) scale(1)}50%{transform:translate(4%,-1%) rotate(5deg) scale(1.06)}100%{transform:translate(0,6%) rotate(16deg) scale(1.02)}}
/* Saturated, luminous colors with a single high-contrast text color. */
:root[data-identity="vivid"]{--hero-bg:#81dcf2;--ink:#101716;--muted:#101716;--accent:#101716;--hero-on:#101716;--hero-sub:#101716;--hero-accent:#101716}
:root[data-identity="vivid"] .intro-surface{background:#81dcf2;overflow:hidden;isolation:isolate}
:root[data-identity="vivid"] .intro-surface:after{inset:-35%;background:radial-gradient(ellipse at 12% 16%,#65c7ff 0,transparent 48%),radial-gradient(ellipse at 90% 18%,#53e3ba 0,transparent 48%),radial-gradient(ellipse at 85% 85%,#ffbc63 0,transparent 48%),radial-gradient(ellipse at 12% 85%,#e9a4ec 0,transparent 50%),linear-gradient(120deg,#83dcec,#e2cefa);animation:hozq-color-flow 24s ease-in-out infinite alternate;animation-play-state:running;will-change:transform}
:root[data-identity="vivid"] .hero h1,:root[data-identity="vivid"] .hero h1 em,:root[data-identity="vivid"] .hero .intro,:root[data-identity="vivid"] .hero .fine,:root[data-identity="vivid"] .hero .eyebrow{color:#101716}
:root[data-identity="vivid"] .hero .actions .button{background:#101716;color:#fff;border-color:#101716}
:root[data-identity="vivid"] .marketing-panel{background:#a4d9fa}
:root[data-identity="vivid"] .payments-panel{background:#ffcf88}
:root[data-identity="vivid"] .email-panel{background:#85e4ca}
@media(prefers-reduced-motion:reduce){:root[data-identity="vivid"] .intro-surface:after{animation:none!important;transform:none!important}}
:root[data-identity="vivid"] .hero .actions .button.outline{background:#101716;color:#fff;border-color:#101716}
:root[data-identity="vivid"] .whatsapp-panel{background:#b9e78a}
/* Compact homepage introduction: content leads, rather than vertical centering. */
:root[data-identity="vivid"] .hero{padding:40px 0 52px;gap:48px;align-items:center}
:root[data-identity="vivid"] .hero h1{font-size:clamp(38px,4.5vw,62px);line-height:1.08;letter-spacing:-.045em;margin:20px 0 22px;text-wrap:balance}
:root[data-identity="vivid"] .hero .intro{font-size:17px;line-height:1.65;max-width:500px;margin:0}
:root[data-identity="vivid"] .hero .actions{margin-top:26px}
.hero-services{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:24px;font-size:13px}
.hero-services a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#10171655}
:root[data-identity="vivid"] .hero .fine{max-width:440px;font-size:12px;line-height:1.65;margin:22px 0 0}
@media(max-width:650px){:root[data-identity="vivid"] .hero{min-height:0;align-items:flex-start;padding:30px 0 46px;display:block}:root[data-identity="vivid"] .hero h1{font-size:clamp(34px,8vw,44px);margin:18px 0 20px}:root[data-identity="vivid"] .hero .intro{font-size:16px}:root[data-identity="vivid"] .hero .button{width:auto;padding:16px 24px}.hero-services{gap:12px 18px}:root[data-identity="vivid"] .hero .fine{font-size:11px;max-width:340px}}
/* Product illustration: the four services in one calm workspace. */
:root[data-identity="vivid"] .workspace-scene{padding:26px;background:rgba(255,255,255,.72);border:1px solid #ffffffb3;box-shadow:0 22px 60px #10171612;border-radius:26px;min-height:0;color:#101716;overflow:hidden}
.workspace-scene:before{display:none}.workspace-top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-bottom:22px;border-bottom:1px solid #10171618}.workspace-brand{font-family:Manrope,sans-serif;font-size:22px;font-weight:800;letter-spacing:-1.5px}.workspace-caption{font-size:9px;letter-spacing:1.5px;font-weight:700}.workspace-heading{display:flex;gap:14px;align-items:center;margin:25px 0}.workspace-store{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;border:1px solid #10171622;background:#ffffff70}.workspace-store svg{width:26px;height:26px}.workspace-heading h2{font-size:24px;letter-spacing:-.8px;line-height:1.2;margin:0}.workspace-heading p{font-size:13px;margin:5px 0 0}.workspace-services{display:grid;gap:10px}.workspace-service{display:flex;align-items:center;gap:13px;border-radius:14px;padding:17px 16px;border:1px solid #1017160d}.workspace-marketing{background:#a4d9fa}.workspace-payments{background:#ffcf88}.workspace-email{background:#85e4ca}.workspace-whatsapp{background:#b9e78a}.workspace-icon{font-size:24px;width:30px;display:grid;place-items:center;flex:none}.workspace-icon svg{width:25px;height:25px}.workspace-service h3{font-size:16px;letter-spacing:-.3px;margin:0;font-weight:700}.workspace-service p{font-size:12px;line-height:1.4;margin:4px 0 0}.workspace-index{font-size:10px;margin-left:auto;align-self:flex-start;opacity:.7}.workspace-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;font-size:12px;font-weight:600}.workspace-note{font-size:10px;line-height:1.5;margin:16px 0 0;opacity:.75}
@media(min-width:901px){:root[data-identity="vivid"] .hero{grid-template-columns:1.05fr 1fr;gap:68px}.workspace-scene{max-width:480px;justify-self:end;width:100%}}
@media(max-width:650px){:root[data-identity="vivid"] .hero .workspace-scene{display:none}}
:root[data-identity="vivid"] .cod-panel,.workspace-cod{background:#d3b9ef}

/* The mobile introduction fills the viewport; content may grow on short screens. */
@media(max-width:650px){
 :root[data-identity="vivid"] .intro-surface{min-height:100svh;min-height:100dvh;display:flex;flex-direction:column}
 :root[data-identity="vivid"] .intro-surface>header{flex:none}
 :root[data-identity="vivid"] .intro-surface>.container{flex:1;display:flex;align-items:center;margin:0 auto}
 :root[data-identity="vivid"] .intro-surface .hero{width:100%;min-height:0;padding:28px 0 max(28px,env(safe-area-inset-bottom,0px))}
}
@media(max-width:650px) and (max-height:650px){
 :root[data-identity="vivid"] .intro-surface .hero{padding:18px 0 max(18px,env(safe-area-inset-bottom,0px))}
 :root[data-identity="vivid"] .hero h1{margin:14px 0}
 :root[data-identity="vivid"] .hero .intro{font-size:15px;line-height:1.5}
 :root[data-identity="vivid"] .hero .actions{margin-top:18px}
 :root[data-identity="vivid"] .hero .fine{margin-top:16px}
}