/* Trash Camera — home page. Scenes are drawn with CSS + inline SVG tiles; home.js drives the loops. */

/* ---------- tiles: memories and clutter (scalable SVG) ---------- */
.mem, .junk { display: block; border-radius: 10%; background-size: cover; background-position: center; aspect-ratio: 1; }
.mem.m1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9a6b'/%3E%3Cstop offset='.6' stop-color='%23ffcf7a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23a)'/%3E%3Ccircle cx='50' cy='62' r='16' fill='%23fff3c4'/%3E%3Crect y='64' width='100' height='36' fill='%233a7bd5'/%3E%3Cpath d='M0 72h100M10 80h80M25 88h50' stroke='%23a8d4ff' stroke-width='2' opacity='.6'/%3E%3C/svg%3E"); }
.mem.m2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23a6dcff'/%3E%3Cpath d='M0 78 30 38l16 20 18-30 36 50v22H0z' fill='%234a6fa5'/%3E%3Cpath d='M30 38l8 10-8-2-6 4zM64 28l9 13-9-3-7 5z' fill='%23fff'/%3E%3Cpath d='M0 86c30-10 60-10 100 0v14H0z' fill='%2340a060'/%3E%3C/svg%3E"); }
.mem.m3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23ffe3ec'/%3E%3Ccircle cx='38' cy='44' r='14' fill='%23f7b267'/%3E%3Ccircle cx='64' cy='48' r='12' fill='%23e07a5f'/%3E%3Cpath d='M16 100c4-26 40-26 44 0zM44 100c4-22 38-22 40 0z' fill='%235b7fd6'/%3E%3Ccircle cx='34' cy='42' r='1.8' fill='%23333'/%3E%3Ccircle cx='42' cy='42' r='1.8' fill='%23333'/%3E%3Ccircle cx='60' cy='46' r='1.6' fill='%23333'/%3E%3Ccircle cx='68' cy='46' r='1.6' fill='%23333'/%3E%3C/svg%3E"); }
.mem.m4 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23182447'/%3E%3Ccircle cx='72' cy='24' r='9' fill='%23fff6d6'/%3E%3Cpath d='M0 70h14V48h10v22h8V36h12v34h8V54h10v16h10V42h12v28h16v30H0z' fill='%230b1226'/%3E%3Cpath d='M18 54h2v2h-2zM38 42h2v2h-2zM40 50h2v2h-2zM66 50h2v2h-2zM78 48h2v2h-2z' fill='%23ffd36b'/%3E%3C/svg%3E"); }
.mem.m5 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23c9f0d8'/%3E%3Cpath d='M0 62c30-8 70-8 100 0v38H0z' fill='%2363b96b'/%3E%3Cg fill='%23ff6f91'%3E%3Ccircle cx='18' cy='76' r='5'/%3E%3Ccircle cx='40' cy='84' r='6'/%3E%3Ccircle cx='66' cy='74' r='5'/%3E%3Ccircle cx='84' cy='88' r='6'/%3E%3C/g%3E%3Cg fill='%23ffd36b'%3E%3Ccircle cx='18' cy='76' r='2'/%3E%3Ccircle cx='40' cy='84' r='2.2'/%3E%3Ccircle cx='66' cy='74' r='2'/%3E%3Ccircle cx='84' cy='88' r='2.2'/%3E%3C/g%3E%3C/svg%3E"); }
.mem.m6 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23ffefd2'/%3E%3Cpath d='M30 30h40l-4 50H34z' fill='%23fff'/%3E%3Cpath d='M36 38h28l-2 20H38z' fill='%23ff8fa3'/%3E%3Cpath d='M50 16v14' stroke='%23e0a03c' stroke-width='3'/%3E%3Cpath d='M50 10c3 4 3 6 0 8-3-2-3-4 0-8z' fill='%23ff9a3c'/%3E%3Cpath d='M30 80h40' stroke='%23e0c9a0' stroke-width='4'/%3E%3C/svg%3E"); }

