/* ==========================================================================
   Phase 2 pages (Névjegycsere, NFC iPhone/Android): layout A + the phone demo
   ========================================================================== */
.tt-demo [data-l]{display:none}
.tt-demo[data-lang="hu"] [data-l="hu"],.tt-demo[data-lang="en"] [data-l="en"]{display:revert}
.tt-demo.tt-demo--bare{padding:0}.tt-demo.tt-demo--bare[data-demo="tap"]{padding-top:70px}.tt-demo.tt-demo--bare .steps{display:none}
.tt-p2-hero{display:grid;justify-items:center;gap:var(--tt-space-m);text-align:center;padding-top:calc(12px + var(--tt-header-h) + var(--tt-space-2xl))}
.tt-p2-hero .tt-title{max-width:22ch}.tt-p2-hero .tt-lead{max-width:56ch}
.tt-p2-hero .tt-breadcrumb__list{justify-content:center}
.tt-p2-hero .tt-btn-row{justify-content:center;margin-top:var(--tt-space-s)}
.tt-p2-how{margin-top:var(--tt-space-2xl);overflow-x:clip}
[data-page^="p2-"] .tt-section{margin-block:calc(var(--tt-section-y) * .72)}
[data-page^="p2-"] .tt-shop{padding-top:0}/* the cards block keeps the shop page's 100px top padding otherwise: FAQ → cards gets twice the section gap */
.tt-p2-how__panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--tt-space-2xl);padding:var(--tt-space-xl) var(--tt-space-2xl);border-radius:32px;background:var(--tt-canvas)}
.tt-p2-how__text{display:grid;gap:var(--tt-space-m)}
.tt-p2-steps{display:grid;margin-top:var(--tt-space-s);padding:0;list-style:none;border-top:1px solid var(--tt-g8)}
.tt-p2-steps li{position:relative;display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--tt-g8);color:var(--tt-g5);cursor:pointer;transition:color .3s}
.tt-p2-steps li:focus-visible{outline:2px solid var(--tt-ink);outline-offset:4px;border-radius:4px}
.tt-p2-steps li.on,.tt-p2-steps li:hover{color:var(--tt-ink)}
.tt-p2-steps .n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;font-size:12px;font-weight:500;line-height:1;transition:background .3s,color .3s,box-shadow .3s}
.tt-p2-steps li.on .n{background:var(--tt-ink);color:#fff;box-shadow:none}
.tt-p2-steps li>div{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .55s var(--tt-out,cubic-bezier(.2,.9,.2,1))}
.tt-p2-steps li.on>div{grid-template-rows:auto 1fr}
.tt-p2-steps b{display:block;padding-top:1px;font-weight:500;font-size:18px;line-height:1.3;letter-spacing:-.02em}
.tt-p2-steps p{overflow:hidden;max-width:44ch;color:var(--tt-g4);font-size:15px;line-height:1.5}
.tt-p2-steps li.on p{padding-top:6px}
.tt-p2-steps__bar{position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--tt-ink);transform:scaleX(0);transform-origin:left}
.tt-p2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tt-grid-gap)}
.tt-p2-card{display:grid;align-content:start;gap:10px;padding:28px;border-radius:24px;box-shadow:inset 0 0 0 1px var(--tt-g8);color:var(--tt-g4);font-size:15px;line-height:1.55}
.tt-p2-card__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--tt-canvas);color:var(--tt-ink)}.tt-p2-card__ic::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.tt-p2-card__ic[data-ic="users"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="bell"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="sheet"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="send"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="shield"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="toggle"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='6'/%3E%3Ccircle cx='16' cy='12' r='2'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="phone"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="nfc"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8.32a7.43 7.43 0 0 1 0 7.36'/%3E%3Cpath d='M9.46 6.21a11.76 11.76 0 0 1 0 11.58'/%3E%3Cpath d='M12.91 4.1a15.91 15.91 0 0 1 .01 15.8'/%3E%3Cpath d='M16.37 2a20.16 20.16 0 0 1 0 20'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="settings"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7'/%3E%3Cpath d='M10 4H3'/%3E%3Cpath d='M21 12h-9'/%3E%3Cpath d='M8 12H3'/%3E%3Cpath d='M21 20h-5'/%3E%3Cpath d='M12 20H3'/%3E%3Cpath d='M14 2v4'/%3E%3Cpath d='M8 10v4'/%3E%3Cpath d='M16 18v4'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="qr"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="globe"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="image"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="link"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="pin"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="play"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="share"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' x2='15.42' y1='13.51' y2='17.49'/%3E%3Cline x1='15.41' x2='8.59' y1='6.51' y2='10.49'/%3E%3C/svg%3E")}
.tt-p2-card__ic[data-ic="user"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
.tt-p2-card h3{margin-top:6px;font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--tt-ink)}
.tt-p2-card p+p{margin-top:8px}.tt-p2-card strong{font-weight:500;color:var(--tt-ink)}
.tt-p2-card :is(ul,ol){display:grid;gap:6px;padding-left:1.2em}.tt-p2-card ul{list-style:disc}.tt-p2-card ol{list-style:decimal}
.tt-p2-card a{color:var(--tt-ink);text-decoration:underline;text-underline-offset:.2em}
/* comparison table (free vs NFC page): label | free option | taptap, the taptap column on a soft band */
.tt-p2-cmp{display:grid;font-size:15px;line-height:1.45}
.tt-p2-cmp__row{display:grid;grid-template-columns:.8fr 1fr 1fr;align-items:stretch}
.tt-p2-cmp__row>*{padding:18px 20px;border-bottom:1px solid var(--tt-g8)}
.tt-p2-cmp__label{grid-column:1;padding-left:0;font-weight:500;color:var(--tt-ink)}
.tt-p2-cmp__free{grid-column:2;color:var(--tt-g5)}
.tt-p2-cmp__tt{grid-column:3;position:relative;padding-left:46px;background:var(--tt-canvas);color:var(--tt-ink)}
.tt-p2-cmp__row:not(.tt-p2-cmp__row--head) .tt-p2-cmp__tt::before{content:"✓";position:absolute;left:20px;top:18px;font-weight:600}
.tt-p2-cmp__row--head{box-shadow:inset 0 -1px 0 var(--tt-ink)}/* Bricks drops the empty first header cell: the row draws the line */
.tt-p2-cmp__row--head>*{padding-top:22px;border-bottom-color:var(--tt-ink);font-size:14px;font-weight:500;color:var(--tt-g5)}
.tt-p2-cmp__row--head .tt-p2-cmp__tt{padding-left:20px;border-radius:18px 18px 0 0;color:var(--tt-ink)}
.tt-p2-cmp__row:last-child>*{border-bottom:0}
.tt-p2-cmp__row:last-child .tt-p2-cmp__tt{border-radius:0 0 18px 18px}
/* device tabs (NFC page): iPhone | Android | Every phone, two equal boxes per tab */
.tt-p2-dev{padding:8px;border-radius:24px;background:var(--tt-canvas)}
.tt-p2-dev__tabs{display:flex;gap:4px;width:max-content;max-width:100%;margin:16px auto 0;padding:4px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--tt-g8)}
.tt-p2-dev__tab{padding:10px 20px;border:0;border-radius:99px;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--tt-g5);cursor:pointer;transition:background .25s,color .25s}
.tt-p2-dev__tab:hover{color:var(--tt-ink)}
.tt-p2-dev__tab[aria-selected="true"]{background:var(--tt-ink);color:#fff}
.tt-p2-dev__tab:focus-visible{outline:2px solid var(--tt-ink);outline-offset:2px}
.tt-p2-dev__panel{padding:28px 32px 36px;animation:ttDevIn .4s var(--tt-out,ease)}
.tt-p2-dev__panel[hidden]{display:none}
@keyframes ttDevIn{from{opacity:0;transform:translateY(6px)}}
.tt-p2-dev__sub{margin-bottom:24px;text-align:center;color:var(--tt-g5);font-size:14px}
.tt-p2-dev__cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tt-p2-dev__col{display:grid;align-content:start;gap:10px;padding:28px;border-radius:18px;background:#fff;color:var(--tt-g4);font-size:15px;line-height:1.55}
.tt-p2-dev__n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tt-ink);color:#fff;font-size:12px;font-weight:500}
.tt-p2-dev__col h3{font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--tt-ink)}
.tt-p2-dev__col strong{font-weight:500;color:var(--tt-ink)}
.tt-p2-dev__col ul{display:grid;gap:6px;padding-left:1.2em;list-style:disc}
.tt-p2-dev__col a{color:var(--tt-ink);text-decoration:underline;text-underline-offset:.2em}
.tt-p2-dev+.tt-p2-why{margin-top:12px}
.tt-p2-why{display:grid;grid-template-columns:1fr 1.4fr;align-items:center;gap:var(--tt-space-2xl);margin-top:var(--tt-grid-gap);padding:36px;border-radius:24px;background:var(--tt-ink);color:#fff}
.tt-p2-why .tt-eyebrow{color:rgb(255 255 255 / .6)}.tt-p2-why h3{margin-top:6px;font-size:26px;font-weight:500;line-height:1.1;letter-spacing:-.03em}
.tt-p2-why ul{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;padding:0;list-style:none;color:rgb(255 255 255 / .82);font-size:15px}
.tt-p2-why li{position:relative;padding-left:26px}.tt-p2-why li::before{content:"✓";position:absolute;left:0;color:#fff}
@media (max-width:860px){
	.tt-p2-how__panel,.tt-p2-why{grid-template-columns:1fr}.tt-p2-how__panel{padding:var(--tt-space-l)}
	.tt-p2-grid,.tt-p2-dev__cols{grid-template-columns:1fr}.tt-p2-dev__panel{padding:20px 8px 12px}.tt-p2-dev__col{padding:22px}.tt-p2-dev__tab{padding:10px 16px}.tt-p2-why ul{grid-template-columns:1fr}
	/* comparison table on phones: the label above, then the two answers side by side */
	.tt-p2-cmp__row--head{display:none}
	.tt-p2-cmp__row{grid-template-columns:1fr 1fr;gap:0 8px;padding:16px 0;border-bottom:1px solid var(--tt-g8)}
	.tt-p2-cmp__row>*{padding:0;border:0}
	.tt-p2-cmp__label{grid-column:1 / -1;margin-bottom:8px}
	.tt-p2-cmp__free,.tt-p2-cmp__tt{grid-column:auto;padding:12px 14px;border-radius:14px;font-size:14px}
	.tt-p2-cmp__free{box-shadow:inset 0 0 0 1px var(--tt-g8)}
	.tt-p2-cmp__tt,.tt-p2-cmp__row:last-child .tt-p2-cmp__tt{padding:12px 14px;border-radius:14px}
	.tt-p2-cmp__free::before,.tt-p2-cmp__row:not(.tt-p2-cmp__row--head) .tt-p2-cmp__tt::before{content:attr(data-h);position:static;display:block;margin-bottom:4px;font-size:11px;font-weight:500;color:var(--tt-g5)}
	/* phone: heading, then the demo, then the steps it walks through */
	.tt-p2-how__panel{gap:var(--tt-space-m)}.tt-p2-how__text{display:contents}.tt-p2-how__phone{order:1}.tt-p2-steps{order:2;margin-top:0}
}

/* ---------- shared demo parts ---------- */
.tt-demo{ --fg:#111; --muted:#6e6e6e; --frame:#1c1c1e; --frame-edge:#3a3a3c; position: relative; padding: 76px 22px 26px; color: var(--fg); }
  .tt-demo .demo__stage{ position: relative; height: 560px; display: grid; place-items: center; }
  .tt-demo .phone{ position: relative; width: 262px; height: 540px; padding: 10px; border-radius: 46px; background: var(--frame); box-shadow: inset 0 0 0 1.5px var(--frame-edge), 0 40px 80px -40px rgba(0,0,0,.45); }
  .tt-demo .screen{ position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; clip-path: inset(0 round 37px); background: #000; isolation: isolate; }
  .tt-demo .island{ position: absolute; z-index: 20; top: 10px; left: 50%; width: 84px; height: 24px; border-radius: 99px; background: #000; transform: translateX(-50%); }
  .tt-demo .layer{ position: absolute; inset: 0; transition: transform .6s cubic-bezier(.2,.9,.2,1), opacity .45s; }
  .tt-demo .layer--up{ transform: translateY(100%); }
  .tt-demo .layer--fade{ opacity: 0; }
  .tt-demo .layer img.full{ width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
  .tt-demo .layer img.top{ position: absolute; top: 0; left: 0; width: 100%; }
  .tt-demo .lock{ background: radial-gradient(120% 80% at 50% 0%, #2b2b2e 0%, #0e0e10 60%); color: #fff; text-align: center; padding-top: 70px; }
  .tt-demo .lock__date{ font-size: 13px; font-weight: 500; opacity: .8; }
  .tt-demo .lock__time{ font-size: 64px; font-weight: 600; letter-spacing: -.03em; line-height: 1; margin-top: 2px; }
  .tt-demo .banner{ position: absolute; z-index: 15; left: 8px; right: 8px; top: 44px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 20px; background: rgba(245,245,247,.94); color: #111; backdrop-filter: blur(20px); transform: translateY(-220%); transition: transform .5s cubic-bezier(.2,.9,.2,1); font-size: 12px; line-height: 1.3; text-align: left; }
  .tt-demo .banner__icon{ flex: none; width: 30px; height: 30px; border-radius: 8px; background: #111 url(img/demo/logo-white.svg) center / 22px no-repeat; }
  .tt-demo .banner__icon--mail{ background: #0a84ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / 18px no-repeat; }
  .tt-demo .banner b{ display: block; font-size: 12.5px; }
  .tt-demo .banner span{ color: #555; }
  .tt-demo .banner small{ display: block; color: #8a8a8e; font-size: 10.5px; margin-left: auto; align-self: start; }
  .tt-demo .sheet{ position: absolute; z-index: 14; left: 0; right: 0; bottom: 0; top: 40px; border-radius: 18px 18px 0 0; background: #f2f2f7; color: #111; transform: translateY(115%); transition: transform .55s cubic-bezier(.2,.9,.2,1); font-size: 13px; }
  .tt-demo .sheet__nav{ display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 6px; font-size: 13px; }
  .tt-demo .sheet__nav a{ color: #6e6e73; }
  .tt-demo .sheet__nav b{ font-weight: 600; }
  .tt-demo .sheet__nav .sheet__done{ font-weight: 600; color: #111; }
  .tt-demo .sheet__head{ text-align: center; padding: 8px 0 14px; }
  .tt-demo .sheet__avatar{ width: 74px; height: 74px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#a3a3a8,#88888d); color: #fff; font-size: 28px; font-weight: 600; }
  .tt-demo .sheet__name{ font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
  .tt-demo .sheet__sub{ color: #6e6e73; font-size: 12px; margin-top: 2px; }
  .tt-demo .sheet__rows{ margin: 0 12px; border-radius: 12px; background: #fff; }
  .tt-demo .sheet__row{ padding: 9px 12px; border-bottom: .5px solid #e3e3e8; }
  .tt-demo .sheet__row:last-child{ border: 0; }
  .tt-demo .sheet__row small{ display: block; color: #6e6e73; font-size: 11px; }
  .tt-demo .sheet__row span{ color: #111; }
  .tt-demo .toast{ position: absolute; z-index: 16; left: 50%; top: 46%; display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-radius: 16px; background: rgba(28,28,30,.92); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; transform: translate(-50%, 10px) scale(.96); opacity: 0; transition: opacity .3s, transform .3s; }
  .tt-demo .toast i{ width: 20px; height: 20px; border-radius: 50%; background: #30d158; display: grid; place-items: center; font-style: normal; font-size: 12px; }
  .tt-demo .tap{ position: absolute; z-index: 30; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1.5px rgba(0,0,0,.25); opacity: 0; transform: scale(.6); pointer-events: none; }
  .tt-demo .tap.on{ animation: tap .55s ease-out; }
  @keyframes tap{ 0% { opacity: 0; transform: scale(.6) } 25% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(1.5) } }
  .tt-demo .ring{ position: absolute; z-index: 25; left: 4%; right: 4%; height: 13%; border-radius: 16px; box-shadow: 0 0 0 2px #30d158, 0 0 0 6px rgba(48,209,88,.25); opacity: 0; transition: opacity .3s; pointer-events: none; }
  .tt-demo .card{ position: absolute; z-index: 40; width: 168px; aspect-ratio: 85.6 / 54; border-radius: 9px; display: grid; place-items: center; background: #141414; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 24px 40px -18px rgba(0,0,0,.6); transform: translate(170px, -230px) rotate(-14deg); opacity: 0; transition: transform .9s cubic-bezier(.2,.9,.2,1), opacity .4s; }
  .tt-demo .card img{ width: 46%; }
  .tt-demo .waves{ position: absolute; z-index: 18; left: 50%; top: 18px; width: 0; height: 0; }
  .tt-demo .waves i{ position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); opacity: 0; }
  .tt-demo .waves.on i{ animation: wave 1.1s ease-out forwards; }
  .tt-demo .waves.on i:nth-child(2){ animation-delay: .18s; }
  .tt-demo .waves.on i:nth-child(3){ animation-delay: .36s; }
  @keyframes wave{ 0% { opacity: .9; transform: scale(.3) } 100% { opacity: 0; transform: scale(1.6) } }
  .tt-demo .steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; padding: 0; }
  .tt-demo .steps li{ list-style: none; padding-top: 10px; border-top: 2px solid rgba(17,17,17,.15); font-size: 13px; line-height: 1.35; color: var(--muted); transition: color .3s, border-color .3s; }
  .tt-demo .steps li b{ display: block; font-size: 12px; font-weight: 500; margin-bottom: 2px; }
  .tt-demo .steps li.on{ color: var(--fg); border-color: var(--fg); }
  .tt-demo.reset *{ transition: none !important; animation: none !important; }

  /* ---------- demo 1: tap → profile → save ---------- */
.tt-demo[data-demo="tap"][data-s="1"] .card, .tt-demo[data-demo="tap"][data-s="2"] .card{ opacity: 1; transform: translate(0, -292px) rotate(0deg); }
  .tt-demo[data-demo="tap"][data-s="3"] .card{ opacity: 0; transform: translate(150px, -320px) rotate(12deg); }
  .tt-demo[data-demo="tap"][data-s="3"] .banner{ transform: translateY(0); }
  .tt-demo[data-demo="tap"]:is([data-s="4"], .tt-demo [data-s="5"], .tt-demo [data-s="6"], .tt-demo [data-s="7"]) .profile{ transform: translateY(0); }
  .tt-demo[data-demo="tap"]:is([data-s="5"], .tt-demo [data-s="6"]) .sheet{ transform: translateY(0); }
  .tt-demo[data-demo="tap"][data-s="7"] .toast{ opacity: 1; transform: translate(-50%, 0) scale(1); }

  /* ---------- demo 2: Névjegycsere ---------- */
.tt-demo[data-demo="swap"] .profile{ transform: none; }
  /* the form sheets end clear of the screen's rounded corners, like above the iPhone home bar */
.tt-demo[data-demo="swap"] :is(.form, .tt-demo .done){ background: #0f0f0f; }
  .tt-demo[data-demo="swap"] :is(.form, .tt-demo .done) img.full{ position: absolute; left: 0; bottom: 24px; width: 100%; height: auto; }
  .tt-demo[data-demo="swap"] .banner{ top: 150px; transform: translateY(-560%); }
  .tt-demo[data-demo="swap"]:is([data-s="1"], .tt-demo [data-s="2"]) .form{ opacity: 1; }
  .tt-demo[data-demo="swap"][data-s="2"] .done{ opacity: 1; }
  .tt-demo[data-demo="swap"]:is([data-s="3"], .tt-demo [data-s="4"], .tt-demo [data-s="5"]) .lock2{ opacity: 1; }
  .tt-demo[data-demo="swap"]:is([data-s="4"], .tt-demo [data-s="5"]) .banner{ transform: translateY(0); }
  .tt-demo[data-demo="swap"][data-s="5"] .list{ opacity: 1; }
  .tt-demo[data-demo="swap"][data-s="5"] .ring{ opacity: 1; transition-delay: .5s; }
  .tt-demo[data-demo="swap"][data-s="5"] .banner{ transform: translateY(-560%); }

  /* ---------- demo 3: where to tap ---------- */
.tt-demo .duo{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; justify-items: center; align-items: start; height: 560px; padding-top: 96px; }
  .tt-demo .mini{ position: relative; display: grid; justify-items: center; gap: 14px; }
  .tt-demo .mini .phone{ width: 150px; height: 310px; padding: 7px; border-radius: 30px; }
  .tt-demo .mini .screen{ border-radius: 24px; clip-path: inset(0 round 24px); }
  .tt-demo .mini .island{ top: 7px; width: 46px; height: 14px; }
  .tt-demo .back{ position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(160deg, #2a2a2d, #151517); }
  .tt-demo .back__cam{ position: absolute; top: 14px; left: 14px; width: 54px; height: 54px; border-radius: 16px; background: #0d0d0f; box-shadow: inset 0 0 0 1px #333; }
  .tt-demo .back__cam::before, .tt-demo .back__cam::after{ content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #222; box-shadow: inset 0 0 0 3px #111; }
  .tt-demo .back__cam::before{ top: 8px; left: 8px; } .tt-demo .back__cam::after{ bottom: 8px; right: 8px; }
  .tt-demo .zone{ position: absolute; left: 50%; width: 116px; height: 78px; margin-left: -58px; border-radius: 14px; border: 2px dashed rgba(48,209,88,.9); background: rgba(48,209,88,.12); opacity: 0; transition: opacity .4s; }
  .tt-demo .zone--top{ top: 6px; }
  .tt-demo .zone--mid{ top: 50%; margin-top: -39px; }
  .tt-demo .mini .card{ left: 50%; width: 96px; margin-left: -48px; border-radius: 6px; }
  .tt-demo .mini--ios .card{ top: -34px; transform: translate(110px, -90px) rotate(-14deg); }
  .tt-demo .mini--android .card{ top: 125px; transform: translate(-130px, 70px) rotate(14deg); }
  .tt-demo .mini__label{ text-align: center; font-size: 13px; line-height: 1.35; max-width: 18ch; color: var(--muted); transition: color .3s; }
  .tt-demo .mini__label b{ display: block; color: var(--fg); font-weight: 600; font-size: 14px; }
  .tt-demo .mini.on .mini__label{ color: var(--fg); }
  .tt-demo .qr{ position: absolute; inset: 0; display: grid; place-items: center; background: #0b0b0b; opacity: 0; transition: opacity .4s; }
  .tt-demo .qr__frame{ position: relative; width: 70%; aspect-ratio: 1; border-radius: 14px; }
  .tt-demo .qr__frame::before{ content: ""; position: absolute; inset: 0; border-radius: 14px; border: 2px solid #ffd60a; clip-path: polygon(0 0, 30% 0, 30% 4%, 4% 4%, 4% 30%, 0 30%, 0 70%, 4% 70%, 4% 96%, 30% 96%, 30% 100%, 70% 100%, 70% 96%, 96% 96%, 96% 70%, 100% 70%, 100% 30%, 96% 30%, 96% 4%, 70% 4%, 70% 0, 100% 0, 100% 100%, 0 100%); }
  .tt-demo .qr__code{ position: absolute; inset: 18%; background: #fff url(img/demo/qr.svg) center / 100% no-repeat; border-radius: 3px; box-shadow: 0 0 0 6px #fff; }
  .tt-demo .qr__pill{ position: absolute; bottom: 16%; left: 50%; transform: translateX(-50%); padding: 6px 10px; border-radius: 99px; background: #ffd60a; color: #111; font-size: 10px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .3s .4s; }
  .tt-demo[data-demo="where"][data-s="1"] .mini--ios .zone, .tt-demo[data-demo="where"][data-s="2"] .mini--android .zone{ opacity: 1; }
  .tt-demo[data-demo="where"][data-s="1"] .mini--ios .card, .tt-demo[data-demo="where"][data-s="2"] .mini--android .card{ opacity: 1; transform: none; }
  .tt-demo[data-demo="where"][data-s="3"] .qr{ opacity: 1; }
  .tt-demo[data-demo="where"][data-s="3"] .qr__pill{ opacity: 1; }
  .tt-demo[data-demo="where"] .waves{ top: auto; }

  /* ---------- demo 4: QR scan (camera → yellow link → profile → save) ---------- */
  .tt-demo .cam{ z-index: 0; background: #d8d4ce; color: #fff; }
  .tt-demo .cam::before, .tt-demo .cam::after{ content: ""; position: absolute; left: 0; right: 0; background: #000; }
  .tt-demo .cam::before{ top: 0; height: 44px; }
  .tt-demo .cam::after{ bottom: 0; height: 112px; }
  .tt-demo .cam__mode, .tt-demo .cam__shutter{ z-index: 1; }
  .tt-demo .cam__mode{ position: absolute; left: 0; right: 0; bottom: 92px; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .08em; color: #ffd60a; }
  .tt-demo .cam__shutter{ position: absolute; left: 50%; bottom: 26px; width: 50px; height: 50px; margin-left: -25px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #000, 0 0 0 6px #fff; }
  .tt-demo .cam__card{ position: absolute; left: 50%; top: 34%; width: 196px; aspect-ratio: 85.6 / 54; margin: -62px 0 0 -98px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-radius: 10px; background: #141414; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 30px -12px rgba(0,0,0,.7); transform: rotate(-6deg) scale(.92); transition: transform .8s cubic-bezier(.2,.9,.2,1); }
  .tt-demo .cam__logo{ width: 64px; opacity: .9; }
  .tt-demo .cam__qr{ position: relative; width: 74px; aspect-ratio: 1; border-radius: 6px; background: #fff; }
  .tt-demo .cam__qr i{ position: absolute; inset: 7px; background: url(img/demo/qr.svg) center / 100% no-repeat; }
  .tt-demo .cam__qr::after{ content: ""; position: absolute; inset: -9px; border: 2px solid #ffd60a; border-radius: 10px; clip-path: polygon(0 0, 30% 0, 30% 5%, 5% 5%, 5% 30%, 0 30%, 0 70%, 5% 70%, 5% 95%, 30% 95%, 30% 100%, 70% 100%, 70% 95%, 95% 95%, 95% 70%, 100% 70%, 100% 30%, 95% 30%, 95% 5%, 70% 5%, 70% 0, 100% 0, 100% 100%, 0 100%); opacity: 0; transform: scale(1.25); transition: opacity .3s, transform .4s cubic-bezier(.2,.9,.2,1); }
  .tt-demo .cam__pill{ position: absolute; left: 50%; top: 58%; padding: 8px 14px; border-radius: 99px; background: #ffd60a; color: #111; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, 8px); transition: opacity .3s, transform .4s cubic-bezier(.2,.9,.2,1); }
  .tt-demo[data-demo="qr"]:not([data-s="0"]) .cam__card{ transform: rotate(0) scale(1); }
  .tt-demo[data-demo="qr"]:not([data-s="0"]) .cam__qr::after{ opacity: 1; transform: none; }
  .tt-demo[data-demo="qr"]:not([data-s="0"]) .cam__pill{ opacity: 1; transform: translate(-50%, 0); }
  .tt-demo[data-demo="qr"]:is([data-s="3"], [data-s="4"], [data-s="5"]) .profile{ transform: translateY(0); }
  .tt-demo[data-demo="qr"][data-s="4"] .sheet{ transform: translateY(0); }
  .tt-demo[data-demo="qr"][data-s="5"] .toast{ opacity: 1; transform: translate(-50%, 0) scale(1); }

  /* ---------- demo 5: editing the profile in the Account (home → contact → social → gallery → profile) ---------- */
  .tt-demo .ed{ transform: translateX(100%); box-shadow: -12px 0 30px -18px rgba(0,0,0,.35); }
  .tt-demo .dash-home{ transition: transform .6s cubic-bezier(.2,.9,.2,1); }
  .tt-demo[data-demo="edit"]:is([data-s="1"], [data-s="2"], [data-s="3"]) .dash-home{ transform: translateX(-25%); }
  .tt-demo[data-demo="edit"][data-s="1"] .ed--contact, .tt-demo[data-demo="edit"][data-s="2"] .ed--social, .tt-demo[data-demo="edit"][data-s="3"] .ed--social, .tt-demo[data-demo="edit"][data-s="3"] .ed--gallery{ transform: translateX(0); }
  .tt-demo[data-demo="edit"][data-s="4"] .profile{ transform: translateY(0); }
  .tt-demo[data-demo="edit"] .layer:not(.profile){ padding-top: 34px; }
  @media (prefers-reduced-motion: reduce){ .tt-demo .layer, .tt-demo .banner, .tt-demo .sheet, .tt-demo .toast, .tt-demo .card{ transition: none } }