/* Approved phone design. Network access requires an explicit callback API setting. */
.callback-ui{--cb-accent:#d5f495;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:64px;align-items:center;max-width:1180px;margin:auto;padding:96px 40px 64px;background:#12160e;color:#f4f5ec;font:15px/1.7 'Segoe UI',sans-serif}
.callback-ui *{box-sizing:border-box}.callback-ui .cb-eyebrow{font:10px/1.6 monospace;letter-spacing:.12em;color:var(--cb-accent);margin:0 0 28px}.callback-ui h1{font-size:58px;line-height:1.1;font-weight:450;letter-spacing:-.04em;margin:0 0 30px}.callback-ui h1 em{font-family:Georgia,serif;color:var(--cb-accent);font-weight:400}.cb-copy>p:not(.cb-eyebrow){max-width:420px;color:#b9c4b4}.callback-ui .cb-pending{font-size:12px;border-top:1px solid #455044;margin-top:28px;padding-top:18px}
.cb-demo{display:flex;flex-direction:column;align-items:center;scroll-margin-top:80px}.callback-ui .cb-demo>.cb-eyebrow{margin-bottom:20px;text-align:center}.cb-device{position:relative;width:304px;max-width:100%;height:700px;padding:8px;border-radius:49px;background:linear-gradient(105deg,#a5a69f,#454a42 4%,#7d8277 8%,#30372c 45%,#777c70 94%,#b2b2a8 98%,#4a5144);box-shadow:0 25px 45px #0008,inset 0 0 0 2px #898c80}.cb-screen{position:relative;height:100%;border-radius:41px;border:2px solid #090d07;background:radial-gradient(ellipse at top,#313d24,#12190f);overflow:hidden}.cb-top{display:flex;justify-content:space-between;position:relative;height:40px;padding:13px 22px 0;font-size:9px}.cb-island{position:absolute;left:50%;transform:translateX(-50%);top:10px;width:87px;height:24px;background:#070a05;border-radius:18px}.cb-content{padding:21px 18px 32px}.cb-logo{display:block;width:184px;max-width:100%;height:auto;margin:0 auto 16px;border-radius:9px}.callback-ui h2{text-align:center;font-size:25px;font-weight:500;margin:0;letter-spacing:-.03em}.cb-subtitle{text-align:center;font-size:10px;line-height:1.7;margin:8px auto 26px;color:#b9c4b4}.cb-fields>label{display:block;font-size:11px;margin-bottom:7px}.cb-number{display:flex;min-width:0;border:1px solid #566346;border-radius:9px;overflow:hidden;background:#0d140a}.cb-number select{width:96px;flex:0 0 96px;background:#192112;border:0;color:#f4f5ec;font:12px 'Segoe UI',sans-serif;padding:13px 5px}.cb-number input{width:100%;min-width:0;border:0;background:transparent;color:#f4f5ec;padding:12px 8px;font-size:14px}.callback-ui .cb-consent{display:flex;gap:7px;align-items:flex-start;font-size:10px;margin:20px 0}.cb-consent input{width:16px;height:16px;flex-shrink:0;margin:2px 0}.cb-call{display:grid;place-items:center;width:62px;height:62px;margin:18px auto 0;border:0;border-radius:50%;background:var(--cb-accent);color:#102820}.cb-call:disabled{cursor:not-allowed;opacity:.7}.cb-call svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.cb-caption{text-align:center;font-size:11px;margin:8px 0}.cb-unavailable{text-align:center;font-size:10px;color:#b9c4b4}.cb-home{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:95px;height:4px;border-radius:3px;background:#c1c6b6}.cb-privacy{font-size:11px;color:#b9c4b4;margin-top:20px;text-underline-offset:4px}.callback-ui :focus-visible{outline:3px solid var(--cb-accent);outline-offset:3px}
@media(max-width:700px){.callback-ui{display:flex;flex-direction:column;gap:32px;padding:80px 22px 40px}.callback-ui h1{font-size:44px}.cb-demo{width:100%}}
.callback-ui.cb-zvanis{--cb-accent:#8ce8dd;background:#071a22}.cb-zvanis .cb-screen{background:radial-gradient(ellipse at top,#204a52,#0a2029)}.cb-zvanis .cb-number,.cb-zvanis .cb-number select{background:#0c2932}

.callback-ui [hidden]{display:none!important}
.callback-ui fieldset{border:0;padding:0;margin:0;min-width:0}
.callback-ui fieldset>label,.callback-ui [data-code-form]>label{display:block;font-size:12px;margin-bottom:8px}
.callback-ui .cb-device{height:660px;min-height:0}
.callback-ui .cb-screen{height:100%;min-height:0;overflow:hidden}
.callback-ui .cb-content{height:calc(100% - 60px);overflow-y:auto;overflow-x:hidden;padding-bottom:44px;scrollbar-width:thin;scrollbar-color:#8dabb066 transparent}
.callback-ui .cb-status,.callback-ui .cb-error,.callback-ui .cb-hours{font-size:12px;line-height:1.6;text-align:center;margin:12px 0 0;overflow-wrap:anywhere}
.callback-ui .cb-status:empty,.callback-ui .cb-error:empty,.callback-ui .cb-hours:empty{display:none}
.callback-ui .cb-error{color:#ffcfb8}
.callback-ui .cb-hours{font-size:10px;color:#b9c4b4}
.callback-ui .cb-code{width:100%;border:1px solid #566346;border-radius:9px;padding:12px;background:#0d140a;color:#f4f5ec;letter-spacing:.25em;font-size:18px}
.callback-ui .cb-action{display:block;width:100%;min-height:44px;border:1px solid var(--cb-accent);border-radius:9px;margin:16px 0 0;padding:10px;color:#102820;background:var(--cb-accent);font:inherit;font-size:12px;cursor:pointer}
.callback-ui .cb-secondary{background:transparent;color:var(--cb-accent)}
.callback-ui button:disabled{opacity:.55;cursor:not-allowed}
.callback-ui .cb-contact{display:inline-flex;gap:24px;align-items:center;color:var(--cb-accent);margin-top:22px;padding:12px 0;text-underline-offset:8px}
.callback-ui .cb-number input{font-size:16px;min-height:48px}
.callback-ui .cb-consent{font-size:11px;line-height:1.5}
.callback-ui .cb-consent input{accent-color:var(--cb-accent)}
.callback-ui .cb-number:focus-within{outline:2px solid var(--cb-accent);outline-offset:3px}
.callback-ui [data-turnstile]{max-width:100%;min-height:0}
@keyframes cb-intro{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:no-preference){.callback-ui .cb-copy{animation:cb-intro .65s ease-out both}}
@media(max-width:380px){.callback-ui{padding-left:12px;padding-right:12px}.callback-ui h1{font-size:38px}.callback-ui .cb-content{padding-left:14px;padding-right:14px}}
/* Zvanis keeps its existing information panels, form, footer and WebGL artwork. */
body.callback-layout{background:#071a22}
.callback-layout .header{background:#071a22ed;border-bottom:1px solid #294750}
.callback-layout .callback-ui{max-width:1180px}
.callback-how{position:relative;max-width:1100px;margin:auto;padding:64px 32px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;border-top:1px solid #294750}
.callback-how h2{font-size:36px;line-height:1.2;font-weight:400;margin-top:0}
.callback-how dl{margin:24px 0}.callback-how dt{font-size:16px;margin-top:20px}.callback-how dd{margin:6px 0;color:#acc5cb;font-size:14px}
.callback-sphere{position:relative;min-height:360px}
.callback-layout #sphere{position:absolute;width:100%;height:100%;inset:0;mask-image:radial-gradient(ellipse at center,#000 38%,transparent 72%)}
.callback-layout #sphere-fallback{position:absolute;inset:0;background:radial-gradient(circle,#216875,#071a22 65%)}
.callback-layout .callback-footer{position:relative;z-index:1;border-top:1px solid #294750;background:#071a22}
.callback-layout .foot{position:relative;left:auto;right:auto;bottom:auto;max-width:1100px;margin:0 auto;padding:24px 32px}
@media(max-width:700px){.callback-how{grid-template-columns:1fr;gap:24px;padding:32px 22px}.callback-sphere{min-height:260px}.callback-layout .header .textlink{display:none}.callback-layout .header{padding:0 12px}.callback-layout .header .btn{padding:10px;font-size:12px}}

.callback-layout .callback-sphere{background:transparent}

.callback-ui .cb-language{display:block;margin-top:14px;font-size:10px}.callback-ui .cb-language select{display:block;width:100%;min-height:44px;padding:8px;border:1px solid #566346;border-radius:8px;background:#0d140a;color:#f4f5ec;font:inherit;font-size:12px;margin-top:5px}

/* The sphere is a quiet companion across the page, never a framed section. */
.callback-layout .callback-how{grid-template-columns:1fr}
.callback-layout .callback-how>div:last-child{width:min(100%,680px);margin-inline:auto;position:relative;z-index:1}
.callback-layout .callback-how h2{font-size:clamp(26px,3.2vw,36px);overflow-wrap:anywhere}
.callback-layout .callback-how p,.callback-layout .callback-how dd{line-height:1.7}
.callback-layout .callback-sphere{position:fixed;left:0;top:0;width:clamp(150px,15vw,200px);height:clamp(150px,15vw,200px);min-height:0;z-index:0;pointer-events:none;opacity:.38;transition:opacity 1s ease;visibility:hidden;will-change:transform}
.callback-layout .callback-sphere #sphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.callback-layout .callback-sphere #sphere-fallback{background:radial-gradient(circle,#21687599,transparent 68%)}
.callback-layout.callback-call-connected .callback-sphere{opacity:.48}
.callback-layout.panel-open .callback-sphere{opacity:.12}
@media(max-width:700px){
 .callback-layout .callback-sphere{width:150px;height:150px;opacity:.22}
 .callback-layout.callback-call-connected .callback-sphere{opacity:.3}
 .callback-layout .callback-how>div:last-child{width:100%}
}
@media(prefers-reduced-motion:reduce){.callback-layout .callback-sphere{animation:none;transition:none;will-change:auto;opacity:.25}}
@media(prefers-reduced-motion:no-preference){.callback-layout:has([data-callback]:focus-within) .callback-sphere{opacity:.2}}

/* Transparent hero and phone reveal the existing site-wide background. */
.callback-layout .callback-ui{background:transparent}
.callback-layout .cb-device{background:linear-gradient(120deg,#e3f1ff0d,#ffffff03 45%,#cbe1ed0a);box-shadow:inset 0 0 0 1px #d8e7f37a,inset 0 0 0 3px #bcd8ed14,0 22px 65px #0004}
.callback-layout .cb-screen{background:transparent;border:1px solid #d0e5f52e}
.callback-layout .cb-island{background:#060b13b3;box-shadow:inset 0 0 0 1px #ffffff0d}
.callback-layout .cb-number,.callback-layout .cb-number select,.callback-layout .cb-language select,.callback-layout .cb-code{background:#0b1323ba;border-color:#a7b9cd59;color:#f4f5ec}
.callback-layout .cb-language option,.callback-layout .cb-number option{background:#0b1323;color:#f4f5ec}
.callback-layout .cb-subtitle,.callback-layout .cb-copy>p:not(.cb-eyebrow),.callback-layout .cb-privacy{color:#c3ccd5}
.callback-layout .cb-content{text-shadow:0 1px 8px #030810}

/* Invite a demo without implying that an unavailable call can start. */
.callback-ui .cb-call:not(:disabled){cursor:pointer;box-shadow:0 0 22px color-mix(in srgb,var(--cb-accent) 40%,transparent);transition:box-shadow .25s,transform .25s}
.callback-ui .cb-call:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 0 32px color-mix(in srgb,var(--cb-accent) 65%,transparent)}
.callback-ui .cb-contact{transition:text-shadow .25s}
.callback-ui .cb-contact:hover,.callback-ui .cb-contact:focus-visible{text-shadow:0 0 16px var(--cb-accent)}
@keyframes cb-invite{0%,100%{box-shadow:0 0 14px color-mix(in srgb,var(--cb-accent) 25%,transparent)}50%{box-shadow:0 0 30px color-mix(in srgb,var(--cb-accent) 55%,transparent)}}
@media(prefers-reduced-motion:no-preference){.callback-ui .cb-call:not(:disabled){animation:cb-invite 3s ease-in-out infinite}}

/* Callback voice and SMS controls, shared across both brands. */
.callback-ui .cb-language select{width:100%;min-height:44px;border:1px solid #65776a;border-radius:8px;background:#12251d;color:#f4f5ec;padding:8px;font:inherit}
.callback-ui .cb-code{width:100%;min-height:48px;font-size:22px;letter-spacing:.15em;text-align:center}
.callback-ui .cb-action{min-height:44px;white-space:normal;overflow-wrap:anywhere}
.callback-ui .cb-error,.callback-ui .cb-status,.callback-ui .cb-hours{overflow-wrap:anywhere}
.callback-ui [data-resend-turnstile]{margin-top:12px}
.callback-ui .cb-screen{overflow:hidden}
.callback-ui .cb-device{height:660px;min-height:0}

/* Stronger phone/logo contrast; keep the original brand image intact. */
.callback-layout .cb-device{box-shadow:inset 0 0 0 1px #e5f5ffb3,inset 0 0 0 3px #bcd8ed30,0 24px 65px #0007}
.callback-layout .cb-screen{background:linear-gradient(160deg,#112d3b66,#071a2233);border-color:#d0e5f559}
.callback-layout .cb-logo{opacity:1;filter:contrast(1.18) saturate(1.12);background:#fff;border:1px solid #fff;box-shadow:0 8px 24px #0005}
.callback-layout .cb-subtitle,.callback-layout .cb-privacy{color:#dbe8ef}
.callback-layout .cb-call:not(:disabled){background:#8ce8dd;color:#08212a}

/* Readable original logo and supporting copy on the dark phone screen. */
.callback-ui .cb-logo{width:100%;max-width:244px;height:auto;opacity:1;filter:contrast(1.5);background:#fff;border:1px solid #fff;border-radius:10px;box-shadow:0 6px 22px #0005}
.callback-ui .cb-subtitle{color:#f1f5f9;font-size:12px;line-height:1.65}
.callback-ui .cb-content .cb-fields>label,.callback-ui .cb-content .cb-language{color:#f1f5f9;font-size:12px}
.callback-ui .cb-content .cb-consent,.callback-ui .cb-content .cb-unavailable{color:#e2e8f0;font-size:12px;line-height:1.6}
.callback-ui .cb-content .cb-consent a{color:#fff;text-decoration:underline}

/* Approved logo-dot motion sketch: decorative, replayable, no call action. */
.callback-ui .cb-logo-motion{position:relative;display:block;width:100%;max-width:244px;aspect-ratio:1.5;margin:0 auto 16px;padding:0;border:1px solid #fff;border-radius:10px;background:#fff;overflow:hidden;cursor:pointer;box-shadow:0 6px 22px #0005}
.callback-ui .cb-logo-motion .cb-logo{width:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none}
.callback-ui .cb-logo-cover{position:absolute;left:65.8%;top:23.3%;width:8%;height:12%;border-radius:50%;background:#fff;pointer-events:none}
.callback-ui .cb-logo-ball{position:absolute;left:67.9%;top:24.3%;width:5.3%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 20%,#405a7c,#11253f 56%,#030e20);pointer-events:none;animation:cb-logo-bounce 3.5s both}
@keyframes cb-logo-bounce{0%,10%{transform:translateY(0) scale(1)}38%{transform:translateY(690%) scale(1.12,.83)}51%{transform:translateY(345%) scale(.95,1.05)}64%{transform:translateY(690%) scale(1.08,.9)}73%{transform:translateY(550%) scale(1)}81%{transform:translateY(690%) scale(1.04,.95)}88%{transform:translateY(650%) scale(1)}100%{transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.callback-ui .cb-logo-ball{animation:none}}

/* Preserve a phone silhouette on narrow screens; only its contents scroll. */
@media(max-width:360px){.callback-ui .cb-device{height:610px}}

/* The home indicator has its own footer, outside the scrolling form. */
.callback-ui .cb-home{pointer-events:none;z-index:1}

/* On a phone, use the page scroll instead of another scroll inside a mock phone. */
@media(max-width:599px){
 .callback-ui .cb-demo{max-width:420px}
 .callback-ui .cb-device{width:100%;height:auto;min-height:0;padding:0;background:none!important;box-shadow:none!important;border-radius:0}
 .callback-ui .cb-screen{height:auto;overflow:visible;border:0!important;border-radius:0;background:none!important}
 .callback-ui .cb-top,.callback-ui .cb-home{display:none}
 .callback-ui .cb-content{height:auto;overflow:visible;padding:16px 0}
 .callback-ui .cb-logo-motion{max-width:160px}
 .callback-ui .cb-consent{min-height:44px;align-items:center}
}

/* Preserve a recognisable smartphone silhouette even when the demo form is closed. */
@media(min-width:600px){
 .callback-ui .cb-device{width:350px;height:700px;aspect-ratio:1 / 2}
 .callback-ui[data-demo-coming-soon] .cb-screen{display:flex;flex-direction:column}
 .callback-ui[data-demo-coming-soon] .cb-content{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:28px}
}
.callback-ui[data-demo-coming-soon] .cb-content{height:auto;overflow:visible;padding-bottom:40px}
.callback-ui .cb-coming-contact{text-align:center;text-decoration:none}
.callback-ui .cb-call-activity{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0;color:var(--cb-accent);font-variant-numeric:tabular-nums}
.callback-ui .cb-call-activity[hidden],.callback-ui [data-call-duration][hidden]{display:none}
.cb-call-waves{display:flex;align-items:center;gap:4px;height:28px}
.cb-call-waves i{display:block;width:4px;height:8px;border-radius:4px;background:currentColor}
.callback-ui[data-call-status="ringing"] .cb-call-waves,.callback-ui[data-call-status="dialing"] .cb-call-waves{animation:cb-call-pulse 1.5s ease-in-out infinite}
.callback-ui[data-call-status="connected"]:not([data-call-elapsed-limit="true"]) .cb-call-waves i{animation:cb-call-wave 1s ease-in-out infinite alternate}
.cb-call-waves i:nth-child(2),.cb-call-waves i:nth-child(4){animation-delay:-.4s!important}
.cb-call-waves i:nth-child(3){animation-delay:-.7s!important}
@keyframes cb-call-wave{to{height:26px}}
@keyframes cb-call-pulse{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.callback-ui .cb-call-waves,.callback-ui .cb-call-waves i{animation:none!important}}