.junk.j-receipt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%238a7b68'/%3E%3Cpath d='M24 8h52v80l-6.5-5-6.5 5-6.5-5-6.5 5-6.5-5-6.5 5-6.5-5-6.5 5z' fill='%23f7f4ec'/%3E%3Cpath d='M34 18h32M32 30h24M32 38h30M32 46h20M32 54h28' stroke='%23a59f94' stroke-width='3'/%3E%3Cpath d='M32 66h18M56 66h12' stroke='%23333' stroke-width='4'/%3E%3C/svg%3E"); }
.junk.j-qr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23d8cdb8'/%3E%3Crect x='16' y='16' width='68' height='68' rx='4' fill='%23fff'/%3E%3Cg fill='%23111'%3E%3Cpath d='M22 22h18v18H22zM60 22h18v18H60zM22 60h18v18H22z'/%3E%3Cpath d='M46 22h6v6h-6zM46 34h6v12h-6zM22 46h6v6h-6zM34 46h6v6h-6zM46 52h12v6H46zM64 46h6v12h-6zM58 64h6v6h-6zM70 64h8v8h-8zM46 64h6v14h-6zM58 74h12v4H58zM74 46h4v4h-4z'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cpath d='M25 25h12v12H25zM63 25h12v12H63zM25 63h12v12H25z'/%3E%3C/g%3E%3Cg fill='%23111'%3E%3Cpath d='M28 28h6v6h-6zM66 28h6v6h-6zM28 66h6v6h-6z'/%3E%3C/g%3E%3C/svg%3E"); }
.junk.j-park { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%2367707d'/%3E%3Cpath d='M0 70h100v30H0z' fill='%23474e58'/%3E%3Cpath d='M12 100 30 70M88 100 70 70' stroke='%23fff' stroke-width='2'/%3E%3Crect x='30' y='16' width='40' height='40' rx='6' fill='%232f6fdf'/%3E%3Cpath d='M43 48V24h9a8 8 0 0 1 0 16h-9' stroke='%23fff' stroke-width='6' fill='none'/%3E%3Ctext x='50' y='90' font-family='Arial' font-weight='700' font-size='13' text-anchor='middle' fill='%23f2f2f2'%3EP2-417%3C/text%3E%3C/svg%3E"); }
.junk.j-wifi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23303640'/%3E%3Crect x='12' y='26' width='76' height='48' rx='4' fill='%23eceff3'/%3E%3Cg fill='none' stroke='%232f6fdf' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M20 46a16 16 0 0 1 22 0M24 52a9 9 0 0 1 14 0'/%3E%3C/g%3E%3Ccircle cx='31' cy='58' r='3' fill='%232f6fdf'/%3E%3Cpath d='M48 40h32M48 50h26M48 60h30' stroke='%235b6370' stroke-width='4'/%3E%3C/svg%3E"); }
.junk.j-label { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23c8d2dc'/%3E%3Crect x='10' y='30' width='80' height='40' rx='3' fill='%23ffd84a'/%3E%3Ctext x='50' y='60' font-family='Arial' font-weight='800' font-size='22' text-anchor='middle' fill='%23c4122f'%3E$4.99%3C/text%3E%3Cpath d='M16 38h30' stroke='%23786010' stroke-width='3'/%3E%3C/svg%3E"); }
.junk.j-board { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23b9a58a'/%3E%3Crect x='10' y='14' width='80' height='60' rx='2' fill='%23fbfbf9' stroke='%23c4c4c4' stroke-width='2'/%3E%3Cg fill='none' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 26h28M18 34h20' stroke='%232f6fdf'/%3E%3Cpath d='M56 50c6-12 16-12 22 0' stroke='%23e5484d'/%3E%3Cpath d='M18 50h22M18 58h28' stroke='%23222'/%3E%3C/g%3E%3Cpath d='M30 74v14M70 74v14' stroke='%23777' stroke-width='3'/%3E%3C/svg%3E"); }
.junk.j-bar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23c79a62'/%3E%3Crect x='14' y='22' width='72' height='56' rx='3' fill='%23fff'/%3E%3Cpath d='M22 30v34M26 30v34M31 30v34M34 30v34M40 30v34M43 30v34M48 30v34M53 30v34M55 30v34M61 30v34M66 30v34M69 30v34M74 30v34M78 30v34' stroke='%23111' stroke-width='2.2'/%3E%3Cpath d='M28 71h44' stroke='%23999' stroke-width='3'/%3E%3C/svg%3E"); }
.junk.j-shot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23263040'/%3E%3Crect x='28' y='8' width='44' height='84' rx='7' fill='%23f2f4f8'/%3E%3Cpath d='M34 22h32M34 30h22M34 38h28M34 46h18' stroke='%23b9c0cc' stroke-width='3'/%3E%3Crect x='34' y='56' width='32' height='12' rx='6' fill='%232f6fdf'/%3E%3C/svg%3E"); }
.junk.j-shirt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23efe7dc'/%3E%3Cpath d='M50 10v8' stroke='%23999' stroke-width='3'/%3E%3Cpath d='M28 22l14-6h16l14 6 12 16-10 6-6-6v48H32V38l-6 6-10-6z' fill='%23e86a4a'/%3E%3Cpath d='M42 16c2 6 14 6 16 0' fill='none' stroke='%23b24b30' stroke-width='3'/%3E%3C/svg%3E"); }

/* ---------- phone frame (iPhone Pro Max proportions, 1320 × 2868) ---------- */
.tc-phone {
  position: relative; padding: 3.4%; border-radius: 15% / 7%;
  background: linear-gradient(150deg, #4a4b52, #17181c 45%, #2b2c31);
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.85), inset 0 0 0 1.5px rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.6);
}
.tc-screen { position: relative; overflow: hidden; border-radius: 12% / 5.6%; aspect-ratio: 1320 / 2868; background: #000; isolation: isolate; }
.tc-screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* ---------- hero ---------- */
.tc-hero { position: relative; padding: 72px 0 0; overflow: hidden; }
.tc-hero-glow { position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none;
  background: radial-gradient(40% 50% at 72% 40%, rgba(255,93,93,.22), transparent 70%), radial-gradient(30% 40% at 20% 20%, rgba(255,154,60,.12), transparent 70%); }
.tc-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.tc-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-size: 14px; color: var(--text-2); font-weight: 600; }
.tc-kicker img { border-radius: 8px; }
.tc-hero h1 { margin: 22px 0 18px; font-size: clamp(38px, 4.7vw, 64px); }
.tc-grad { background: linear-gradient(100deg, var(--coral) 10%, var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tc-hero .lead { max-width: 560px; }
.tc-hero .badges { margin-top: 30px; }
.tc-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; }
.tc-pills li { font-size: 13.5px; color: var(--text-2); padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.tc-pills li::before { content: "✓ "; color: var(--ok); font-weight: 700; }

.tc-stage { position: relative; height: 640px; }
.tc-hero-phone { position: absolute; left: 50%; top: 10px; width: 270px; transform: translateX(-50%) rotate(-2deg); z-index: 2; }
.tc-vf-subject { position: absolute; left: 0; right: 0; top: 13.6%; height: 47.6%; display: grid; place-items: center; pointer-events: none; }
.tc-vf-subject .junk { width: 62%; border-radius: 6px; box-shadow: 0 20px 40px rgba(0,0,0,.55); transform: rotate(-4deg) scale(.9); opacity: 0; transition: opacity .45s, transform .6s cubic-bezier(.2,.8,.2,1); }
.tc-vf-subject .junk.in { opacity: 1; transform: rotate(-4deg) scale(1); }
.tc-vf-tag { display: none; }
.tc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.tc-flash.go { animation: tcFlash .5s ease-out; }
@keyframes tcFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
.tc-fly { display: none; }
.tc-shutter-hint { position: absolute; left: 50%; top: 83%; width: 17.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.tc-shutter-hint.go { animation: tcPress .45s ease-out; }
@keyframes tcPress { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); background: rgba(255,255,255,.35); } 100% { box-shadow: 0 0 0 18px rgba(255,255,255,0); background: transparent; } }
.tc-flyer { position: fixed; z-index: 50; pointer-events: none; border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,.6); background-size: cover; background-position: center; }

.tc-album { position: absolute; width: 196px; padding: 12px; border-radius: 20px; background: rgba(24,25,32,.82); border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); z-index: 3; }
.tc-album-photos { left: -6px; top: 70px; transform: rotate(-3deg); }
.tc-album-trash { right: -6px; top: 330px; transform: rotate(2.5deg); }
.tc-album-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.tc-album-n { margin-left: auto; font-weight: 600; font-size: 11.5px; color: var(--text-3); }
.tc-dot { width: 9px; height: 9px; border-radius: 50%; }
.tc-dot-mem { background: var(--mem); box-shadow: 0 0 10px var(--mem); }
.tc-dot-trash { background: var(--coral); box-shadow: 0 0 10px var(--coral); }
.tc-mem-grid, .tc-trash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.tc-mem-grid .mem, .tc-trash-grid .junk { border-radius: 6px; }
.tc-trash-grid .junk.pop { animation: tcPop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes tcPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.tc-album-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.tc-check { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); color: #062; font-size: 10px; font-weight: 900; }
.tc-plus0 { margin-left: auto; font-size: 12px; color: var(--ok); }
.tc-plus0.ping { animation: tcPing .8s ease-out; }
@keyframes tcPing { 0% { transform: scale(1.6); text-shadow: 0 0 12px var(--ok); } 100% { transform: none; } }
.tc-bin { width: 12px; height: 13px; border-radius: 1px 1px 3px 3px; background: var(--coral); position: relative; margin-top: 3px; }
.tc-bin::before { content: ""; position: absolute; left: -2px; right: -2px; top: -4px; height: 2.5px; border-radius: 2px; background: var(--coral); }
.tc-count.bump { display: inline-block; animation: tcPing .6s ease-out; color: var(--coral); }

.tc-ticker { margin-top: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); overflow: hidden; }
.tc-ticker-track { display: flex; gap: 42px; width: max-content; padding: 16px 0; animation: tcMarquee 46s linear infinite; }
.tc-ticker span { white-space: nowrap; color: var(--text-2); font-weight: 600; font-size: 15px; }
@keyframes tcMarquee { to { transform: translateX(-50%); } }

/* ---------- section heads ---------- */
.tc-head { max-width: 760px; margin-bottom: 44px; }
.tc-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.tc-muted { color: var(--text-3); }
.tc-problem, .tc-steps-sec, .tc-feats, .tc-more, .tc-privacy, .tc-gallery, .tc-faq { padding: 110px 0; }
.tc-steps-sec { background: var(--bg-soft); }
.tc-problem { padding-top: 90px; }
.tc-more { background: var(--bg-soft); }

/* ---------- problem: roll demo ---------- */
.tc-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 99px; background: #15161c; border: 1px solid var(--line); margin-bottom: 26px; }
.tc-switch button { position: relative; z-index: 1; appearance: none; border: 0; background: none; color: var(--text-2); font: 600 15px var(--font); padding: 10px 20px; border-radius: 99px; cursor: pointer; transition: color .3s; }
.tc-switch button.on { color: #fff; }
.tc-switch-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 99px; background: #2b2d36; transition: transform .5s cubic-bezier(.3,1.3,.5,1), background .4s; }
.tc-roll-demo.after .tc-switch-thumb { transform: translateX(100%); background: linear-gradient(100deg, var(--coral), var(--ember)); }

.tc-roll-wrap { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; align-items: start; }
.tc-roll-card, .tc-tray-card { border-radius: 26px; padding: 20px; background: var(--bg-card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.tc-tray-card { border-style: dashed; border-color: rgba(255,93,93,.35); background: linear-gradient(180deg, rgba(255,93,93,.06), transparent 60%), var(--bg-card); min-height: 100%; display: flex; flex-direction: column; }
.tc-roll-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tc-roll-top strong { font-size: 18px; }
.tc-roll-meta { font-size: 13.5px; color: var(--text-3); }
.tc-roll-meta b { color: var(--text); }
.tc-roll { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; min-height: 120px; }
.tc-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-content: start; flex: 1; }
.tc-roll > i, .tc-tray > i { border-radius: 8px; will-change: transform; }
.tc-roll > .junk { box-shadow: inset 0 0 0 2px rgba(255,93,93,0); transition: box-shadow .4s; }
.tc-roll-demo:not(.after) .tc-roll > .junk.flag { box-shadow: inset 0 0 0 2px var(--coral); }
.tc-tray-empty { margin: 14px 0 0; font-size: 13.5px; color: var(--text-3); }
.tc-clear { align-self: flex-start; margin-top: 12px; appearance: none; border: 1px solid rgba(255,93,93,.4); background: rgba(255,93,93,.1); color: #ff8b8b; font: 600 14px var(--font); padding: 8px 14px; border-radius: 99px; cursor: pointer; opacity: .4; pointer-events: none; transition: opacity .3s; }
.tc-roll-demo.after .tc-clear { opacity: 1; pointer-events: auto; }
.tc-tray > i.gone { animation: tcGone .55s cubic-bezier(.5,0,.8,.3) forwards; }
@keyframes tcGone { to { transform: translateY(30px) scale(.2) rotate(18deg); opacity: 0; } }

.tc-storage { margin-top: 18px; }
.tc-storage-label { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-2); margin-bottom: 8px; }
.tc-storage-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.tc-storage-bar i { display: block; height: 100%; width: 97%; border-radius: inherit; background: linear-gradient(90deg, #ffb340, var(--coral)); transition: width 1.2s cubic-bezier(.3,.8,.2,1), background .8s; }
.tc-roll-demo.after .tc-storage-bar i { width: 42%; background: linear-gradient(90deg, #4aa8ff, var(--mem)); }
.tc-storage-note { margin: 8px 0 0; font-size: 13px; color: #ff8b8b; transition: color .4s; }
.tc-roll-demo.after .tc-storage-note { color: var(--ok); }

/* ---------- steps ---------- */
.tc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tc-step { position: relative; padding: 24px; border-radius: 26px; background: var(--bg-card); border: 1px solid var(--line); transition: border-color .4s, transform .5s, box-shadow .5s; cursor: default; }
.tc-step.on { border-color: rgba(255,93,93,.45); transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(255,93,93,.45); }
.tc-step h3 { font-size: 24px; margin: 10px 0 8px; }
.tc-step p { color: var(--text-2); margin: 0; font-size: 16px; }
.tc-step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.07); font-weight: 800; font-size: 14px; }
.tc-step.on .tc-step-n { background: linear-gradient(100deg, var(--coral), var(--ember)); }
.tc-step-art { position: relative; height: 170px; border-radius: 18px; margin-bottom: 18px; overflow: hidden; background: radial-gradient(70% 90% at 50% 40%, #23252e, #121319); }
.tc-step-dots { display: none; justify-content: center; gap: 8px; margin-top: 18px; }
.tc-step-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background .3s, width .3s; }
.tc-step-dots i.on { background: var(--coral); width: 22px; border-radius: 99px; }

/* 1 snap: aperture */
.tc-iris { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #3a5d8f, #0c1424 70%); box-shadow: 0 0 0 8px #2b2d34, 0 0 0 10px #3c3e46; }
.tc-iris i { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -120px 0 0 -12px; background: linear-gradient(90deg, #30323b, #1b1c22); border-left: 1.5px solid #4a4d58; transform-origin: 12px 120px; transform: rotate(calc(var(--k) * 60deg)) translateX(64px); transition: transform .35s ease-in; }
.tc-iris i:nth-child(1) { --k: 0; } .tc-iris i:nth-child(2) { --k: 1; } .tc-iris i:nth-child(3) { --k: 2; }
.tc-iris i:nth-child(4) { --k: 3; } .tc-iris i:nth-child(5) { --k: 4; } .tc-iris i:nth-child(6) { --k: 5; }
.tc-step.on .tc-iris i { animation: tcIris 2.4s ease-in-out infinite; }
@keyframes tcIris { 0%, 35% { transform: rotate(calc(var(--k) * 60deg)) translateX(64px); } 45%, 52% { transform: rotate(calc(var(--k) * 60deg + 20deg)) translateX(10px); } 62%, 100% { transform: rotate(calc(var(--k) * 60deg)) translateX(64px); } }
.tc-art-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.tc-step.on .tc-art-flash { animation: tcArtFlash 2.4s ease-out infinite; }
@keyframes tcArtFlash { 0%, 48% { opacity: 0; } 50% { opacity: .85; } 70%, 100% { opacity: 0; } }

/* 2 use: QR lock-on */
.tc-mini-qr { position: absolute; left: 50%; top: 44%; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 8px; }
.tc-mini-qr { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 16 68 68'%3E%3Crect x='16' y='16' width='68' height='68' rx='4' fill='%23fff'/%3E%3Cg fill='%23111'%3E%3Cpath d='M22 22h18v18H22zM60 22h18v18H60zM22 60h18v18H22z'/%3E%3Cpath d='M46 22h6v6h-6zM46 34h6v12h-6zM22 46h6v6h-6zM34 46h6v6h-6zM46 52h12v6H46zM64 46h6v12h-6zM58 64h6v6h-6zM70 64h8v8h-8zM46 64h6v14h-6zM58 74h12v4H58zM74 46h4v4h-4z'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cpath d='M25 25h12v12H25zM63 25h12v12H63zM25 63h12v12H25z'/%3E%3C/g%3E%3Cg fill='%23111'%3E%3Cpath d='M28 28h6v6h-6zM66 28h6v6h-6zM28 66h6v6h-6z'/%3E%3C/g%3E%3C/svg%3E") center / cover; transform: rotate(-6deg); }
.tc-reticle { position: absolute; left: 50%; top: 44%; width: 150px; height: 150px; margin: -75px 0 0 -75px; transition: all .5s; }
.tc-reticle i { position: absolute; width: 22px; height: 22px; border: 3px solid #ffd60a; }
.tc-reticle i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.tc-reticle i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.tc-reticle i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.tc-reticle i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.tc-step.on .tc-reticle { animation: tcLock 3s ease-in-out infinite; }
@keyframes tcLock { 0%, 15% { transform: scale(1); opacity: .5; } 40%, 85% { transform: scale(.66) rotate(-6deg); opacity: 1; } 100% { transform: scale(1); opacity: .5; } }
.tc-mini-chip { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 20px); opacity: 0; padding: 7px 14px; border-radius: 99px; background: #0a84ff; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.tc-step.on .tc-mini-chip { animation: tcChip 3s ease-in-out infinite; }
@keyframes tcChip { 0%, 38% { opacity: 0; transform: translate(-50%, 20px); } 48%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }

/* 3 toss or keep */
.tc-mini-photo { position: absolute; top: 34px; width: 74px; height: 74px; border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,.5); background-size: cover; }
.tc-mini-photo.p1 { left: calc(50% - 86px); }
.tc-mini-photo.p2 { left: calc(50% + 12px); }
.tc-mini-bin { position: absolute; left: 30px; bottom: 18px; width: 34px; height: 40px; }
.tc-mini-bin .can { position: absolute; left: 3px; right: 3px; bottom: 0; top: 8px; border-radius: 3px 3px 7px 7px; background: linear-gradient(90deg, #8e939c, #c9ccd2 50%, #8e939c); }
.tc-mini-bin .lid { position: absolute; left: 0; right: 0; top: 2px; height: 6px; border-radius: 3px; background: var(--coral); transform-origin: 0 100%; }
.tc-mini-heart { position: absolute; right: 22px; bottom: 22px; padding: 6px 12px; border-radius: 99px; background: rgba(124,199,255,.15); color: var(--mem); font-size: 13px; font-weight: 700; }
.tc-step.on .tc-mini-photo.p1 { animation: tcToss 3.2s ease-in-out infinite; }
.tc-step.on .tc-mini-photo.p2 { animation: tcKeep 3.2s ease-in-out infinite; }
.tc-step.on .tc-mini-bin .lid { animation: tcLid 3.2s ease-in-out infinite; }
.tc-step.on .tc-mini-heart { animation: tcHeart 3.2s ease-in-out infinite; }
@keyframes tcToss { 0%, 15% { transform: none; opacity: 1; } 45% { transform: translate(-60px, 70px) scale(.25) rotate(-30deg); opacity: 1; } 50%, 100% { transform: translate(-60px, 70px) scale(.1); opacity: 0; } }
@keyframes tcLid { 0%, 25% { transform: none; } 35%, 48% { transform: rotate(-40deg); } 58%, 100% { transform: none; } }
@keyframes tcKeep { 0%, 50% { transform: none; opacity: 1; } 80% { transform: translate(60px, 62px) scale(.25); opacity: 1; } 85%, 100% { transform: translate(60px, 62px) scale(.1); opacity: 0; } }
@keyframes tcHeart { 0%, 78% { transform: none; } 84% { transform: scale(1.25); box-shadow: 0 0 20px rgba(124,199,255,.6); } 92%, 100% { transform: none; } }

/* ---------- features with real screens ---------- */
.tc-feats { overflow: hidden; }
.tc-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.tc-feat + .tc-feat { margin-top: 130px; }
.tc-flip .tc-feat-visual { order: 2; }
.tc-feat-visual { position: relative; display: flex; justify-content: center; min-height: 600px; align-items: center; }
.tc-feat-phone { width: 290px; }
.tc-feat-copy .h2 { margin-top: 10px; }
.tc-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.tc-list li { position: relative; padding-left: 28px; color: var(--text-2); }
.tc-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--coral), var(--ember)); -webkit-mask: radial-gradient(circle, #000 3.5px, transparent 4px); mask: radial-gradient(circle, #000 3.5px, transparent 4px); }

/* gallery sorter */
.tc-hl { position: absolute; left: 0; right: 0; border-radius: 4px; pointer-events: none; opacity: 0; }
.tc-hl-qr { top: 15.8%; height: 19.8%; box-shadow: inset 0 0 0 2.5px var(--ember), 0 0 30px rgba(255,154,60,.5); }
.tc-hl-oth { top: 35.8%; height: 35.4%; box-shadow: inset 0 0 0 2.5px var(--mem), 0 0 30px rgba(124,199,255,.4); }
.tc-sorter.play .tc-hl-qr { animation: tcHl 6s ease-in-out infinite; }
.tc-sorter.play .tc-hl-oth { animation: tcHl 6s ease-in-out 3s infinite; }
@keyframes tcHl { 0%, 5% { opacity: 0; } 15%, 40% { opacity: 1; } 50%, 100% { opacity: 0; } }
.tc-float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; background: rgba(28,29,37,.9); border: 1px solid rgba(255,255,255,.12); font-weight: 700; font-size: 15px; box-shadow: 0 20px 40px -10px rgba(0,0,0,.7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tc-float span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; background: rgba(255,154,60,.18); color: var(--ember); }
.tc-float-a { left: 2%; top: 18%; animation: tcBob 6s ease-in-out infinite; }
.tc-float-b { right: 0; top: 46%; animation: tcBob 7s ease-in-out -2s infinite; }
.tc-float-c { left: 6%; bottom: 14%; animation: tcBob 6.5s ease-in-out -4s infinite; }
.tc-float-b span { background: rgba(124,199,255,.16); color: var(--mem); }
.tc-float-c span { background: rgba(61,220,151,.16); color: var(--ok); }
@keyframes tcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* QR: two phones fanned */
.tc-back { position: absolute; width: 250px; transform: translate(-36%, 2%) rotate(-8deg); opacity: .55; filter: saturate(.7); }
.tc-front { position: relative; transform: translate(18%, 0) rotate(3deg); z-index: 2; }
.tc-qr-lock { position: absolute; left: 51%; top: 31.5%; width: 27%; aspect-ratio: 1; opacity: 0; }
.tc-qr-lock i { position: absolute; width: 26%; height: 26%; border: 3px solid #ffd60a; }
.tc-qr-lock i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.tc-qr-lock i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.tc-qr-lock i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.tc-qr-lock i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.tc-qr-lock b { position: absolute; left: 4%; right: 4%; height: 2px; top: 10%; background: linear-gradient(90deg, transparent, #ffd60a, transparent); box-shadow: 0 0 12px #ffd60a; }
.tc-scanner.play .tc-qr-lock { animation: tcQrLock 4.5s ease-in-out infinite; }
.tc-scanner.play .tc-qr-lock b { animation: tcScan 4.5s ease-in-out infinite; }
@keyframes tcQrLock { 0% { opacity: 0; transform: scale(1.6); } 15%, 70% { opacity: 1; transform: scale(1); } 85%, 100% { opacity: 0; transform: scale(1); } }
@keyframes tcScan { 0%, 10% { top: 10%; opacity: 0; } 15% { opacity: 1; } 40% { top: 88%; } 55% { top: 10%; opacity: 1; } 60%, 100% { opacity: 0; } }
.tc-tap { position: absolute; left: 50%; top: 88.4%; width: 16%; aspect-ratio: 1; margin-left: -8%; border-radius: 50%; background: rgba(255,255,255,.45); opacity: 0; transform: translateY(-50%); }
.tc-scanner.play .tc-tap { animation: tcTap 4.5s ease-out infinite; }
@keyframes tcTap { 0%, 58% { opacity: 0; transform: translateY(-50%) scale(.3); } 64% { opacity: .9; transform: translateY(-50%) scale(.8); } 78%, 100% { opacity: 0; transform: translateY(-50%) scale(1.8); } }

/* text reader */
.tc-ocr-sweep { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(255,93,93,.0) 40%, rgba(255,93,93,.35) 96%, #ff8b8b 100%); opacity: 0; pointer-events: none; }
.tc-reader.play .tc-ocr-sweep { animation: tcSweep 5s ease-in-out infinite; }
@keyframes tcSweep { 0% { transform: translateY(-30%); opacity: 0; } 8% { opacity: 1; } 40% { transform: translateY(230%); opacity: 1; } 46%, 100% { transform: translateY(230%); opacity: 0; } }
.tc-ocr-mark { position: absolute; left: 41.5%; top: 34%; width: 51%; height: 4%; border-radius: 6px; background: rgba(255,214,10,.35); box-shadow: 0 0 0 2px #ffd60a; transform: translateY(-50%) rotate(-33deg) scaleX(0); transform-origin: 0 50%; pointer-events: none; mix-blend-mode: screen; }
.tc-reader.play .tc-ocr-mark { animation: tcMark 5s ease-out infinite; }
@keyframes tcMark { 0%, 38% { transform: translateY(-50%) rotate(-33deg) scaleX(0); opacity: 1; } 50%, 88% { transform: translateY(-50%) rotate(-33deg) scaleX(1); opacity: 1; } 100% { transform: translateY(-50%) rotate(-33deg) scaleX(1); opacity: 0; } }
.tc-ocr-row { position: absolute; left: 5%; right: 5%; top: 59.2%; height: 4.8%; border-radius: 12px; box-shadow: 0 0 0 2px #0a84ff, 0 0 24px rgba(10,132,255,.6); opacity: 0; }
.tc-reader.play .tc-ocr-row { animation: tcRow 5s ease-out infinite; }
@keyframes tcRow { 0%, 52% { opacity: 0; } 60%, 88% { opacity: 1; } 100% { opacity: 0; } }
.tc-callout { position: absolute; z-index: 3; right: 2%; bottom: 20%; display: flex; gap: 12px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 18px; background: rgba(28,29,37,.92); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: translateY(16px) scale(.96); transition: all .6s cubic-bezier(.2,.9,.3,1.2); }
.tc-callout.show { opacity: 1; transform: none; }
.tc-callout-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #0a84ff; font-size: 18px; }
.tc-callout b { display: block; font-size: 16px; color: #64b5ff; }
.tc-callout small { color: var(--text-3); font-size: 12.5px; }

/* ---------- bento ---------- */
.tc-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.tc-tile { grid-column: span 2; padding: 22px; border-radius: 24px; background: var(--bg-card); border: 1px solid var(--line); }
.tc-tile-video, .tc-tile-keep { grid-column: span 3; }
.tc-tile h3 { font-size: 20px; margin: 16px 0 6px; }
.tc-tile p { color: var(--text-2); font-size: 15.5px; margin: 0; }
.tc-tile > div[aria-hidden] { position: relative; height: 120px; border-radius: 16px; overflow: hidden; background: radial-gradient(80% 100% at 50% 30%, #22242c, #131419); }

.tc-rec { display: flex; align-items: center; justify-content: center; gap: 12px; font: 700 22px var(--font-mono); }
.tc-rec i { width: 16px; height: 16px; border-radius: 50%; background: #ff3b30; animation: tcBlink 1s steps(2) infinite; }
.tc-rec b { font: 800 12px var(--font); padding: 4px 8px; border-radius: 6px; background: #ffd60a; color: #111; }
@keyframes tcBlink { 50% { opacity: .15; } }

.tc-keep { display: flex; align-items: center; justify-content: center; gap: 18px; }
.tc-keep-pic { width: 70px; height: 70px; border-radius: 10px; background-size: cover; box-shadow: 0 10px 20px rgba(0,0,0,.5); }
.tc-keep-arrow { font-size: 26px; color: var(--text-3); }
.tc-keep-lib { padding: 10px 16px; border-radius: 14px; background: linear-gradient(135deg, #ffcf5c, #ff6f91 40%, #7c6cff 75%, #42c3ff); color: #fff; font-weight: 800; }
.tc-keep-pic { animation: tcKeepPic 3.4s ease-in-out infinite; }
@keyframes tcKeepPic { 0%, 20% { transform: none; opacity: 1; } 55% { transform: translateX(150px) scale(.4); opacity: 0; } 56% { transform: none; opacity: 0; } 75%, 100% { transform: none; opacity: 1; } }

.tc-share { display: flex; align-items: flex-end; justify-content: center; }
.tc-share-sheet { display: flex; gap: 10px; padding: 14px 16px; border-radius: 18px 18px 0 0; background: #2a2c34; width: 80%; justify-content: center; }
.tc-share-sheet i { width: 40px; height: 40px; border-radius: 10px; background: #3a3d47; }
.tc-share-tc { position: absolute; left: 50%; bottom: 14px; margin-left: 32px; animation: tcShareIn 3.2s ease-in-out infinite; }
.tc-share-tc img { border-radius: 10px; box-shadow: 0 0 0 2px var(--coral), 0 10px 20px rgba(0,0,0,.5); }
@keyframes tcShareIn { 0%, 20% { transform: translateY(0); } 35%, 70% { transform: translateY(-50px) scale(1.15); } 85%, 100% { transform: translateY(0); } }

.tc-crop { display: grid; place-items: center; }
.tc-crop-pic { width: 76px; height: 96px; border-radius: 6px; background-size: cover; }
.tc-crop-box { position: absolute; left: 50%; top: 50%; width: 76px; height: 96px; margin: -48px 0 0 -38px; border: 2px solid #fff; box-shadow: 0 0 0 999px rgba(0,0,0,.55); animation: tcCrop 3.6s ease-in-out infinite; }
@keyframes tcCrop { 0%, 15% { transform: none; } 45%, 75% { transform: translate(8px, 22px) scale(.72, .5) rotate(0); } 100% { transform: none; } }

.tc-clear-demo { display: grid; grid-template-columns: repeat(6, 30px); gap: 6px; align-content: center; justify-content: center; }
.tc-clear-demo i { width: 30px; height: 30px; border-radius: 6px; background-size: cover; animation: tcClearAll 4s ease-in-out infinite; animation-delay: calc(var(--d) * 60ms); }
.tc-clear-demo span { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 800 26px var(--font); color: var(--ok); opacity: 0; animation: tcZero 4s ease-in-out infinite; }
@keyframes tcClearAll { 0%, 30% { transform: none; opacity: 1; } 45%, 80% { transform: translateY(40px) rotate(20deg) scale(.3); opacity: 0; } 95%, 100% { transform: none; opacity: 1; } }
@keyframes tcZero { 0%, 45% { opacity: 0; transform: translateY(-50%) scale(.8); } 55%, 78% { opacity: 1; transform: translateY(-50%) scale(1); } 88%, 100% { opacity: 0; } }

/* ---------- privacy ---------- */
.tc-privacy-card { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center; padding: 44px; border-radius: 32px; background: radial-gradient(60% 120% at 0% 0%, rgba(61,220,151,.1), transparent 60%), var(--bg-card); border: 1px solid var(--line); }
.tc-lock { position: relative; width: 96px; height: 110px; }
.tc-lock-shackle { position: absolute; left: 20px; right: 20px; top: 0; height: 60px; border: 10px solid #8f96a3; border-bottom: 0; border-radius: 40px 40px 0 0; transition: transform .6s cubic-bezier(.3,1.5,.5,1); }
.tc-lock-body { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; border-radius: 16px; background: linear-gradient(135deg, var(--ok), #1aa56d); box-shadow: 0 20px 40px -10px rgba(61,220,151,.5); }
.tc-privacy-card:not(.in) .tc-lock-shackle { transform: translateY(-16px); }
.tc-zeros { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tc-zeros div { padding: 18px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.tc-zeros b { display: block; font: 800 40px/1 var(--font-display); letter-spacing: -.03em; color: var(--ok); }
.tc-zeros span { color: var(--text-2); font-size: 14px; }

/* ---------- screenshot gallery: full images, never cropped ---------- */
.tc-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-top: 10px; border-radius: 99px; background: #15161c; border: 1px solid var(--line); }
.tc-tabs button { appearance: none; border: 0; background: none; color: var(--text-2); font: 600 15px var(--font); padding: 8px 20px; border-radius: 99px; cursor: pointer; }
.tc-tabs button[aria-selected="true"] { background: #2b2d36; color: #fff; }
.tc-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(24px, calc((100vw - var(--maxw)) / 2 + 24px)) 26px; scrollbar-width: thin; }
.tc-rail[hidden] { display: none; }
.tc-rail img { flex: 0 0 auto; width: auto; height: min(72vh, 640px); aspect-ratio: auto; object-fit: contain; border-radius: 22px; scroll-snap-align: center; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: #e9e9e9; }
.tc-rail-ipad img { height: min(64vh, 560px); }

/* ---------- FAQ + CTA ---------- */
.tc-faq { background: var(--bg-soft); }
.tc-cta { padding: 120px 0; background: radial-gradient(50% 80% at 50% 100%, rgba(255,93,93,.22), transparent 70%); }
.tc-cta .badges { justify-content: center; margin-top: 28px; }
.tc-cta-icon { display: inline-block; margin-bottom: 18px; animation: tcBob 5s ease-in-out infinite; }
.tc-cta-icon img { border-radius: 26px; box-shadow: 0 30px 60px -20px rgba(255,93,93,.55); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .tc-hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .tc-hero-copy { text-align: center; }
  .tc-hero .lead { margin-left: auto; margin-right: auto; }
  .tc-hero .badges, .tc-pills { justify-content: center; }
  .tc-stage { max-width: 560px; width: 100%; margin: 0 auto; }
  .tc-roll-wrap { grid-template-columns: 1fr; }
  .tc-feat { grid-template-columns: 1fr; gap: 30px; }
  .tc-flip .tc-feat-visual { order: 0; }
  .tc-feat-copy { max-width: 620px; }
  .tc-steps { grid-template-columns: 1fr; }
  .tc-bento { grid-template-columns: 1fr 1fr; }
  .tc-tile, .tc-tile-video, .tc-tile-keep { grid-column: span 1; }
  .tc-tile-clear { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .tc-hero { padding-top: 40px; }
  .tc-stage { height: 520px; }
  .tc-hero-phone { width: 218px; }
  .tc-album { width: 142px; padding: 9px; border-radius: 16px; }
  .tc-album-head { font-size: 12px; gap: 5px; margin-bottom: 7px; }
  .tc-album-n { display: none; }
  .tc-album-foot { font-size: 11px; }
  .tc-album-photos { left: -4px; top: 40px; }
  .tc-album-trash { right: -4px; top: 270px; }
  .tc-problem, .tc-steps-sec, .tc-feats, .tc-more, .tc-privacy, .tc-gallery, .tc-faq { padding: 76px 0; }
  .tc-roll { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .tc-switch button { font-size: 13px; padding: 9px 12px; }
  .tc-feat-visual { min-height: 500px; }
  .tc-feat-phone { width: 236px; }
  .tc-back { width: 200px; }
  .tc-float { font-size: 13px; padding: 8px 12px; }
  .tc-bento { grid-template-columns: 1fr; }
  .tc-tile-clear { grid-column: auto; }
  .tc-privacy-card { grid-template-columns: 1fr; padding: 28px; text-align: center; justify-items: center; }
  .tc-zeros { grid-template-columns: 1fr 1fr; }
  .tc-rail { gap: 14px; padding-left: 16px; padding-right: 16px; }
  .tc-rail img { height: 520px; border-radius: 18px; }
  .tc-rail-ipad img { height: 420px; }
  .tc-steps-sec .tc-step-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-ticker-track, .tc-float, .tc-cta-icon, .tc-rec i, .tc-share-tc, .tc-crop-box, .tc-clear-demo i, .tc-clear-demo span, .tc-keep-pic { animation: none !important; }
  .tc-step .tc-iris i, .tc-step .tc-reticle, .tc-step .tc-mini-chip, .tc-step .tc-mini-photo, .tc-step .tc-mini-bin .lid, .tc-step .tc-mini-heart, .tc-step .tc-art-flash { animation: none !important; }
  .tc-step .tc-mini-chip { opacity: 1; transform: translate(-50%, 0); }
  .tc-callout { opacity: 1; transform: none; }
}