/* Animated scenes fly elements in from outside the viewport (e.g. the
   business-card phone starts at translateX(150px)); without this guard the
   layout viewport inflates past the screen on mobile — pages become
   pinch-shrinkable and fixed banners stretch off-screen. */
html, body { overflow-x: hidden; overflow-x: clip; }

/* landing.css — custom styles + hero story animation (Tailwind handles layout) */

html {
    scroll-behavior: smooth;
}

/* "ส้มขัดเกลา" — one soft peach glow near the top, sized in PIXELS so it stays
   the same subtle size at any viewport width (percentage sizes ballooned into
   an orange wash on wide screens). No left-side glow. */
body {
    background-color: #fffcf8;
    background-image:
        radial-gradient(760px 420px at 78% -140px, rgba(255, 203, 160, 0.50) 0%, transparent 72%),
        radial-gradient(1200px 340px at 50% -180px, rgba(255, 168, 110, 0.05) 0%, transparent 70%);
    background-repeat: no-repeat;
}

/* Header: transparent over the hero only at the very top. Two independent
   states (set in landing.js):
   .solid   — frosted bg; toggles the instant you scroll (>4px) so hero content
              never shows through / collides with the logo. No height change,
              so this can toggle freely without flicker.
   .compact — the roomy→tight height change; hysteresis-gated (add >90, remove
              <40) so the changing header height can't oscillate at a threshold. */
.site-header {
    border-bottom: 1px solid transparent;
    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header.solid {
    background: rgba(255, 252, 248, 0.86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom-color: rgba(255, 214, 180, 0.65);
    box-shadow: 0 6px 22px -16px rgba(120, 60, 10, 0.45);
}
.hdr-inner { transition: padding .2s ease; }
.site-header:not(.compact) .hdr-inner { padding-top: 2.5rem; padding-bottom: 1.05rem; }
.site-header.compact .hdr-inner { padding-top: .7rem; padding-bottom: .7rem; }

#username-input::placeholder {
    font-weight: 500;
    color: #cbd5e1;
}

/* "ส้มขัดเกลา" — the primary CTA carries a soft branded glow (accent, not flood) */
#register-btn:not(:disabled),
#otp-btn {
    box-shadow: 0 14px 26px -12px rgba(242, 106, 27, 0.55);
}

/* Step number chips (how-it-works) with gradient glow */
.step-no {
    position: absolute;
    top: -16px;
    left: 24px;
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff8c61, #ff6b35);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(255, 107, 53, 0.35);
}

/* How-it-works cards subtle hover effect */
section.mt-24 div.bg-white {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    border: 1px solid rgba(255, 107, 53, 0.08);
}
section.mt-24 div.bg-white:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(220, 100, 50, 0.08);
}

/* Features cards styling */
section.grid div.bg-white {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    border: 1px solid rgba(255, 107, 53, 0.08);
}
section.grid div.bg-white:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(220, 100, 50, 0.08);
}

/* =====================================================================
   HERO STORY SCENE — a 15s looping mini-story:
    0.9–4.1s   customer questions pop in one by one
    5.3–6.9s   seller replies with the waddee link, questions fade
    7.5–11.4s  mini storefront rises, buttons cascade in
   13.8–15s    everything fades out, loop restarts
   ===================================================================== */

.scene {
    position: relative;
    height: 480px;
    max-width: 400px;
    margin: 0 auto;
}

/* ---- customer question bubbles ---- */
.q {
    position: absolute;
    left: 0;
    z-index: 3;               /* fly OVER the storefront, not behind it */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 107, 53, 0.12);
    border-radius: 20px 20px 20px 6px;
    box-shadow: 0 8px 24px rgba(120, 63, 10, 0.06);
    padding: 12px 18px;
    font-size: 14.5px;
    font-weight: 700;
    color: #3f3128;
    opacity: 0;
    animation: 15s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
