/* Quello Interface Evolution — lightweight, theme-aware components */
.evolution-showcase,.evolution-steps{margin:0 0 clamp(46px,7vw,88px);min-width:0}
.evolution-heading{max-width:720px;margin:0 0 22px}
.evolution-heading h2{margin:9px 0 10px;color:var(--text-strong);font-size:clamp(25px,3.5vw,38px);line-height:1.12;letter-spacing:-.035em}
.evolution-heading p{max-width:620px;margin:0;color:var(--text-3);font-size:15px;line-height:1.7}
.evolution-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.evolution-card{position:relative;min-width:0;padding:22px;border:1px solid var(--line-strong);border-radius:19px;background:var(--surface);box-shadow:0 10px 30px rgba(18,12,42,.055);transition:transform .2s ease,border-color .2s ease,background-color .2s ease}
.evolution-card:hover{transform:translateY(-3px);border-color:var(--line-hover);background:var(--surface-2)}
.evolution-icon{display:grid;place-items:center;width:39px;height:39px;margin-bottom:17px;border:1px solid rgba(137,105,255,.25);border-radius:12px;background:rgba(137,105,255,.11);color:var(--accent-text);font-size:20px}
.evolution-card h3{margin:0 0 8px;color:var(--text-strong);font-size:17px;letter-spacing:-.02em}
.evolution-card p{margin:0;color:var(--text-3);font-size:13px;line-height:1.7}
.evolution-step-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0;margin:24px 0 17px;list-style:none;counter-reset:evolution}
.evolution-step-list li{display:flex;gap:12px;align-items:flex-start;min-width:0;padding:16px 14px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2)}
.evolution-step-list li>span{flex:0 0 auto;color:var(--accent-text);font:800 12px/1.5 ui-monospace,monospace;letter-spacing:.08em}
.evolution-step-list li div{display:grid;gap:5px;min-width:0}
.evolution-step-list strong{color:var(--text-strong);font-size:13px;line-height:1.35}
.evolution-step-list small{color:var(--text-3);font-size:11px;line-height:1.5}
.evolution-steps-link{display:inline-flex;align-items:center;gap:7px;color:var(--accent-text);font-size:13px;font-weight:750;text-decoration:none}
.evolution-steps-link:hover{text-decoration:underline;text-underline-offset:4px}
/* A moving tab indicator without layout reads or per-scroll work. */
.site-tabs-inner{position:relative}
.site-tab-indicator{position:absolute;bottom:0;left:0;height:2px;width:0;border-radius:3px;background:var(--accent);opacity:0;pointer-events:none;transform:translateX(0);transition:transform .22s ease,width .22s ease,opacity .18s ease}
.site-tabs.has-indicator .site-tab.active::after{opacity:0}
.site-tabs.has-indicator .site-tab-indicator{opacity:1}
/* Consistent feedback surface for the existing toast helper. */
.q-toast{max-width:min( calc(100vw - 32px), 420px );padding:12px 16px;border:1px solid var(--line-strong);border-radius:13px;background:var(--surface-strong,var(--surface));color:var(--text-strong);box-shadow:0 14px 38px rgba(8,5,24,.2);font-size:13px;font-weight:650;line-height:1.45;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.q-toast.show{animation:q-toast-in .22s ease both}
@keyframes q-toast-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
/* Lightweight image loading placeholder; removed as soon as the image settles. */
img.q-image-pending{background:linear-gradient(110deg,var(--surface-2) 8%,var(--surface-3) 18%,var(--surface-2) 33%);background-size:200% 100%}
@media(min-width:701px) and (hover:hover){.evolution-card:hover .evolution-icon{border-color:rgba(137,105,255,.4)}}
@media(max-width:800px){.evolution-grid{grid-template-columns:1fr 1fr}.evolution-step-list{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.evolution-grid,.evolution-step-list{grid-template-columns:1fr}.evolution-card{padding:18px}.evolution-step-list li{padding:14px}.evolution-heading p{font-size:14px}}
@media(hover:none),(max-width:700px){.evolution-card:hover{transform:none}.q-toast{backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.evolution-card,.site-tab-indicator,.q-toast.show{transition:none!important;animation:none!important}.evolution-card:hover{transform:none}}