/* ── Hero with real app screenshots ───────────────────────────────────────
   Screenshots are rendered from store_assets/web_screens (node render.js). */
.overflow-x-clip { overflow-x: clip; }
.qhero { padding: 36px 0 64px;
    background: radial-gradient(ellipse 60% 50% at 85% 0%, rgba(16,185,129,.09), transparent 70%),
        radial-gradient(ellipse 50% 40% at 0% 60%, rgba(16,185,129,.06), transparent 70%); }
.qhero-title { font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 800; line-height: 1.08;
    letter-spacing: -1.2px; margin: 0; color: var(--text-main); max-width: 15ch; }
.qhero-title span { color: var(--cue-green); }
.qhero-sub { color: var(--text-light); font-size: 1rem; line-height: 1.55; margin: 0 0 18px; max-width: 46ch; }
.qhero .btn-cue, .qhero .btn-outline-cue { padding-top: 11px; padding-bottom: 11px; white-space: nowrap; }
.qhero-shot { margin-top: 32px; }

/* App screenshot frame */
.shot-wrap { position: relative; }
.shot-win { border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid #d5dde3;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 30px 60px -28px rgba(6,78,59,.35); }
.shot-win > img { display: block; width: 100%; height: auto; }

/* Phone frame: bezel comes from the image margin, not padding (padding % resolves against the parent) */
.shot-phone { position: absolute; z-index: 2; border-radius: 13.5%/6.4%;
    background: linear-gradient(150deg,#2c2e33,#111215 35%,#0b0c0e 70%,#24262b);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 1px rgba(10,11,13,.6), 0 22px 44px -18px rgba(15,17,21,.55); }
.shot-phone img { display: block; width: 95%; height: auto; margin: 2.5%; border-radius: 11.4%/5.3%; }
.shot-phone::after { content: ""; position: absolute; left: 50%; top: 2.3%; width: 3.2%; aspect-ratio: 1;
    transform: translateX(-50%); border-radius: 50%; background: #050608; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.shot-phone::before { content: ""; position: absolute; right: -2px; top: 22%; width: 2px; height: 14%;
    border-radius: 0 2px 2px 0; background: #2a2c31; box-shadow: 0 calc(100% + 30px) 0 #2a2c31; }
/* Phone ki height ~2.27x width hai; 25% se upar jaye to chhoti screens par window ke title bar se takrata hai */
.shot-wrap .shot-phone { width: 25%; right: 12px; bottom: 12px; }
@media (min-width: 576px) { .shot-wrap .shot-phone { right: 24px; bottom: 20px; } }
@media (min-width: 992px) { .shot-wrap .shot-phone { width: 20%; } }

/* ── Product tour ──────────────────────────────────────────────────────── */
.qtour { padding: 72px 0; background: var(--bg-light); border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.qtour h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.6px; margin-bottom: 8px; }
.qtour-lead { color: var(--text-light); max-width: 58ch; margin: 0 0 28px; }
.qtour-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 0 24px; }
.qtour-tabs::-webkit-scrollbar { display: none; }
.qtour-tab { flex: none; border: 1px solid #dbe3ea; background: #fff; color: #334155; font-size: 13.5px; font-weight: 600;
    padding: 8px 14px; border-radius: 999px; transition: background .2s, color .2s, border-color .2s; }
.qtour-tab:hover { border-color: var(--cue-green); color: var(--cue-dark); }
.qtour-tab[aria-selected="true"] { background: var(--cue-dark); border-color: var(--cue-dark); color: #fff; }
.tour-stack { display: grid; grid-template-columns: minmax(0,1fr); }
.tour-stack > .tour-panel { grid-area: 1/1; transition: opacity .3s, visibility .3s; }
.tour-panel.is-off { opacity: 0; visibility: hidden; }
.tour-copy h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.6px; line-height: 1.15; margin-bottom: 12px; }
.tour-copy p { color: var(--text-light); font-size: 1.05rem; line-height: 1.6; margin-bottom: 20px; }
.tour-copy ul { list-style: none; padding: 0; margin: 0; }
.tour-copy li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; font-weight: 500; color: #1e293b;
    padding: 12px 0; border-top: 1px solid #e2e8f0; margin: 0; }
.tour-copy li:last-child { border-bottom: 1px solid #e2e8f0; }
.tour-copy li i { color: var(--cue-green); font-size: 20px; flex: none; margin-top: 1px; }
/* Desktop par text block image ke saath chipka rahe, column ke left kinare par na latke */
@media (min-width: 992px) { .tour-copy { max-width: 360px; margin-left: auto; } }
.qtour-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.qtour-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #dbe3ea; background: #fff; color: var(--text-main);
    display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; transition: border-color .2s, color .2s; }
.qtour-arrow:hover { border-color: var(--cue-green); color: var(--cue-green); }
.qtour-dots { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; }
.qtour-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #cbd5e1; overflow: hidden;
    position: relative; transition: width .3s, background .3s; }
.qtour-dot[aria-current="true"] { width: 34px; background: #cfe9de; }
.qtour-dot[aria-current="true"]::after { content: ""; position: absolute; inset: 0; background: var(--cue-green);
    transform-origin: left; animation: qtour-fill var(--tour-interval, 2000ms) linear forwards; }
.qtour.is-paused .qtour-dot::after { animation-play-state: paused; }
@keyframes qtour-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 575.98px) {
    .qhero { padding-top: 24px; }
    .qtour { padding: 52px 0; }
    .qtour-ctl { gap: 10px; }
}