.q1 { top: 6px;   animation-name: q-show-1; }
.q2 { top: 60px;  left: 26px; animation-name: q-show-2; }
.q3 { top: 114px; animation-name: q-show-3; }
.q4 { top: 168px; left: 18px; animation-name: q-show-4; }

/* pop in with nice spring, hold — then a little hop UP before diving onto the phone.
   The shadow deepens + spreads at the hop (bubble lifts off the surface) and
   fades as it dives away, selling the height. */
@keyframes q-show-1 {
    0%, 3%   { opacity: 0; transform: translate(0, 18px) scale(0.9); box-shadow: 0 4px 12px rgba(120, 63, 10, 0.06); }
    6%, 44%  { opacity: 1; transform: translate(0, 0) scale(1); box-shadow: 0 8px 20px rgba(120, 63, 10, 0.16); }
    47%      { opacity: 1; transform: translate(65px, -30px) scale(0.88); box-shadow: 0 34px 56px rgba(120, 63, 10, 0.40); animation-timing-function: ease-in; }
    52%      { opacity: 1; transform: translate(112px, 242px) scale(0.32); box-shadow: 0 6px 14px rgba(120, 63, 10, 0.05); }
    54%,100% { opacity: 0; transform: translate(118px, 264px) scale(0.1); box-shadow: 0 0 0 rgba(120, 63, 10, 0); }
}
@keyframes q-show-2 {
    0%, 10%  { opacity: 0; transform: translate(0, 18px) scale(0.9); box-shadow: 0 4px 12px rgba(120, 63, 10, 0.06); }
    13%, 46% { opacity: 1; transform: translate(0, 0) scale(1); box-shadow: 0 8px 20px rgba(120, 63, 10, 0.16); }
    49%      { opacity: 1; transform: translate(55px, -26px) scale(0.88); box-shadow: 0 32px 52px rgba(120, 63, 10, 0.40); animation-timing-function: ease-in; }
    54%      { opacity: 1; transform: translate(88px, 192px) scale(0.32); box-shadow: 0 6px 14px rgba(120, 63, 10, 0.05); }
    56%,100% { opacity: 0; transform: translate(92px, 212px) scale(0.1); box-shadow: 0 0 0 rgba(120, 63, 10, 0); }
}
@keyframes q-show-3 {
    0%, 17%  { opacity: 0; transform: translate(0, 18px) scale(0.9); box-shadow: 0 4px 12px rgba(120, 63, 10, 0.06); }
    20%, 48% { opacity: 1; transform: translate(0, 0) scale(1); box-shadow: 0 8px 20px rgba(120, 63, 10, 0.16); }
    51%      { opacity: 1; transform: translate(60px, -24px) scale(0.88); box-shadow: 0 32px 52px rgba(120, 63, 10, 0.40); animation-timing-function: ease-in; }
    56%      { opacity: 1; transform: translate(110px, 138px) scale(0.32); box-shadow: 0 6px 14px rgba(120, 63, 10, 0.05); }
    58%,100% { opacity: 0; transform: translate(116px, 158px) scale(0.1); box-shadow: 0 0 0 rgba(120, 63, 10, 0); }
}
@keyframes q-show-4 {
    0%, 24%  { opacity: 0; transform: translate(0, 18px) scale(0.9); box-shadow: 0 4px 12px rgba(120, 63, 10, 0.06); }
    27%, 50% { opacity: 1; transform: translate(0, 0) scale(1); box-shadow: 0 8px 20px rgba(120, 63, 10, 0.16); }
    53%      { opacity: 1; transform: translate(50px, -20px) scale(0.88); box-shadow: 0 30px 50px rgba(120, 63, 10, 0.40); animation-timing-function: ease-in; }
    58%      { opacity: 1; transform: translate(96px, 84px) scale(0.32); box-shadow: 0 6px 14px rgba(120, 63, 10, 0.05); }
    60%,100% { opacity: 0; transform: translate(102px, 102px) scale(0.1); box-shadow: 0 0 0 rgba(120, 63, 10, 0); }
}

