/* Approved October concept: scoped header and Hero styles. */
.site-shell { max-width: 1400px; width: calc(100% - 80px); margin: 0 auto; }
.dd-header { height: 92px; display: flex; justify-content: space-between; align-items: center; position: relative; }
.dd-header::after { content: ''; position: absolute; bottom: 0; left: calc((1400px - 100vw) / 2); right: calc((1400px - 100vw) / 2); height: 1px; background: #dddfe7; }
.dd-brand { display: flex; align-items: center; gap: 17px; font-size: 31px; font-weight: 700; letter-spacing: -1.3px; color: #080915; }
.dd-logo { width: 48px; height: 48px; display: grid; place-items: center; background: linear-gradient(145deg,#7851ff,#6036fb); color: white; border-radius: 12px; font-size: 34px; line-height: 1; }
.dd-nav { display: flex; align-items: center; gap: 42px; font-size: 18px; color: #111322; }
.dd-primary { display: inline-flex; justify-content: center; align-items: center; gap: 14px; border: 0; border-radius: 10px; background: linear-gradient(120deg,#7246ff,#603aff); color: white; font-weight: 500; font-size: 20px; min-height: 63px; padding: 0 29px; transition: transform .2s, filter .2s, box-shadow .2s; }
.dd-primary:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 9px 22px #693cff25; }
.dd-primary:active { transform: translateY(0) scale(.98); }
.dd-nav-cta { min-height: 49px; min-width: 140px; font-size: 18px; }
.dd-hero { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0,1.14fr); column-gap: 36px; padding-top: 102px; position: relative; isolation: isolate; }
.dd-copy { padding-top: 1px; }
.dd-eyebrow { display: inline-block; margin: 0 0 32px; padding: 9px 19px; border-radius: 30px; color: #663be7; background: #f2edff; font-size: 13px; font-weight: 500; letter-spacing: 2.2px; }
.dd-copy h1 { margin: 0; max-width: none; font-size: clamp(44px,4.7vw,72px); line-height: 1.13; font-weight: 800; letter-spacing: -3.4px; color: #080915; }
.dd-copy h1 span { background: linear-gradient(110deg,#6136ff,#8763ff); background-clip: text; color: transparent; }
.dd-description { margin: 31px 0 0; font-size: clamp(19px,1.75vw,27px); line-height: 1.47; letter-spacing: -.8px; color: #424354; }
.dd-actions { display: flex; align-items: center; gap: 32px; margin-top: 40px; white-space: nowrap; }
.dd-actions .dd-primary { font-size: 19px; padding-inline: 27px; }
.dd-actions .dd-primary span { font-size: 27px; }
.dd-download { display: inline-flex; gap: 13px; align-items: center; color: #673bff; font-size: 17px; font-weight: 500; }
.dd-download span { border-bottom: 2px solid; font-size: 26px; line-height: 20px; }
.dd-trust { margin: 29px 0 0; font-size: 16px; color: #878896; }
.dd-demo { display: grid; grid-template-columns: 240px minmax(48px,1fr) minmax(0,418px); align-items: center; padding-top: 34px; position: relative; }
.dd-demo::before { content: ''; position: absolute; z-index: -1; inset: -70px -25px -45px -70px; background: radial-gradient(ellipse,#d8c7fa8a 0%,#eae0fb75 38%,transparent 72%); filter: blur(15px); }
.dd-phone { width: 240px; height: 476px; padding: 7px; border: 2px solid #181818; border-radius: 40px; background: linear-gradient(110deg,#151515,#545454 48%,#101010); box-shadow: inset 0 0 0 1px #929292,0 19px 27px #29203920; transition: transform .25s; }
.dd-phone:hover { transform: translateY(-4px); }
.dd-screen { height: 100%; padding: 11px 15px 22px; border-radius: 31px; background: linear-gradient(#fff,#fafafa); position: relative; display: flex; flex-direction: column; }
.dd-status { display: flex; justify-content: space-between; align-items: center; height: 15px; font-size: 10px; color: #13131a; }
.dd-island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 71px; height: 24px; border-radius: 99px; background: #050505; }
.dd-screen h2 { margin: 33px 0 19px; text-align: center; font-size: 16px; letter-spacing: -.4px; }
.dd-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 155px; }
.dd-photos img { width: 100%; height: 155px; object-fit: cover; border-radius: 12px; }
.dd-photos > div { position: relative; }
.dd-photos small { position: absolute; bottom: 10px; right: 6px; color: white; background: #171b1380; padding: 4px; border-radius: 4px; font-size: 9px; }
.dd-ready { margin: 25px 0 20px; text-align: center; font-size: 16px; }
.dd-upload { min-height: 43px; width: 100%; font-size: 14px; border-radius: 10px; padding: 0; }
.dd-no-account { margin-top: auto; text-align: center; font-size: 11px; color: #777b8e; }
.dd-connection { position: relative; width: 100%; padding: 0 14px; }
.dd-connection svg { width: 100%; overflow: visible; }
.dd-connection path { fill: none; stroke: #8154ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 7; animation: dd-flow 3.5s linear infinite; }
.dd-connection .dd-arrow { fill: #774aff; stroke: none; animation: none; }
.dd-connection i { position: absolute; top: 50%; left: 12%; width: 5px; height: 5px; border-radius: 50%; background: #926aff; animation: dd-packet 3s infinite ease-in-out; }
.dd-folder { height: 423px; background: #fff; border: 1px solid #c9c8d2; border-radius: 14px; overflow: hidden; box-shadow: 0 15px 28px #27203817; transition: transform .25s; }
.dd-folder:hover { transform: translateY(-4px); }
.dd-titlebar { display: flex; gap: 8px; align-items: center; height: 44px; padding-inline: 15px; background: linear-gradient(#f5f5f6,#ededf0); border-bottom: 1px solid #dedde5; }
.dd-titlebar i { height: 14px; width: 14px; border-radius: 50%; border: 1px solid #00000012; background: #ff6159; }
.dd-titlebar i:nth-child(2) { background: #ffbe2e; }.dd-titlebar i:nth-child(3) { background: #29c840; }
.dd-folder-body { padding: 31px 25px 17px; }
.dd-folder-heading { display: flex; align-items: center; gap: 22px; margin: 0 25px 22px; }
.dd-folder-icon { position: relative; flex: 0 0 72px; height: 53px; border-radius: 5px; background: linear-gradient(#61caff,#2bb5f9); box-shadow: inset 0 1px #a4e5ff; }
.dd-folder-icon::before { content: ''; position: absolute; top: -8px; left: 0; width: 32px; height: 11px; border-radius: 5px 8px 0 0; background: #4fbffc; }
.dd-folder-heading h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.7px; white-space: nowrap; }
.dd-folder-heading p { margin: 0; color: #269a46; font-size: 14px; white-space: nowrap; }
.dd-received { display: flex; justify-content: center; align-items: center; gap: 11px; margin: 0 auto 24px; width: fit-content; padding: 13px 20px; border-radius: 30px; font-size: 14px; box-shadow: 0 6px 18px #26203b09; border: 1px solid #f3f2f5; }
.dd-received span,.dd-file b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: white; background: #26a647; font-size: 14px; }
.dd-file { display: flex; align-items: center; gap: 20px; height: 87px; border-top: 1px solid #e6e6ee; font-size: 16px; color: #181924; }
.dd-file img { width: 67px; height: 65px; object-fit: cover; border-radius: 6px; }.dd-file b { margin-left: auto; width: 20px; height: 20px; font-weight: 400; }
.dd-flow-labels { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 0 40px 0 73px; margin-top: 29px; font-size: 16px; color: #6d6d7b; gap: 18px; }
.dd-flow-labels span { position: relative; white-space: nowrap; }.dd-flow-labels span::before { content: ''; position: absolute; top: -20px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: #774aff; }
.dd-flow-labels i { flex: 1; border-top: 1px solid #d7c9ff; font-style: normal; text-align: center; color: #b5a1ef; transform: translateY(-20px); line-height: 0; }
.dd-tagline { grid-column: 1 / -1; margin: 78px 0 0; padding: 49px 0 58px; border-top: 1px solid #dcdfe7; text-align: center; color: #181924; font-size: 19px; letter-spacing: -.3px; }
.dd-hero :focus-visible,.dd-header :focus-visible { outline: 3px solid #b297ff; outline-offset: 5px; }
.dd-copy,.dd-demo,.dd-folder { min-width: 0; }
.dd-connection { height: 36px; padding: 0; }
.dd-connection svg { display: none; }
.dd-connection::before { content: ''; position: absolute; top: 50%; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg,transparent,#a585ed80 20%,#a585ed80 80%,transparent); }
.dd-connection::after { content: ''; position: absolute; top: calc(50% - 1px); left: 10%; width: 34%; height: 2px; border-radius: 10px; background: linear-gradient(90deg,transparent,#8050f4); box-shadow: 4px 0 12px #9767ff70; animation: dd-beam 3.2s cubic-bezier(.45,0,.25,1) infinite; }
.dd-connection i { top: calc(50% - 3px); width: 6px; height: 6px; background: #9360ff; box-shadow: 0 0 0 4px #9869ff10,0 0 12px #8954ff60; animation: dd-beam-dot 3.2s cubic-bezier(.45,0,.25,1) infinite; }
.dd-tagline { display: flex; align-items: center; justify-content: center; gap: 20px; position: relative; margin-top: 45px; padding: 25px 0; border: 0; font-size: 15px; color: #686479; }
.dd-tagline::before,.dd-tagline::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg,transparent,#dcd1f4); }
.dd-tagline::after { transform: rotate(180deg); }
@keyframes dd-beam { 0% { left: 8%; opacity: 0; } 20% { opacity: 1; } 78% { opacity: 1; } 100% { left: 58%; opacity: 0; } }
@keyframes dd-beam-dot { 0% { left: 10%; opacity: 0; } 20% { opacity: 1; } 78% { opacity: 1; } 100% { left: 86%; opacity: 0; } }
.dd-copy h1 span { white-space: normal; }
@keyframes dd-flow { to { stroke-dashoffset: -48; } }
@keyframes dd-packet { 0% { left: 12%; opacity: 0; } 20% { opacity: 1; } 90% { left: 82%; opacity: 1; } 100% { left: 82%; opacity: 0; } }
@media(max-width:1480px) { .dd-header::after { left: -40px; right: -40px; }.dd-demo { grid-template-columns: 215px minmax(35px,1fr) minmax(0,360px); }.dd-phone { width: 215px; }.dd-folder-heading { margin-inline: 5px; gap: 15px; }.dd-folder-body { padding-inline: 19px; }.dd-folder-heading h2 { font-size: 19px; }.dd-folder-heading p { font-size: 12px; }.dd-actions { gap: 20px; }.dd-actions .dd-primary { font-size: 16px; padding-inline: 19px; }.dd-download { font-size: 15px; } }
@media(max-width:1100px) { .dd-hero { grid-template-columns: 1fr; row-gap: 50px; padding-top: 65px; }.dd-copy { max-width: 650px; margin: auto; width: 100%; }.dd-copy h1 { font-size: 64px; }.dd-demo { width: min(100%,760px); margin: auto; grid-template-columns: 240px minmax(50px,1fr) minmax(0,418px); }.dd-phone { width: 240px; }.dd-tagline { margin-top: 12px; }.dd-nav { gap: 25px; font-size: 15px; } }
@media(max-width:700px) { .site-shell { width: calc(100% - 36px); margin: 0 auto; }.dd-header { height: 78px; }.dd-header::after { left: -18px; right: -18px; }.dd-brand { font-size: 23px; gap: 10px; }.dd-logo { width: 36px; height: 36px; font-size: 27px; }.dd-nav { gap: 14px; }.dd-nav a:nth-child(-n+3) { display: none; }.dd-nav-cta { min-width: 98px; min-height: 41px; font-size: 14px; padding: 0 14px; }.dd-hero { padding-top: 46px; row-gap: 36px; }.dd-eyebrow { font-size: 10px; letter-spacing: 1.4px; padding: 8px 12px; margin-bottom: 24px; }.dd-copy h1 { font-size: clamp(36px,8.5vw,55px); letter-spacing: -1.8px; }.dd-description { font-size: 18px; letter-spacing: -.4px; margin-top: 24px; }.dd-description br { display: none; }.dd-actions { flex-wrap: wrap; gap: 22px; margin-top: 28px; }.dd-trust { font-size: 12px; margin-top: 24px; }.dd-demo { grid-template-columns: minmax(0, .85fr) 32px minmax(0,1.15fr); padding-top: 0; }.dd-phone { width: 100%; height: 310px; border-radius: 26px; padding: 4px; }.dd-screen { border-radius: 21px; padding: 9px 8px 15px; }.dd-island { width: 43px; height: 14px; top: 5px; }.dd-status { font-size: 7px; }.dd-status svg { width: 28px; }.dd-screen h2 { font-size: 11px; margin: 22px 0 13px; }.dd-photos { height: 95px; gap: 3px; }.dd-photos img { height: 95px; border-radius: 6px; }.dd-photos small { font-size: 6px; padding: 2px; right: 2px; bottom: 6px; }.dd-ready { font-size: 11px; margin: 15px 0; }.dd-upload { min-height: 32px; font-size: 10px; border-radius: 7px; }.dd-no-account { font-size: 7px; }.dd-connection { padding: 0 3px; }.dd-folder { height: 260px; border-radius: 10px; }.dd-titlebar { height: 28px; gap: 4px; padding-inline: 9px; }.dd-titlebar i { width: 8px; height: 8px; }.dd-folder-body { padding: 23px 9px 9px; }.dd-folder-heading { gap: 7px; margin: 0 0 15px; }.dd-folder-icon { flex-basis: 32px; height: 24px; border-radius: 3px; }.dd-folder-icon::before { width: 14px; height: 5px; top: -4px; }.dd-folder-heading h2 { font-size: 11px; letter-spacing: -.2px; }.dd-folder-heading p { font-size: 7px; }.dd-received { gap: 5px; padding: 8px 6px; font-size: 8px; margin-bottom: 13px; }.dd-received span { width: 13px; height: 13px; font-size: 8px; }.dd-file { height: 56px; gap: 7px; font-size: 9px; }.dd-file img { width: 33px; height: 37px; }.dd-file b { width: 12px; height: 12px; font-size: 8px; }.dd-flow-labels { padding-inline: 22px; font-size: 11px; margin-top: 27px; }.dd-flow-labels span::before { width: 8px; height: 8px; top: -16px; }.dd-flow-labels i { transform: translateY(-16px); }.dd-tagline { font-size: 14px; padding: 28px 10px 35px; } }
@media(prefers-reduced-motion:reduce) { .dd-connection path,.dd-connection i { animation: none; } }
@media(max-width:700px) {
  .dd-tagline { margin-top: 4px; padding: 20px 0; font-size: 12px; gap: 10px; text-align: center; }
  .dd-description br { display: initial; }
  .dd-trust { overflow-wrap: anywhere; }
  .dd-brand { font-size: 20px; gap: 8px; letter-spacing: -.7px; }
  .dd-nav-cta { min-width: 85px; padding-inline: 10px; }
  .dd-copy h1 { font-size: clamp(30px,8.5vw,55px); }
  .dd-folder-heading h2,.dd-folder-heading p { white-space: normal; }
  .dd-file { gap: 5px; font-size: 8px; }
  .dd-file img { width: 26px; }
}
@media(prefers-reduced-motion:reduce) { .dd-connection::after,.dd-connection i { animation: none; left: 40%; } }
/* A state-driven product demo: all animation stays inside the devices. */
.dd-screen { overflow: hidden; }
.dd-upload { position: relative; overflow: hidden; }
.dd-upload-label { position: relative; z-index: 1; }
.dd-upload-progress { position: absolute; inset: auto 0 0; height: 4px; background: #ffffff85; transform: scaleX(0); transform-origin: left; }
.dd-received em { font-style: normal; }
.dd-launch { position: absolute; inset: 40px 0 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #fdfcfe; opacity: 0; visibility: hidden; transform: translateY(7px); transition: opacity .4s,transform .4s,visibility .4s; pointer-events: none; }
.dd-launch-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg,#8355ff,#6438ed); color: #fff; font-size: 34px; box-shadow: 0 8px 22px #7846ee22; }
.dd-launch b { font-size: 18px; letter-spacing: -.5px; }
.dd-launch small { font-size: 10px; color: #8a8199; }
.dd-demo .dd-file { transition: opacity .45s,transform .45s; }
.dd-demo .dd-received { transition: opacity .3s; }
.dd-demo .dd-photos { transition: opacity .4s,transform .4s; }
.dd-demo .dd-photos > img,.dd-demo .dd-photos > div { position: relative; }
.dd-demo[data-stage="opening"] .dd-launch { opacity: 1; visibility: visible; transform: translateY(0); }
.dd-demo[data-stage="opening"] .dd-photos { opacity: 0; transform: translateY(8px); }
.dd-demo[data-stage="opening"] .dd-file,.dd-demo[data-stage="selecting"] .dd-file,.dd-demo[data-stage="uploading"] .dd-file { opacity: 0; transform: translateY(9px); }
.dd-demo[data-stage="receiving"] .dd-file:last-child { opacity: 0; transform: translateY(9px); }
.dd-demo[data-stage="opening"] .dd-received,.dd-demo[data-stage="selecting"] .dd-received { opacity: .45; }
.dd-demo[data-stage="selecting"] .dd-photos { animation: dd-select .6s ease both; }
.dd-demo[data-stage="uploading"] .dd-upload-progress { transform: scaleX(1); transition: transform 3s linear; }
.dd-demo[data-stage="receiving"] .dd-upload-progress,.dd-demo[data-stage="complete"] .dd-upload-progress { transform: scaleX(1); }
.dd-demo[data-stage="complete"] .dd-upload { background: #e7f8ef; color: #248247; }
.dd-demo[data-stage="complete"] .dd-upload-progress { opacity: 0; }
.dd-demo[data-stage="opening"] .dd-connection::after,.dd-demo[data-stage="opening"] .dd-connection i,.dd-demo[data-stage="selecting"] .dd-connection::after,.dd-demo[data-stage="selecting"] .dd-connection i,.dd-demo[data-stage="complete"] .dd-connection::after,.dd-demo[data-stage="complete"] .dd-connection i { animation-play-state: paused; opacity: 0; }
@keyframes dd-select { 0% { opacity: .4; transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } }
@media(max-width:700px) { .dd-launch { top: 28px; gap: 10px; }.dd-launch-icon { width: 33px; height: 33px; border-radius: 10px; font-size: 25px; }.dd-launch b { font-size: 13px; }.dd-launch small { font-size: 7px; }.dd-upload-progress { height: 3px; } }
@media(prefers-reduced-motion:reduce) { .dd-demo .dd-file,.dd-demo .dd-photos,.dd-launch { transition: none; animation: none; } }
.dd-choose { position: absolute; top: 108px; left: 15px; right: 15px; height: 155px; border: 1px dashed #d7c8ff; border-radius: 12px; background: #f8f5ff; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; opacity: 0; visibility: hidden; color: #7444f7; }
.dd-choose > span { font-size: 30px; }.dd-choose b { font-size: 12px; }.dd-choose small { font-size: 9px; color: #90859e; }
.dd-demo[data-stage="choose"] .dd-choose { opacity: 1; visibility: visible; }
.dd-demo[data-stage="choose"] .dd-photos { opacity: 0; }
.dd-gallery { position: absolute; z-index: 4; inset: 40px 0 0; padding: 14px 12px 22px; background: #fff; border-radius: 0 0 31px 31px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .35s,transform .35s,visibility .35s; }
.dd-gallery-nav { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #7444ff; }.dd-gallery-nav b { color: #181421; font-size: 13px; }
.dd-gallery-tabs { display: flex; justify-content: center; gap: 14px; margin: 20px 0 10px; font-size: 10px; color: #837b90; }.dd-gallery-tabs span { color: #7444ff; }
.dd-gallery h3 { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin: 8px 0 13px; }.dd-gallery h3 small { font-size: 9px; color: #918897; font-weight: 400; }
.dd-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }.dd-gallery-grid > div { position: relative; height: 95px; border-radius: 5px; overflow: hidden; }.dd-gallery-grid img { width: 100%; height: 100%; object-fit: cover; }.dd-gallery-grid small { position: absolute; bottom: 5px; right: 5px; font-size: 9px; color: white; text-shadow: 0 1px 3px #000; }.dd-gallery-item i { display: grid; place-items: center; position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: #7444ff; color: #fff; border: 2px solid #fff; font-size: 10px; font-style: normal; opacity: 0; transform: scale(.7); transition: opacity .25s,transform .25s; }
.dd-gallery-count { text-align: center; font-size: 11px; color: #797083; margin: auto 0 10px; }
.dd-gallery-add { padding: 12px 0; text-align: center; font-size: 12px; border-radius: 9px; background: #7444ff; color: #fff; opacity: .3; transition: opacity .25s; }
.dd-demo:is([data-stage="gallery"],[data-stage="pick-one"],[data-stage="pick-two"]) .dd-gallery { opacity: 1; visibility: visible; transform: translateY(0); }
.dd-demo:is([data-stage="pick-one"],[data-stage="pick-two"]) .dd-gallery-item:first-child i,.dd-demo[data-stage="pick-two"] .dd-gallery-item:nth-child(2) i { opacity: 1; transform: scale(1); }
.dd-demo[data-stage="pick-two"] .dd-gallery-add { opacity: 1; }
.dd-demo:is([data-stage="choose"],[data-stage="gallery"],[data-stage="pick-one"],[data-stage="pick-two"]) .dd-file { opacity: 0; transform: translateY(9px); }
.dd-demo:is([data-stage="choose"],[data-stage="gallery"],[data-stage="pick-one"],[data-stage="pick-two"]) .dd-connection::after,.dd-demo:is([data-stage="choose"],[data-stage="gallery"],[data-stage="pick-one"],[data-stage="pick-two"]) .dd-connection i { opacity: 0; animation-play-state: paused; }
@media(max-width:700px) { .dd-choose { top: 72px; left: 8px; right: 8px; height: 95px; gap: 5px; }.dd-choose b { font-size: 8px; }.dd-choose small { font-size: 6px; }.dd-gallery { top: 28px; padding: 9px 7px 14px; border-radius: 0 0 21px 21px; }.dd-gallery-nav { font-size: 7px; }.dd-gallery-nav b { font-size: 9px; }.dd-gallery-tabs { margin: 12px 0 5px; font-size: 7px; }.dd-gallery h3 { font-size: 9px; margin: 5px 0 8px; }.dd-gallery h3 small { font-size: 6px; }.dd-gallery-grid > div { height: 58px; }.dd-gallery-grid small { font-size: 6px; }.dd-gallery-item i { width: 14px; height: 14px; font-size: 7px; border-width: 1px; }.dd-gallery-count { font-size: 8px; }.dd-gallery-add { font-size: 8px; padding: 8px 0; } }
@media(prefers-reduced-motion:reduce) { .dd-gallery,.dd-gallery-item i { transition: none; } }
/* One continuous progress timeline: upload 3.1s + delivery .8s + row reveal .45s. */
.dd-demo .dd-phone { pointer-events: none; }
.dd-demo .dd-connection i { display: none; }
.dd-demo .dd-connection::before { left: 0; right: 0; background: #d9c8f680; }
.dd-demo .dd-connection::after { left: 0; width: 100%; opacity: 1; animation: none; transform: scaleX(0); transform-origin: left; transition: none; background: linear-gradient(90deg,#b591ff,#7744f7); box-shadow: 0 0 9px #9565ff30; }
.dd-demo.dd-transferring .dd-connection::after { transform: scaleX(1); transition: transform 4.35s linear; opacity: 1; animation: none; }
.dd-demo .dd-upload-progress { transform: scaleX(0); transition: none; }
.dd-demo.dd-transferring .dd-upload-progress { transform: scaleX(1); transition: transform 4.35s linear; }
@media(prefers-reduced-motion:reduce) { .dd-demo.dd-transferring .dd-connection::after,.dd-demo.dd-transferring .dd-upload-progress { transition: none; } }
.dd-demo .dd-connection::before { background: linear-gradient(90deg,transparent,#a585ed70 20%,#a585ed70 80%,transparent); }
.dd-photos > div { height: 155px; overflow: hidden; border-radius: 12px; }
.dd-photos > div:nth-child(2) img,.dd-gallery-grid > div:nth-child(2) img { transform: scale(1.35); transform-origin: center top; }
@media(max-width:700px) { .dd-photos > div { height: 95px; border-radius: 6px; } }
.dd-demo .dd-connection::after { width: 34%; transform: none; opacity: 0; background: linear-gradient(90deg,transparent,#8050f4); }
.dd-demo.dd-transferring .dd-connection::after { transform: none; transition: none; animation: dd-beam 2.2s cubic-bezier(.45,0,.25,1) infinite; }
.dd-demo .dd-connection i { display: block; opacity: 0; animation: none; }
.dd-demo:is([data-stage="uploading"],[data-stage="receiving"]) .dd-connection i { opacity: 1; animation: dd-beam-dot 2.2s cubic-bezier(.45,0,.25,1) infinite; }
.dd-demo[data-stage="complete"] .dd-connection::after { animation: none; opacity: 0; }
.dd-transfer-done { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #fff; color: #2aa56b; border: 1px solid #dcefe5; box-shadow: 0 3px 14px #34916a12; font-size: 17px; opacity: 0; transform: translate(-50%,-50%) scale(.8); transition: opacity .35s,transform .35s; }
.dd-demo[data-stage="complete"] .dd-transfer-done { opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: .45s; }
@media(prefers-reduced-motion:reduce) { .dd-demo.dd-transferring .dd-connection::after,.dd-demo .dd-connection i { animation: none; opacity: 0; }.dd-transfer-done { transition: none; } }
/* Decorative glows and animated pseudo-elements must not widen mobile pages.
   Clip only the horizontal axis; retain normal vertical scrolling. */
@media (max-width: 700px) {
  html, body { overflow-x: clip; }
}