:root {
  --ink: #171621;
  --muted: #6e6b82;
  --purple: #6857f6;
  --purple-deep: #4b38d8;
  --line: #e7e5ef;
  --green: #39b585;
  --page-max-width: 1440px;
  --page-gutter: 14px;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: #fff; color: var(--ink); font-family: Inter, system-ui, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.site-shell { width: calc(100% - (var(--page-gutter) * 2)); max-width: var(--page-max-width); margin: 16px auto 0; background: #fff; }
.site-footer { width: 100%; height: 1px; margin-top: 0; border-top: 1px solid #e8e6ef; background: #fff; }
.site-header { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border: 1px solid #efedf5; border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 8px 28px rgba(49, 40, 91, .035); }
.brand { display: inline-flex; align-items: center; gap: 14px; font-size: 25px; font-weight: 700; letter-spacing: -.065em; }
.brand-mark, .toast-mark { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 10px; background: linear-gradient(145deg, #786aff, #503ce4); box-shadow: 0 8px 16px rgba(83, 57, 220, .2); color: #fff; font: 800 28px/.75 Arial, sans-serif; }
.site-nav { display: flex; align-items: center; gap: 36px; color: #4d4b60; font-size: 16px; font-weight: 500; }
.site-nav a:not(.nav-cta) { transition: color .2s ease; }
.site-nav a:not(.nav-cta):hover { color: var(--purple); }
.nav-cta { min-width: 140px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 11px; background: linear-gradient(135deg, #725df7, #5943eb); color: #fff; font-weight: 600; box-shadow: 0 8px 18px rgba(87, 65, 230, .18); transition: transform .2s ease, filter .2s ease; }
.nav-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.nav-cta:active { transform: translateY(0) scale(.98); }

.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(480px, .78fr) minmax(800px, 1.22fr); align-items: center; column-gap: 40px; margin-top: 20px; padding: 92px 12px 72px; border: 1px solid #efedf6; border-radius: 27px; background: radial-gradient(ellipse 60% 80% at 76% 50%, rgba(204, 194, 255, .26) 0%, rgba(231, 227, 255, .14) 42%, rgba(255,255,255,0) 74%), #fff; box-shadow: 0 18px 50px rgba(53, 45, 106, .045); }
.hero-copy { position: relative; z-index: 1; align-self: center; padding-bottom: 10px; }
.eyebrow { margin: 0 0 34px; color: #5d53f8; font-size: 13px; font-weight: 800; letter-spacing: -.015em; }
.eyebrow::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 0; border-radius: 50%; background: transparent; }
h1 { max-width: 580px; margin: 0; color: var(--ink); font-size: clamp(54px, 4.1vw, 64px); font-weight: 800; line-height: 1.01; letter-spacing: -.076em; }
h1 span { color: var(--purple); white-space: nowrap; }
.hero-description { max-width: 550px; margin: 39px 0 0; color: var(--muted); font-size: 19px; font-weight: 500; line-height: 1.68; letter-spacing: -.03em; }
.hero-description--second { margin-top: 35px; }
.hero-actions { display: flex; gap: 18px; margin-top: 35px; }
.button { height: 62px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 0 30px; border: 1px solid var(--line); border-radius: 12px; font-size: 17px; font-weight: 700; letter-spacing: -.035em; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); filter: brightness(1.04); }
.button:active { transform: translateY(0) scale(.985); }
.button--primary { min-width: 195px; border-color: transparent; background: linear-gradient(135deg, #735df7, #573fe7); color: #fff; box-shadow: 0 11px 24px rgba(89, 65, 228, .18); }
.button--secondary { min-width: 208px; background: #fff; box-shadow: 0 5px 12px rgba(30, 21, 69, .04); }
.hero-trust { display: flex; align-items: center; gap: 9px; margin: 30px 0 0; color: #77738a; font-size: 15px; font-weight: 500; letter-spacing: -.025em; white-space: nowrap; }
.hero-trust > span { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #8778ff; color: #fff; font-size: 11px; font-weight: 800; }
.hero-trust b { margin: 0 10px; color: #c0bdc9; font-weight: 400; }
.hero-trust .lock { background: transparent; color: #9693a6; font-size: 16px; }

.transfer-scene { position: relative; align-self: center; width: 100%; min-width: 0; height: 724px; overflow: visible; }
.transfer-scene::before { content: ''; position: absolute; z-index: -2; top: 5%; left: 10%; width: 90%; height: 82%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(194, 180, 255, .9) 0%, rgba(216, 208, 255, .7) 35%, rgba(244, 241, 255, .38) 58%, rgba(255, 255, 255, 0) 76%); filter: blur(3px); }
.step-label { position: absolute; top: 52px; z-index: 4; display: flex; align-items: center; gap: 8px; color: #201b99; font-size: 13px; font-weight: 700; letter-spacing: -.035em; white-space: nowrap; }
.step-label b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #7562f7; color: #fff; font-size: 12px; }
.step-label--one { left: 3%; }
.step-label--two { left: 36%; }
.step-label--three { right: 7%; }

.upload-phone { position: absolute; z-index: 3; isolation: isolate; top: 96px; left: 0; width: 240px; height: 520px; padding: 15px 20px 20px; overflow: hidden; border: 1px solid #292731; border-radius: 27px; background: linear-gradient(145deg, #35333e, #121116); box-shadow: 0 20px 37px rgba(50, 43, 107, .11), inset 0 0 0 1px rgba(255,255,255,.25); outline: none; transition: transform .25s ease, box-shadow .25s ease; }
.upload-phone::before { content: ''; position: absolute; z-index: 0; inset: 4px; border-radius: 23px; background: linear-gradient(135deg, #fff 0%, #fefeff 64%, #fbfaff 100%); }
.upload-phone::after { content: ''; position: absolute; z-index: 2; top: 8px; left: 50%; width: 54px; height: 15px; border-radius: 999px; background: #17161d; transform: translateX(-50%); box-shadow: 0 1px 1px rgba(255,255,255,.13); }
.upload-phone > * { position: relative; z-index: 1; }
.upload-phone:hover, .upload-phone:focus-visible { transform: translateY(-4px); box-shadow: 0 26px 44px rgba(50, 43, 107, .16), inset 0 0 0 1px rgba(255,255,255,.3); }
.phone-status, .phone-heading { display: flex; align-items: center; justify-content: space-between; }
.phone-status { font-size: 11px; }
.phone-icons { display: flex; align-items: center; justify-content: flex-end; gap: 5px; width: 39px; height: 12px; }
.phone-icons i { display: block; position: relative; }
.phone-icons .signal { width: 13px; height: 10px; background: linear-gradient(to top, #17151d 0 100%) 0 7px / 2px 3px no-repeat, linear-gradient(to top, #17151d 0 100%) 4px 5px / 2px 5px no-repeat, linear-gradient(to top, #17151d 0 100%) 8px 2px / 2px 8px no-repeat, linear-gradient(to top, #17151d 0 100%) 12px 0 / 2px 10px no-repeat; }
.phone-icons .wifi { width: 12px; height: 9px; border: 1.5px solid #17151d; border-right-color: transparent; border-bottom-color: transparent; border-radius: 10px 0 0; transform: rotate(45deg); }.phone-icons .wifi::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 3px; height: 3px; border-radius: 50%; background: #17151d; transform: rotate(-45deg); }
.phone-icons .battery { width: 17px; height: 8px; border: 1.4px solid #17151d; border-radius: 2px; }.phone-icons .battery::before { content: ''; position: absolute; inset: 1px 2px; border-radius: 1px; background: #17151d; }.phone-icons .battery::after { content: ''; position: absolute; right: -3px; top: 2px; width: 2px; height: 3px; border-radius: 0 1px 1px 0; background: #17151d; }
.phone-heading { margin-top: 27px; font-size: 11px; }
.phone-heading button { width: 25px; height: 25px; padding: 0 0 6px; border: 0; border-radius: 50%; background: #fafafa; color: #16141d; font-size: 13px; font-weight: 800; letter-spacing: 0; }
.upload-phone h2 { margin: 27px 0 21px; padding-bottom: 21px; border-bottom: 1px solid #e8e6ef; font-size: 21px; font-weight: 750; line-height: 1.06; letter-spacing: -.06em; }
.phone-files { display: grid; gap: 13px; }
.file-row, .folder-file { width: 100%; display: flex; align-items: center; border: 0; background: transparent; text-align: left; }
.file-row { padding: 0; gap: 11px; color: #1d1a25; transition: background .2s ease; }
.file-row:hover, .folder-file:hover { background: rgba(112, 92, 246, .045); }
.thumb { display: block; flex: 0 0 auto; width: 39px; height: 39px; border-radius: 6px; background: linear-gradient(135deg, #a7d06a 0 47%, #5d87a2 47%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.thumb--night { background: linear-gradient(135deg, #72654a 0 38%, #302d2a 39% 67%, #a9905d 68%); }
.thumb--third { background: linear-gradient(135deg, #bddb9d 0 48%, #497b58 49% 71%, #d3c985 72%); }
.file-row span, .folder-file span { min-width: 0; font-size: 12px; font-weight: 500; letter-spacing: -.03em; }
.file-row small, .folder-file small { display: block; margin-top: 3px; color: #77758a; font-size: 11px; }
.file-row > b { margin-left: auto; color: var(--green); font-size: 15px; }
.add-files { width: 100%; height: 69px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin-top: 19px; border: 1px dashed #cec9ff; border-radius: 9px; background: linear-gradient(135deg, rgba(246, 245, 255, .8), rgba(252, 252, 255, .9)); color: #6958f4; transition: background .2s ease, transform .2s ease; }
.add-files:hover { background: #f4f2ff; transform: translateY(-1px); }
.add-files strong { font-size: 22px; font-weight: 400; line-height: 18px; }
.add-files span { font-size: 12px; }
.upload-status { display: flex; justify-content: space-between; margin-top: 28px; font-size: 11px; }
.progress { height: 8px; margin-top: 11px; overflow: hidden; border-radius: 99px; background: #e4e1ff; }
.progress i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5a45e6, #6a55ef); }
.upload-complete { height: 49px; display: grid; place-items: center; margin-top: 24px; border-radius: 9px; background: linear-gradient(135deg, #e3f9ef, #e9faf1); color: #188f68; font-size: 11px; font-weight: 600; }

.transfer-path { position: absolute; z-index: 1; top: 245px; left: 182px; width: min(41vw, 330px); height: 158px; pointer-events: none; }
.transfer-path svg { display: block; width: 100%; height: 100%; overflow: visible; }
.transfer-path path { fill: none; stroke: #8a79ff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 10; animation: data-flow 7s linear infinite; }
.transfer-node { position: absolute; z-index: 3; top: 269px; left: 286px; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 14px 30px rgba(69, 54, 163, .16); animation: node-breathe 3.6s ease-in-out infinite; }
.transfer-node span { display: grid; place-items: center; width: 42px; height: 42px; padding-bottom: 7px; border-radius: 11px; background: linear-gradient(145deg, #7564ff, #4a32ce); color: #fff; font: 800 33px/.72 Arial, sans-serif; box-shadow: 0 8px 13px rgba(69, 47, 194, .25); }

.folder-window { position: absolute; z-index: 2; top: 96px; right: 0; width: 426px; height: 555px; padding: 19px 27px; border: 1px solid #d8d7e0; border-radius: 18px; background: linear-gradient(#f8f8fa 0 64px, rgba(255,255,255,.97) 64px); box-shadow: 0 21px 42px rgba(53, 45, 112, .13), inset 0 1px rgba(255,255,255,.9); outline: none; transition: transform .25s ease, box-shadow .25s ease; }
.folder-window:hover, .folder-window:focus-within, .folder-window:focus-visible { transform: translateY(-4px); box-shadow: 0 27px 50px rgba(53, 45, 112, .18), inset 0 1px rgba(255,255,255,.9); }
.folder-header { display: flex; align-items: center; gap: 19px; height: 33px; }
.traffic { display: flex; gap: 7px; }
.traffic i { width: 11px; height: 11px; border: 1px solid rgba(0,0,0,.08); border-radius: 50%; background: linear-gradient(135deg, #ff716c, #ed5752); box-shadow: inset 0 1px rgba(255,255,255,.42); }
.traffic i:nth-child(2) { background: linear-gradient(135deg, #ffd45b, #f4b522); }.traffic i:nth-child(3) { background: linear-gradient(135deg, #62d680, #34ae5b); }
.folder-header > b { flex: 1; display: flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: -.04em; }.folder-header b em { position: relative; width: 16px; height: 12px; display: inline-block; border-radius: 2px; background: linear-gradient(#64c4f6, #3da8e5); color: transparent; font-size: 0; font-style: normal; box-shadow: inset 0 1px rgba(255,255,255,.35); }.folder-header b em::before { content: ''; position: absolute; top: -3px; left: 1px; width: 7px; height: 4px; border-radius: 2px 2px 0 0; background: #65c6f7; }
.folder-header label { width: 120px; height: 31px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #dedde5; border-radius: 8px; background: rgba(255,255,255,.78); box-shadow: inset 0 1px 2px rgba(35,32,57,.03); color: #77758a; }.folder-header label span { font-size: 17px; transform: rotate(-22deg); }.folder-header input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #49465d; font-size: 12px; }.folder-header input::placeholder { color: #878498; }
.connection-status { margin-top: 25px; color: #9491a3; font-size: 11px; }.connection-status:first-letter { color: var(--green); }.connection-status span { color: #219b72; margin-left: 5px; }.folder-window hr { height: 1px; margin: 15px 0; border: 0; background: #e9e7ef; }.folder-date, .field-label { color: #858196; font-size: 10px; }.folder-files { display: grid; gap: 15px; margin: 16px 0 18px; }.folder-file { padding: 0 0 0 6px; gap: 12px; border-radius: 6px; }.folder-file .thumb { width: 38px; height: 38px; }.folder-file span { font-size: 12px; font-weight: 600; }.folder-file em { margin-left: auto; color: #22a577; font-size: 10px; font-style: normal; white-space: nowrap; }.copy-row { height: 36px; display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-left: 12px; border: 1px solid #e1dfe9; border-radius: 9px; color: #27242e; font-size: 11px; }.copy-row > span { flex: 1; white-space: nowrap; }.copy-link { height: 100%; margin: -1px -1px -1px 0; padding: 0 12px; border: 1px solid #e1dfe9; border-radius: 9px; background: #fff; font-size: 11px; transition: background .2s ease; }.copy-link:hover { background: #f7f6ff; }.devices { margin: 25px 0 24px; font-size: 11px; }.devices small { color: #858196; }.activity { height: 44px; display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 0 9px; border: 1px solid #e4e2eb; border-radius: 9px; color: #22202a; font-size: 11px; }.activity b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #4c37ca; color: #fff; }.activity span { margin-left: auto; color: #858196; }

.notification-toast { position: absolute; z-index: 4; right: 0; top: 684px; width: 372px; height: 88px; display: flex; align-items: center; gap: 16px; padding: 15px 20px; border: 1px solid #e3e1eb; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 16px 29px rgba(49, 41, 98, .12); animation: toast-in .5s .15s both cubic-bezier(.2,.8,.2,1); }.toast-mark { width: 42px; height: 42px; border-radius: 10px; font-size: 31px; }.notification-toast > span:nth-child(2) { display: grid; gap: 6px; font-size: 12px; }.notification-toast strong { font-size: 13px; }.notification-toast small { margin-left: auto; color: #9692a6; font-size: 10px; line-height: 15px; text-align: right; }.notification-toast i { color: #46bb8b; font-style: normal; }.notification-toast i + i { display: none; }
.notification-toast.toast--leaving { animation: toast-out .28s both ease-in; }.notification-toast.toast--entering { animation: toast-in .45s both cubic-bezier(.2,.8,.2,1); }

:focus-visible { outline: 3px solid rgba(103, 85, 246, .45); outline-offset: 3px; }
@keyframes data-flow { to { stroke-dashoffset: -110; } }
@keyframes node-breathe { 0%,100% { transform: scale(1); box-shadow: 0 14px 30px rgba(69,54,163,.16); } 50% { transform: scale(1.035); box-shadow: 0 16px 34px rgba(69,54,163,.22); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(.97); } }

@media (max-width: 1300px) { .site-header { padding-inline: 14px; }.hero { grid-template-columns: 1fr; row-gap: 42px; padding: 72px 24px 50px; }.hero-copy { width: min(100%, 600px); margin: 0 auto; }.transfer-scene { width: 854px; margin: 0 auto; }.hero-description { font-size: 17px; } }
@media (max-width: 960px) { .site-shell { width: calc(100% - 24px); }.hero { padding: 68px 24px 40px; }.site-header { padding-inline: 12px; } }
@media (max-width: 700px) { :root { --page-gutter: 8px; }.site-shell { width: calc(100% - 16px); margin: 8px auto 0; }.site-header { height: 58px; padding: 0 8px; border-radius: 13px; }.brand { gap: 9px; font-size: 20px; }.brand-mark { width: 31px; height: 31px; border-radius: 8px; font-size: 23px; }.site-nav { gap: 15px; font-size: 12px; }.site-nav a:nth-child(1), .site-nav a:nth-child(2) { display: none; }.nav-cta { min-width: 98px; height: 39px; border-radius: 9px; }.hero { margin-top: 12px; padding: 58px 18px 15px; gap: 15px; border-radius: 20px; }.eyebrow { margin-bottom: 22px; font-size: 10px; }.hero-copy { width: 100%; }.hero h1 { font-size: clamp(43px, 12vw, 59px); line-height: .98; letter-spacing: -.075em; }.hero-description { margin-top: 25px; font-size: 16px; line-height: 1.55; }.hero-description--second { margin-top: 24px; }.hero-actions { gap: 10px; margin-top: 26px; }.button { height: 54px; flex: 1; padding: 0 12px; font-size: 14px; }.hero-trust { display: grid; grid-template-columns: auto 1fr; gap: 7px; margin-top: 22px; font-size: 12px; white-space: normal; }.hero-trust b { display: none; }.hero-trust .lock { grid-column: 1; grid-row: 2; }.transfer-scene { width: 840px; height: 395px; margin: 14px 0 -315px; transform: scale(.45); transform-origin: top left; }.transfer-scene::before { left: 3%; }.step-label { top: 52px; }.notification-toast { display: none; } }
@media (max-width: 410px) { .site-nav { gap: 11px; }.site-nav a:nth-child(3) { display: none; }.nav-cta { min-width: 90px; }.hero { padding-inline: 12px; }.hero h1 { font-size: 43px; }.button { font-size: 13px; }.transfer-scene { transform: scale(.405); margin-bottom: -345px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* How it works */
.how-it-works { position: relative; isolation: isolate; overflow: hidden; margin-top: 20px; padding: 80px 54px 76px; border: 1px solid #efedf6; border-radius: 27px; background: #fff; text-align: center; }
.how-it-works__glow { position: absolute; z-index: -1; inset: 8% 0 0; background: radial-gradient(ellipse 43% 44% at 50% 40%, rgba(213,207,255,.52), transparent 72%), radial-gradient(ellipse 25% 28% at 8% 45%, rgba(226,222,255,.36), transparent 72%), radial-gradient(ellipse 25% 28% at 94% 45%, rgba(226,222,255,.36), transparent 72%); }
.how-it-works__header { position: relative; }.how-it-works__eyebrow { margin: 0 0 18px; color: #5848f4; font-size: 15px; font-weight: 800; letter-spacing: .035em; }.how-it-works h2 { margin: 0; color: #11121e; font-size: clamp(48px, 4.1vw, 66px); font-weight: 800; line-height: .97; letter-spacing: -.075em; }.how-it-works h2 span { color: #6655f7; }.how-it-works__header > p:last-child { margin: 25px 0 0; color: #606985; font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: -.03em; }
.how-flow { position: relative; width: min(100%, 1125px); height: 362px; margin: 10px auto 45px; }.how-phone { position: absolute; left: 8%; top: 0; width: 198px; height: 388px; padding: 13px 14px; border: 1px solid #e5e3ec; border-radius: 25px; background: #fff; box-shadow: 0 18px 32px rgba(53,44,112,.15); text-align: left; transition: transform .25s ease, box-shadow .25s ease; }.how-phone:hover, .how-phone:focus-visible, .how-desktop:hover, .how-desktop:focus-visible { transform: translateY(-4px); box-shadow: 0 25px 38px rgba(53,44,112,.2); }.how-phone__status { display: flex; justify-content: space-between; font-size: 9px; }.how-phone__status span { font-size: 9px; letter-spacing: 1px; }.how-phone__title { display: block; margin: 19px 0 12px; font-size: 11px; }.how-phone__selection { display: grid; gap: 3px; padding: 12px 10px; border: 1px solid #eceaf2; border-radius: 8px; font-size: 10px; }.how-phone__selection small { color: #69718b; font-size: 9px; }.how-thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 9px; }.how-thumb { position: relative; height: 51px; padding: 0; overflow: hidden; border: 0; border-radius: 5px; background: linear-gradient(155deg, #c2d28a 0 32%, #607d4c 33% 45%, #8ca2ba 46% 100%); transition: transform .2s ease, filter .2s ease; }.how-thumb::after { content: '▣'; position: absolute; top: 4px; right: 4px; color: #fff; font-size: 9px; }.how-thumb:hover { z-index: 1; transform: scale(1.08); filter: saturate(1.25); }.how-thumb--two,.how-thumb--five,.how-thumb--eight { background: linear-gradient(145deg,#829373 0 28%,#496334 29% 45%,#a6b4bd 46%); }.how-thumb--three,.how-thumb--six { background: linear-gradient(145deg,#b5b1a5 0 30%,#3d3e3a 31% 57%,#827a67 58%); }.how-thumb--four,.how-thumb--seven { background: linear-gradient(145deg,#a3b6a0 0 40%,#585b40 41% 56%,#7891a0 57%); }.how-thumb--nine { background: linear-gradient(145deg,#72958d 0 38%,#374e32 39% 54%,#a9a591 55%); }.how-upload-button { width: 100%; height: 35px; margin-top: 11px; border: 0; border-radius: 7px; background: linear-gradient(135deg,#705afa,#553cef); color: #fff; font-size: 10px; font-weight: 600; box-shadow: 0 7px 13px rgba(84,60,231,.2); }.how-phone__account { display: block; margin-top: 13px; color: #606982; font-size: 9px; text-align: center; }
.how-transfer { position: absolute; top: 124px; left: 31%; right: 32%; height: 122px; }.how-file-stack { position: absolute; top: 20px; left: 0; display: flex; align-items: center; gap: 5px; }.how-file-stack i { display: block; width: 28px; height: 25px; border-radius: 5px; background: linear-gradient(135deg,#98bed3,#75964a); box-shadow: 0 4px 8px rgba(65,67,110,.14); animation: stack-fade 3.4s ease-in-out infinite; }.how-file-stack i:nth-child(2){opacity:.8;animation-delay:.25s}.how-file-stack i:nth-child(3){opacity:.52;animation-delay:.5s}.how-file-stack i:nth-child(4){opacity:.25;animation-delay:.75s}.how-transfer__line { position: absolute; top: 49px; left: 105px; width: calc(100% - 91px); height: 4px; background: radial-gradient(circle, #7059fa 2px, transparent 2.8px) 0 0/12px 4px repeat-x; animation: dots-move 2.8s linear infinite; }.how-transfer__node { position: absolute; top: 18px; left: 46%; display: grid; place-items: center; width: 63px; height: 63px; border-radius: 50%; background: linear-gradient(135deg,#735eff,#4a31dc); box-shadow: 0 12px 22px rgba(72,48,214,.28); color: #fff; font: 800 40px/.65 Arial,sans-serif; animation: node-breathe 3.6s ease-in-out infinite; }.how-transfer > b { position: absolute; top: 98px; left: 42%; color: #3e26f2; font-size: 12px; white-space: nowrap; }
.how-desktop { position: absolute; top: 41px; right: 4%; width: 408px; height: 328px; padding: 15px 26px; border: 1px solid #e1dfe9; border-radius: 19px; background: linear-gradient(#fbfbfd 0 92px,#fff 92px); box-shadow: 0 18px 35px rgba(53,44,112,.15); text-align: left; transition: transform .25s ease, box-shadow .25s ease; }.how-desktop__toolbar { display: flex; align-items: center; gap: 15px; }.how-window-controls { display: flex; gap: 6px; }.how-window-controls i { width: 11px; height: 11px; border-radius: 50%; background: #fb655b; }.how-window-controls i:nth-child(2){background:#ffbe20}.how-window-controls i:nth-child(3){background:#25b771}.how-desktop__toolbar > b { flex: 1; display:flex; gap:7px; align-items:center; font-size: 11px; }.how-desktop__toolbar em { color:#46b7f3; font-size: 16px; font-style:normal; }.how-desktop__toolbar label { display:flex; align-items:center; width:115px; height:30px; padding:0 10px; border:1px solid #e4e2eb; border-radius:10px; color:#7d8095; font-size:15px; }.how-desktop__toolbar input { min-width:0; width:100%; margin-left:6px; border:0; outline:0; background:transparent; font-size:10px; }.how-desktop__connected { margin: 21px 0 14px; color:#4e5874; font-size:11px; }.how-desktop__connected i { display:inline-block; width:10px; height:10px; margin-right:7px; border-radius:50%; background:#27b57a; }.how-desktop__divider { height:1px; margin:0 -26px 15px; background:#e7e5ee; }.how-desktop > small { color:#737b97; font-size:10px; }.how-received-files { display:grid; gap:13px; margin-top:12px; }.how-received-files > div { display:flex; align-items:center; gap:12px; }.how-file-preview { width:38px; height:39px; border-radius:5px; background:linear-gradient(145deg,#a6c47d 0 40%,#5b754a 41% 57%,#9fa4a1 58%); }.how-file-preview--two{background:linear-gradient(145deg,#645946 0 39%,#242827 40% 64%,#8e8162 65%)}.how-file-preview--three{background:linear-gradient(145deg,#b5c88a 0 42%,#657c46 43% 56%,#baad75 57%)}.how-received-files p { margin:0; flex:1; font-size:11px; }.how-received-files p b,.how-received-files p small { display:block; }.how-received-files p small { margin-top:3px; color:#65708d; font-size:10px; }.how-received-files em { color:#28a778; font-size:9px; font-style:normal; white-space:nowrap; }
.how-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:44px; width:min(100%,1235px); margin:0 auto; text-align:left; }.how-step { position:relative; min-height:317px; padding:26px 27px 20px; border:1px solid #e7e5ee; border-radius:22px; background:rgba(255,255,255,.93); box-shadow:0 10px 25px rgba(56,49,105,.065); transition:transform .25s ease,box-shadow .25s ease; }.how-step:hover { transform:translateY(-6px); box-shadow:0 18px 30px rgba(56,49,105,.12); }.how-step:not(:last-child)::after { content:'➜'; position:absolute; top:117px; right:-39px; color:#5540f4; font-size:28px; }.how-step__intro { display:flex; gap:25px; }.how-step__intro > b { display:grid; place-items:center; flex:0 0 auto; width:45px; height:46px; border-radius:8px; background:linear-gradient(135deg,#715cff,#4f39e4); color:#fff; font-size:20px; box-shadow:0 8px 15px rgba(78,57,225,.17); }.how-step h3 { margin:11px 0 12px; font-size:18px; letter-spacing:-.045em; }.how-step__intro p { margin:0; color:#53607c; font-size:13px; line-height:1.85; letter-spacing:-.025em; }.mini-create,.mini-share,.mini-folder { margin:28px auto 0; border:1px solid #ebe9f1; border-radius:13px; background:#fff; box-shadow:0 6px 15px rgba(51,43,97,.05); }.mini-create { width:276px; padding:20px 24px; }.mini-create small { color:#59637d; font-size:10px; }.mini-create > div { display:flex; justify-content:space-between; align-items:center; height:36px; margin-top:9px; padding:0 10px; border:1px solid #e6e4ed; border-radius:7px; font-size:11px; }.mini-create button { width:100%; height:34px; margin-top:12px; border:0; border-radius:6px; background:linear-gradient(135deg,#705bfa,#553ded); color:#fff; font-size:10px; }.mini-share { width:308px; padding:11px 13px; }.mini-share > div { display:flex; align-items:center; height:34px; padding-left:7px; border:1px solid #ebe9f1; border-radius:7px; color:#30334e; font-size:10px; }.mini-share > div > span { margin-right:7px; color:#75809c; }.mini-share button { height:34px; margin-left:auto; padding:0 12px; border:0; border-radius:6px; background:linear-gradient(135deg,#705bfa,#553ded); color:#fff; font-size:10px; }.mini-avatars { display:flex; align-items:center; margin:22px 0 0 10px; }.mini-avatars i { width:36px; height:36px; margin-left:-7px; border:2px solid #fff; border-radius:50%; background:linear-gradient(135deg,#c69d7c,#312f32); }.mini-avatars i:nth-child(2n){background:linear-gradient(135deg,#7f5949,#c9b198)}.mini-avatars b { display:grid; place-items:center; width:38px; height:38px; margin-left:-5px; border:1px solid #e2e0ed; border-radius:50%; background:#fff; color:#4235e1; font-size:11px; }.mini-folder { position:relative; display:flex; align-items:flex-start; gap:18px; width:325px; min-height:146px; padding:24px 25px; }.mini-folder > span { position:relative; width:57px; height:43px; margin-top:2px; border-radius:4px; background:linear-gradient(135deg,#56bdf6,#6dc6ef); }.mini-folder > span::before { content:''; position:absolute; top:-6px; left:0; width:26px; height:8px; border-radius:4px 4px 0 0; background:#45b4ef; }.mini-folder p { margin:7px 0; color:#353850; font-size:12px; }.mini-folder p small { display:block; margin-top:41px; color:#596481; font-size:12px; line-height:1.55; }.mini-folder > b { position:absolute; top:24px; right:20px; padding:5px 10px; border:1px solid #bdebd4; border-radius:999px; background:#e8fbf0; color:#159a63; font-size:9px; }
@keyframes dots-move { to { background-position:48px 0; } } @keyframes stack-fade { 50% { transform:translateX(5px); opacity:.4; } }
@media (max-width:1100px) { .how-it-works{padding-inline:24px}.how-phone{left:1%}.how-desktop{right:0}.how-transfer{left:24%;right:30%}.how-steps{gap:25px}.how-step{padding-inline:20px}.how-step:not(:last-child)::after{right:-27px}.how-step__intro{gap:14px}.mini-create{width:100%}.mini-share,.mini-folder{width:100%} }
@media (max-width:760px) { .how-it-works{margin-top:12px;padding:58px 16px 36px;border-radius:20px}.how-it-works__eyebrow{font-size:12px}.how-it-works h2{font-size:clamp(43px,12vw,58px)}.how-it-works__header>p:last-child{font-size:16px}.how-flow{display:flex;flex-direction:column;align-items:center;height:auto;margin:40px auto}.how-phone,.how-desktop,.how-transfer{position:relative;top:auto;right:auto;bottom:auto;left:auto}.how-phone{margin-bottom:22px}.how-transfer{width:100%;height:148px}.how-file-stack{left:8%}.how-transfer__line{left:19%;width:66%}.how-transfer__node{left:calc(50% - 31px)}.how-transfer>b{left:calc(50% - 47px)}.how-desktop{width:min(100%,408px);height:328px}.how-steps{grid-template-columns:1fr;gap:18px;width:min(100%,390px)}.how-step{min-height:0;padding:24px}.how-step:not(:last-child)::after{display:none}.mini-create,.mini-share,.mini-folder{max-width:325px}.how-step__intro{gap:20px} }

/* Phone details matched to the approved upload screen. */
.how-phone { padding-top:15px; background:linear-gradient(120deg,#fff,#fefeff); }
.how-phone__status { align-items:center; padding:0 9px; }
.how-phone__icons { display:flex; align-items:center; gap:4px; }
.how-phone__icons i { display:block; position:relative; }
.how-phone__icons i:first-child { width:13px; height:9px; background:linear-gradient(to top,#161622 0 100%) 0 6px/2px 3px no-repeat,linear-gradient(to top,#161622 0 100%) 4px 4px/2px 5px no-repeat,linear-gradient(to top,#161622 0 100%) 8px 1px/2px 8px no-repeat; }
.how-phone__icons i:nth-child(2) { width:10px; height:8px; border:1px solid #161622; border-right-color:transparent; border-bottom-color:transparent; border-radius:9px 0 0; transform:rotate(45deg); }
.how-phone__icons i:nth-child(2)::after { content:''; position:absolute; right:-1px; bottom:-1px; width:3px; height:3px; border-radius:50%; background:#161622; }
.how-phone__icons i:last-child { width:15px; height:7px; border:1px solid #161622; border-radius:2px; }.how-phone__icons i:last-child::before { content:''; position:absolute; inset:1px; border-radius:1px; background:#161622; }.how-phone__icons i:last-child::after { content:''; position:absolute; top:2px; right:-3px; width:2px; height:3px; background:#161622; }
.how-phone__title { position:relative; margin-top:20px; padding-left:9px; }.how-phone__title::before { content:''; position:absolute; top:1px; left:0; width:1px; height:10px; background:#e1dfe9; }
.how-thumb { background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 32%),linear-gradient(155deg,#a9c278 0 29%,#587545 30% 46%,#708ea1 47% 100%); }.how-thumb::before { content:''; position:absolute; bottom:7px; left:50%; width:15px; height:23px; border-radius:8px 8px 3px 3px; background:#332c2a; box-shadow:0 -7px 0 -3px #d8a27e,8px 5px 0 -5px #ece6d0; transform:translateX(-50%); }.how-thumb::after { text-shadow:0 1px 2px rgba(0,0,0,.35); }.how-thumb--two,.how-thumb--five,.how-thumb--eight { background:linear-gradient(160deg,rgba(255,255,255,.2),transparent 32%),linear-gradient(145deg,#829373 0 28%,#496334 29% 45%,#a6b4bd 46%); }.how-thumb--three,.how-thumb--six { background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 32%),linear-gradient(145deg,#b5b1a5 0 30%,#3d3e3a 31% 57%,#827a67 58%); }.how-thumb--four,.how-thumb--seven { background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 32%),linear-gradient(145deg,#a3b6a0 0 40%,#585b40 41% 56%,#7891a0 57%); }.how-thumb--nine { background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 32%),linear-gradient(145deg,#72958d 0 38%,#374e32 39% 54%,#a9a591 55%); }