/* ---- seller answer bubble ---- */
.answer {
    position: absolute;
    top: 4px;
    right: 0;
    z-index: 2;
    background: linear-gradient(135deg, #ff8c61, #ff6b35);
    color: #fff;
    border-radius: 20px 20px 6px 20px;
    box-shadow: 0 10px 28px rgba(255, 107, 53, 0.35);
    padding: 14px 18px;
    font-size: 14.5px;
    font-weight: 700;
    max-width: 240px;
    opacity: 0;
    animation: answer-show 15s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
.answer .chip {
    display: block;
    margin-top: 8px;
    background: #fff;
    color: #c5380b;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13.5px;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    animation: chip-pulse 15s ease-in-out infinite;
}
@keyframes answer-show {
    0%, 31%  { opacity: 0; transform: translateY(20px) scale(0.9); }
    35%, 92% { opacity: 1; transform: translateY(0) scale(1); }
    97%,100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes chip-pulse {
    0%, 35%       { transform: scale(1); }
    38%           { transform: scale(1.05); }
    41%, 100%     { transform: scale(1); }
}

/* ---- mini storefront (phone card) ---- */
.mini-phone {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;
    transform: translateX(-50%);
    width: 270px;
    background: #fffdfb;
    border: 1px solid rgba(255, 107, 53, 0.15);
    border-radius: 28px;
    padding: 18px 16px 16px;
    box-shadow: 0 20px 48px rgba(120, 63, 10, 0.15), inset 0 0 0 1px #fff;
    opacity: 0;
    animation: phone-rise 15s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes phone-rise {
    0%, 38%  { opacity: 0; transform: translateX(-50%) translateY(50px); }
    44%, 92% { opacity: 1; transform: translateX(-50%) translateY(0); }
    97%,100% { opacity: 0; transform: translateX(-50%) translateY(30px); }
}

.mp-head { display: flex; gap: 11px; align-items: center; margin-bottom: 14px; }
.mp-ava {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #ff8c61, #ff6b35); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px; flex: 0 0 44px;
    box-shadow: 0 4px 10px rgba(255, 107, 53, 0.3);
}
.mp-t b { font-size: 14.5px; display: block; color: #3f3128; }
.mp-t i {
    font-style: normal; font-size: 11.5px; color: #8a7a6d;
    display: flex; align-items: center; gap: 5px;
}
.mp-badge {
    display: inline-block; width: 15px; height: 15px; border-radius: 50%;
    background: #ff6b35; color: #fff; font-size: 10px; line-height: 15px;
    text-align: center; vertical-align: 1px; font-weight: 900;
}
.mp-dot { width: 7px; height: 7px; border-radius: 50%; background: #0e9f6e; display: inline-block; box-shadow: 0 0 0 2px rgba(14, 159, 110, 0.15); }

.mp-btn {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid rgba(255, 107, 53, 0.12);
    border-radius: 14px; padding: 10px 14px;
    font-size: 12.5px; font-weight: 700; color: #3f3128;
    margin-top: 8px;
    box-shadow: 0 4px 10px rgba(120, 63, 10, 0.03);
    opacity: 0;
    animation: 15s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
.mp-btn.b1 { animation-name: btn-in-1; }
.mp-btn.b2 { animation-name: btn-in-2; }
.mp-btn.b3 { animation-name: btn-in-3; }
.mp-btn.b4 { animation-name: btn-in-4; }

.mp-ic {
    width: 26px; height: 26px; border-radius: 9px; flex: 0 0 26px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 13px;
}
.mp-line { background: #06c755; border-color: #06c755; color: #fff; box-shadow: 0 4px 10px rgba(6, 199, 85, 0.15); }
.mp-line .mp-ic { background: rgba(255, 255, 255, 0.25); }
.mp-call { background: #0e9f6e; }
.mp-shop { background: #ee4d2d; }
.mp-pay  { background: #ff6b35; }

/* each button pops right after "its" question lands on the storefront */
@keyframes btn-in-1 {
    0%, 53%  { opacity: 0; transform: translateY(12px) scale(0.92); }
    56%      { opacity: 1; transform: translateY(0) scale(1.06); }
    58%, 92% { opacity: 1; transform: translateY(0) scale(1); }
    97%,100% { opacity: 0; }
}
@keyframes btn-in-2 {
    0%, 55%  { opacity: 0; transform: translateY(12px) scale(0.92); }
    58%      { opacity: 1; transform: translateY(0) scale(1.06); }
    60%, 92% { opacity: 1; transform: translateY(0) scale(1); }
    97%,100% { opacity: 0; }
}
@keyframes btn-in-3 {
    0%, 57%  { opacity: 0; transform: translateY(12px) scale(0.92); }
    60%      { opacity: 1; transform: translateY(0) scale(1.06); }
    62%, 92% { opacity: 1; transform: translateY(0) scale(1); }
    97%,100% { opacity: 0; }
}
@keyframes btn-in-4 {
    0%, 59%  { opacity: 0; transform: translateY(12px) scale(0.92); }
    62%      { opacity: 1; transform: translateY(0) scale(1.06); }
    64%, 92% { opacity: 1; transform: translateY(0) scale(1); }
    97%,100% { opacity: 0; }
}

/* =====================================================================
   BUSINESS-CARD SCENE — 12s loop:
    0.0–2.0s  paper cards tumble away (กระดาษหมดยุค)
    2.2–3.0s  waddee digital card pops up with QR
    4.4–5.5s  phone slides in, scan beam sweeps the QR
    7.4–11s   contact saved on the phone (✓)
   11.2–12s   fade out, restart
   ===================================================================== */

.bc-scene {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto;
}

/* old paper cards */
.bc-paper {
    position: absolute;
    left: 40px; top: 40px;
    width: 150px; height: 88px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 14px 12px;
    display: flex; flex-direction: column; gap: 8px;
    opacity: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    animation: 12s ease-in-out infinite;
}
.bc-paper i { display: block; height: 7px; border-radius: 4px; background: #E5E7EB; }
.bc-paper i:nth-child(1) { width: 70%; background: #D1D5DB; }
.bc-paper i:nth-child(2) { width: 90%; }
.bc-paper i:nth-child(3) { width: 55%; }
.bc-paper.p1 { transform: rotate(-6deg); animation-name: bc-paper-1; }
.bc-paper.p2 { left: 90px; top: 62px; transform: rotate(7deg); animation-name: bc-paper-2; }
@keyframes bc-paper-1 {
    0%       { opacity: 1; transform: rotate(-6deg) translateY(0); }
    12%      { opacity: 1; transform: rotate(-6deg) translateY(0); }
    20%,100% { opacity: 0; transform: rotate(-28deg) translate(-60px, 150px); }
}
@keyframes bc-paper-2 {
    0%       { opacity: 1; transform: rotate(7deg) translateY(0); }
    14%      { opacity: 1; transform: rotate(7deg) translateY(0); }
    23%,100% { opacity: 0; transform: rotate(30deg) translate(70px, 150px); }
}

/* the waddee digital card */
.bc-card {
    position: absolute;
    left: 0; top: 34px;
    width: 220px;
    background: rgba(255, 253, 251, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 107, 53, 0.16);
    border-radius: 20px;
    padding: 16px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 16px 36px rgba(120, 63, 10, 0.12), inset 0 0 0 1px #fff;
    opacity: 0;
    animation: bc-card-in 12s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    z-index: 1;
}
@keyframes bc-card-in {
    0%, 18%  { opacity: 0; transform: translateY(30px) scale(0.92); }
    22%      { opacity: 1; transform: translateY(0) scale(1.04); }
    25%, 93% { opacity: 1; transform: translateY(0) scale(1); }
    97%,100% { opacity: 0; transform: translateY(16px) scale(0.95); }
}
.bc-info { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.bc-ava {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #ff8c61, #ff6b35); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
    box-shadow: 0 3px 8px rgba(255, 107, 53, 0.25);
}
.bc-info b { font-size: 12.5px; line-height: 1.3; text-align: left; color: #3f3128; }
.bc-chip {
    background: #fff; border: 1px solid rgba(255, 107, 53, 0.2);
    border-radius: 999px; padding: 3px 10px;
    font-size: 9.5px; font-weight: 800; color: #c5380b;
    white-space: nowrap;
}
.bc-chip.work {
    background: #ff6b35; border-color: #ff6b35; color: #fff;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.25);
}
.bc-qr { width: 62px; height: 62px; flex: 0 0 62px; border-radius: 8px; border: 1px solid rgba(255, 107, 53, 0.1); padding: 2px; background: #fff; }

/* scan beam sweeping the QR */
.bc-beam {
    position: absolute;
    right: 18px; top: 18px;
    width: 58px; height: 3px;
    border-radius: 2px;
    background: #06C755;
    box-shadow: 0 0 8px rgba(6, 199, 85, 0.8);
    opacity: 0;
    animation: bc-beam 12s linear infinite;
}
@keyframes bc-beam {
    0%, 44%   { opacity: 0; transform: translateY(0); }
    46%       { opacity: 1; transform: translateY(0); }
    50%       { opacity: 1; transform: translateY(54px); }
    54%       { opacity: 1; transform: translateY(4px); }
    58%, 100% { opacity: 0; transform: translateY(54px); }
}

/* the scanning phone */
.bc-phone {
    position: absolute;
    right: 0; top: 2px;
    width: 136px; height: 264px;
    background: #1b1b1f;
    border-radius: 28px;
    padding: 8px;
    box-shadow: 0 20px 48px rgba(0,0,0,0.15);
    opacity: 0;
    animation: bc-phone-in 12s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    z-index: 2;
}
@keyframes bc-phone-in {
    0%, 36%  { opacity: 0; transform: translateX(150px) rotate(6deg); }
    42%, 93% { opacity: 1; transform: translateX(0) rotate(0deg); }
    97%,100% { opacity: 0; transform: translateX(60px); }
}
.bc-screen {
    position: relative; width: 100%; height: 100%;
    background: #fff; border-radius: 20px; overflow: hidden;
}
.bc-scanning {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: #F8FAFC;
    font-size: 11px; font-weight: 700; color: #64748b;
    animation: bc-scanning 12s ease-in-out infinite;
}
@keyframes bc-scanning {
    0%, 40%   { opacity: 1; }
    60%, 100% { opacity: 0; }
}
.bc-contact {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 8px;
    opacity: 0;
    animation: bc-contact 12s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes bc-contact {
    0%, 60%  { opacity: 0; transform: translateY(10px); }
    64%, 93% { opacity: 1; transform: translateY(0); }
    97%,100% { opacity: 0; }
}
.bc-cava {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, #ff8c61, #ff6b35); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px;
    box-shadow: 0 4px 10px rgba(255, 107, 53, 0.25);
}
.bc-contact b { font-size: 12.5px; color: #3f3128; }
.bc-contact span { font-size: 10px; color: #64748b; }
.bc-contact .bc-work {
    margin-top: 2px;
    background: #FFF1E4; color: #c5380b;
    border-radius: 999px; padding: 2px 8px;
    font-size: 9.5px; font-weight: 800;
}
.bc-contact em {
    font-style: normal;
    margin-top: 5px;
    background: #dcfce7; color: #166534;
    border-radius: 999px; padding: 3px 10px;
    font-size: 9.5px; font-weight: 800;
    box-shadow: 0 2px 6px rgba(22, 101, 52, 0.1);
    animation: bc-saved-pop 12s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes bc-saved-pop {
    0%, 66%  { transform: scale(0.6); }
    70%      { transform: scale(1.1); }
    73%,100% { transform: scale(1); }
}

/* =====================================================================
   LIVE THEME DEMO — the patook mockup with 3 switchable skins
   ===================================================================== */

.demo-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.dchip {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid rgba(255, 107, 53, 0.18);
    background: #fff; color: #41332A;
    padding: 10px 20px; border-radius: 999px;
    font-family: inherit; font-size: 14.5px; font-weight: 700;
    cursor: pointer; transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 12px rgba(120, 63, 10, 0.04);
}
.dchip:hover { transform: translateY(-2px); border-color: #ff6b35; box-shadow: 0 8px 16px rgba(255, 107, 53, 0.1); }
.dchip[aria-pressed="true"] { background: #ff6b35; border-color: #ff6b35; color: #fff; box-shadow: 0 6px 18px rgba(255, 107, 53, 0.35); }
.dchip i { width: 10px; height: 10px; border-radius: 50%; }

.demo-wrap { position: relative; margin-top: 32px; display: flex; justify-content: center; }
.demo-wrap::before {
    content: '';
    position: absolute; top: 40px; left: 50%;
    transform: translateX(-50%);
    width: 440px; height: 440px; max-width: 95vw;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.16), transparent 70%);
    pointer-events: none;
}

/* realistic phone mock */
.dphone {
    position: relative;
    width: 310px;
    border-radius: 46px; padding: 12px;
    background: #1b1b1f;
    box-shadow: 0 30px 70px rgba(120, 63, 10, 0.22), inset 0 0 0 2px #2e2e34;
    animation: demo-float 6s ease-in-out infinite alternate;
    /* skin: classic */
    --d-bg: #FFF9F4; --d-card: rgba(255, 255, 255, 0.85); --d-ink: #2E2520; --d-sub: #8c7b70;
    --d-accent: #ff6b35; --d-accent-ink: #FFFFFF;
    --d-cover: linear-gradient(120deg, #ff8c61, #ff6b35);
    --d-hair: rgba(255, 107, 53, 0.15);
    transition: all 0.3s ease;
}

/* Glass glare reflection on phone screen */
.dphone::after {
    content: '';
    position: absolute;
    top: 12px; left: 12px; right: 12px; bottom: 12px;
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 10;
}

@keyframes demo-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-12px); }
}
.dphone[data-skin="night"] {
    --d-bg: #0d0b11; --d-card: rgba(22, 19, 29, 0.75); --d-ink: #f3eeff; --d-sub: #988dae;
    --d-accent: #C9A961; --d-accent-ink: #0d0b11;
    --d-cover: linear-gradient(120deg, #251c30, #403056);
    --d-hair: rgba(201, 169, 97, 0.22);
}
.dphone[data-skin="sweet"] {
    --d-bg: #fff0f3; --d-card: rgba(255, 255, 255, 0.88); --d-ink: #4a2e35; --d-sub: #a6838c;
    --d-accent: #E75480; --d-accent-ink: #FFFFFF;
    --d-cover: linear-gradient(120deg, #f8a5c2, #fbc7d4);
    --d-hair: rgba(231, 84, 128, 0.18);
}
.dp-screen {
    border-radius: 34px; overflow: hidden;
    background: var(--d-bg); color: var(--d-ink);
    font-size: 13px; line-height: 1.5; text-align: center;
    transition: background 0.35s, color 0.35s;
    backdrop-filter: blur(12px);
}
.dp-notch { height: 26px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 11; }
.dp-notch i { width: 88px; height: 18px; background: #1b1b1f; border-radius: 999px; }
.dp-cover { height: 75px; margin-top: -26px; background: var(--d-cover); transition: background 0.35s; }
.dp-head { padding: 0 16px 8px; margin-top: -30px; }
.dp-ava {
    width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 6px;
    background: var(--d-accent); color: var(--d-accent-ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800;
    border: 3px solid var(--d-bg);
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
    transition: background 0.35s, border-color 0.35s;
}
.dp-name { font-weight: 800; font-size: 16.5px; }
.dp-verify {
    display: inline-block; width: 16px; height: 16px; border-radius: 50%;
    background: var(--d-accent); color: var(--d-accent-ink);
    font-size: 10px; line-height: 16px; font-weight: 900; vertical-align: 1px;
}
.dp-bio { color: var(--d-sub); font-size: 12.5px; margin-top: 2px; }
.dp-status {
    display: inline-flex; gap: 6px; align-items: center; margin-top: 8px;
    background: var(--d-card); border: 1px solid var(--d-hair); border-radius: 999px;
    padding: 4px 14px; font-size: 11.5px; font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.dp-status b { color: #0E9F6E; }
.dp-status i { width: 7px; height: 7px; border-radius: 50%; background: #0E9F6E; box-shadow: 0 0 0 2px rgba(14, 159, 110, 0.15); }
.dp-today {
    margin: 10px 16px 0; padding: 10px 14px; border-radius: 16px; text-align: left;
    background: var(--d-card); border: 1px dashed var(--d-hair); font-size: 12px;
    font-weight: 600;
}
.dp-today b { display: block; font-size: 10.5px; color: var(--d-sub); font-weight: 700; margin-bottom: 2px; }
.dp-links { padding: 12px 16px 4px; display: flex; flex-direction: column; gap: 9px; }
.dp-btn {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px;
    background: var(--d-card); border: 1px solid var(--d-hair); border-radius: 16px;
    font-weight: 700; font-size: 13.5px; text-align: left;
    transition: background 0.35s;
}
.dp-btn small { display: block; font-weight: 500; color: var(--d-sub); font-size: 11px; line-height: 1.3; }
.dp-btn .dp-ic {
    width: 28px; height: 28px; border-radius: 10px; flex: 0 0 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: #fff;
}
.dp-ic.dp-accent { background: var(--d-accent); color: var(--d-accent-ink); }
.dp-btn.line { background: #06C755; border-color: #06C755; color: #fff; box-shadow: 0 4px 10px rgba(6,199,85,0.15); }
.dp-btn.line small { color: rgba(255, 255, 255, 0.85); }
.dp-btn.line .dp-ic { background: rgba(255, 255, 255, 0.22); }
.dp-pay {
    margin: 8px 16px 0; padding: 11px 14px; border-radius: 16px;
    background: var(--d-card); border: 1px dashed var(--d-accent);
    display: flex; gap: 12px; align-items: center; text-align: left;
    transition: background 0.35s, border-color 0.35s;
}
.dp-qr { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 8px; background: #fff; padding: 3px; border: 1px solid rgba(0,0,0,0.05); }
.dp-pay-t b { display: block; font-size: 13px; font-weight: 800; }
.dp-pay-t span { font-size: 11px; color: var(--d-sub); }
.dp-foot { padding: 12px 16px 16px; font-size: 11px; color: var(--d-sub); }

/* ---- accessibility: no motion -> show the finished state ---- */
@media (prefers-reduced-motion: reduce) {
    .q, .answer, .mini-phone, .mp-btn, .answer .chip {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .mini-phone { transform: translateX(-50%) !important; }
    .q3, .q4 { display: none; }  /* keep the static layout uncluttered */

    .bc-card, .bc-phone, .bc-contact {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .bc-paper, .bc-scanning, .bc-beam { display: none; }

    .dphone { animation: none !important; }
}

@media (max-width: 767px) {
    .scene { height: 440px; transform: scale(0.92); transform-origin: top center; }
}