/* ==========================================================================
   TapTap — Launch design system
   Kinetic, high-contrast brand layer: acid yellow + ink black.
   Sections: tokens · fonts · base · layout · components · home · pages · motion
   ========================================================================== */

/* ---------- Fonts (self-hosted, swap to avoid invisible text) ---------- */

@font-face { font-family: 'Bangers'; src: url(../fonts/Bangers-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(../fonts/Outfit-Light.ttf) format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(../fonts/Outfit-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(../fonts/Outfit-Medium.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(../fonts/Outfit-SemiBold.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(../fonts/Outfit-Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(../fonts/Outfit-ExtraBold.ttf) format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(../fonts/Outfit-Black.ttf) format('truetype'); font-weight: 900; font-display: swap; }

/* Bangers only covers Latin. For scripts it lacks, the display stack continues with the
   heavy weight of each platform's own font, exposed at weight 400 so every display rule
   stays unchanged. Separate families keep Chinese and Japanese Han glyph forms correct. */
@font-face {
    font-family: 'TT Display JA';
    src: local('Hiragino Sans W7'), local('HiraginoSans-W7'), local('Yu Gothic Bold'), local('YuGothic-Bold'),
         local('Noto Sans CJK JP Bold'), local('NotoSansCJKjp-Bold'), local('Noto Sans JP Bold'), local('NotoSansJP-Bold'), local('Meiryo Bold');
    font-weight: 400;
}
@font-face {
    font-family: 'TT Display ZH';
    src: local('PingFang SC Semibold'), local('PingFangSC-Semibold'), local('Microsoft YaHei Bold'), local('MicrosoftYaHei-Bold'),
         local('Noto Sans CJK SC Bold'), local('NotoSansCJKsc-Bold'), local('Noto Sans SC Bold'), local('NotoSansSC-Bold');
    font-weight: 400;
}
@font-face {
    font-family: 'TT Display HI';
    src: local('Nirmala UI Bold'), local('NirmalaUI-Bold'), local('Kohinoor Devanagari Bold'), local('KohinoorDevanagari-Bold'),
         local('Noto Sans Devanagari Bold'), local('NotoSansDevanagari-Bold');
    font-weight: 400;
}

/* ---------- Tokens ---------- */

:root {
    --tt-yellow: #F0C715;
    --tt-yellow-hi: #FFE14D;
    --tt-yellow-lo: #C9A50A;
    --tt-orange: #FD6D00;
    --tt-ink: #0A0A0A;
    --tt-ink-2: #111111;
    --tt-surface: #161616;
    --tt-surface-2: #1E1E1E;
    --tt-line: rgba(255, 255, 255, .10);
    --tt-line-strong: rgba(255, 255, 255, .18);
    --tt-text: #F5F5F5;
    --tt-muted: #A8A8A8;
    --tt-on-yellow: #0A0A0A;
    --tt-success: #34D399;

    --tt-font-display: 'Bangers', 'Impact', 'Arial Black', sans-serif;
    --tt-font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --tt-radius-sm: 12px;
    --tt-radius: 20px;
    --tt-radius-lg: 32px;
    --tt-radius-pill: 999px;

    --tt-shadow-card: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 50px -20px rgba(0, 0, 0, .8);
    --tt-shadow-glow: 0 0 0 1px rgba(240, 199, 21, .35), 0 18px 60px -12px rgba(240, 199, 21, .45);

    --tt-ease-out: cubic-bezier(.16, 1, .3, 1);
    --tt-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --tt-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --tt-dur-fast: 180ms;
    --tt-dur: 300ms;
    --tt-dur-slow: 900ms;

    --tt-container: 1240px;
    --tt-gutter: clamp(16px, 4vw, 32px);
    --tt-section-y: clamp(80px, 12vw, 160px);
    --tt-header-h: 76px;

    /* z-index scale */
    --tt-z-base: 1;
    --tt-z-raised: 10;
    --tt-z-header: 100;
    --tt-z-drawer: 200;
    --tt-z-loader: 1000;

    color-scheme: dark;
}

/* ---------- Per-script typography ----------
   Latin glyphs keep Bangers; CJK and Devanagari use the heavy fallbacks above and need
   more line height (taller glyphs, marks above/below the line). Cyrillic falls back to
   Impact, whose capitals are taller than Bangers'. */

:lang(ja) { --tt-font-display: 'Bangers', 'TT Display JA', sans-serif; word-break: auto-phrase; }
:lang(zh) { --tt-font-display: 'Bangers', 'TT Display ZH', sans-serif; }
:lang(hi) { --tt-font-display: 'Bangers', 'TT Display HI', sans-serif; }

:is(:lang(ja), :lang(zh), :lang(hi)) .tt-hero__title { font-size: clamp(3rem, 6.4vw, 5.5rem); line-height: 1.12; letter-spacing: 0; }
:lang(hi) .tt-hero__title { line-height: 1.3; }
:is(:lang(ja), :lang(zh), :lang(hi)) :is(.tt-display, .tt-chapter h3, .tt-footer h2) { line-height: 1.2; letter-spacing: 0; }
:lang(ru) .tt-hero__title { line-height: 1; }
:is(:lang(ja), :lang(zh)) :is(.tt-page h1, .tt-display) { text-wrap: balance; }
/* Han characters are about twice as wide as Bangers capitals: keep big headlines to ~6 per line. */
:is(:lang(ja), :lang(zh)) :is(.tt-page .banner .yellow_heading > h1, .tt-page .banner_content > h1) { font-size: clamp(2.5rem, 5vw, 4.25rem); }
/* The wallet title is three short phrases; break only between them (U+200B marks the points in i18n). */
:is(:lang(ja), :lang(zh)) .tt-page--wallet .banner .yellow_heading > h1 { word-break: keep-all; }
:lang(ru) :is(.tt-display, .tt-chapter h3) { line-height: 1.02; }

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--tt-header-h) + 16px);
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--tt-font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--tt-text);
    background: var(--tt-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

body.tt-lock { overflow: hidden; }

img, svg, video { max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 3px solid var(--tt-yellow);
    outline-offset: 3px;
    border-radius: 6px;
}

::selection { background: var(--tt-yellow); color: var(--tt-ink); }

/* Sprite icons: <svg class="i"><use href="#i-name"/></svg> */
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i--fill { fill: currentColor; stroke: none; }

.tt-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.tt-skip {
    position: fixed;
    top: 12px; left: 12px;
    z-index: calc(var(--tt-z-loader) + 1);
    padding: 12px 20px;
    background: var(--tt-yellow);
    color: var(--tt-ink);
    font-weight: 700;
    border-radius: var(--tt-radius-pill);
    transform: translateY(-200%);
    transition: transform var(--tt-dur) var(--tt-ease-out);
}
.tt-skip:focus { transform: translateY(0); }

/* ---------- Layout ---------- */

.tt-container {
    width: 100%;
    max-width: var(--tt-container);
    margin-inline: auto;
    padding-inline: var(--tt-gutter);
}

.tt-section { position: relative; padding-block: var(--tt-section-y); }

.tt-section--yellow { background: var(--tt-yellow); color: var(--tt-on-yellow); }

.tt-section__head { max-width: 760px; margin: 0 auto clamp(48px, 7vw, 80px); text-align: center; }
.tt-section__head--left { margin-inline: 0; text-align: left; }

/* ---------- Typography ---------- */

.tt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tt-yellow);
}
.tt-eyebrow::before {
    content: "";
    width: 28px; height: 2px;
    background: currentColor;
}
.tt-section--yellow .tt-eyebrow { color: var(--tt-ink); }

.tt-display {
    margin: 0 0 20px;
    font-family: var(--tt-font-display);
    font-weight: 400;
    font-size: clamp(2.75rem, 7vw, 5.5rem);
    line-height: .92;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.tt-display em { font-style: normal; color: var(--tt-yellow); }
.tt-section--yellow .tt-display em { color: var(--tt-ink); -webkit-text-stroke: 0; background: var(--tt-ink); color: var(--tt-yellow); padding: 0 .12em; }

.tt-lead {
    margin: 0;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.65;
    color: var(--tt-muted);
}
.tt-section--yellow .tt-lead { color: rgba(10, 10, 10, .78); }

.tt-text-yellow { color: var(--tt-yellow); }

/* ---------- Buttons ---------- */

.tt-btn {
    --_bg: var(--tt-surface-2);
    --_fg: var(--tt-text);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 28px;
    border: 0;
    border-radius: var(--tt-radius-pill);
    background: var(--_bg);
    color: var(--_fg);
    font: 700 1rem/1 var(--tt-font-body);
    letter-spacing: .01em;
    cursor: pointer;
    isolation: isolate;
    overflow: hidden;
    touch-action: manipulation;
    transition: transform var(--tt-dur) var(--tt-ease-out), translate 400ms var(--tt-ease-out), box-shadow var(--tt-dur) var(--tt-ease-out), background-color var(--tt-dur-fast);
}
.tt-btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--tt-dur) var(--tt-ease-out); }
.tt-btn:hover svg { transform: translateX(3px); }
.tt-btn:active { transform: scale(.97); }

.tt-btn--primary { --_bg: var(--tt-yellow); --_fg: var(--tt-ink); box-shadow: 0 10px 30px -10px rgba(240, 199, 21, .6); }
.tt-btn--primary:hover { box-shadow: var(--tt-shadow-glow); }
.tt-btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 700ms var(--tt-ease-out);
}
.tt-btn--primary:hover::after { transform: translateX(120%); }

.tt-btn--ghost { --_bg: transparent; box-shadow: inset 0 0 0 1.5px var(--tt-line-strong); }
.tt-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--tt-yellow); color: var(--tt-yellow); }

.tt-btn--dark { --_bg: var(--tt-ink); --_fg: var(--tt-yellow); }
.tt-btn--dark:hover { box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .7); }

.tt-btn--sm { min-height: 44px; padding: 10px 20px; font-size: .9375rem; white-space: nowrap; }

/* Official store badges wrapped as magnetic buttons */
.tt-stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tt-store {
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 4px;
    border-radius: 14px;
    background: #000;
    box-shadow: inset 0 0 0 1px var(--tt-line-strong);
    transition: transform var(--tt-dur) var(--tt-ease-out), translate 400ms var(--tt-ease-out), box-shadow var(--tt-dur) var(--tt-ease-out);
}
.tt-store img { display: block; height: 100%; width: auto; }
.tt-store:hover { box-shadow: inset 0 0 0 1px var(--tt-yellow), 0 14px 40px -12px rgba(240, 199, 21, .5); }
.tt-section--yellow .tt-store { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); }

/* ---------- Badge / chips ---------- */

.tt-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 10px;
    border-radius: var(--tt-radius-pill);
    background: rgba(240, 199, 21, .1);
    box-shadow: inset 0 0 0 1px rgba(240, 199, 21, .35);
    color: var(--tt-yellow-hi);
    font-size: .875rem;
    font-weight: 600;
    transition: background-color var(--tt-dur), transform var(--tt-dur) var(--tt-ease-out);
}
.tt-badge:hover { background: rgba(240, 199, 21, .18); }
.tt-badge__tag {
    padding: 3px 10px;
    border-radius: var(--tt-radius-pill);
    background: var(--tt-yellow);
    color: var(--tt-ink);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tt-badge svg { width: 16px; height: 16px; }

.tt-dot-live {
    position: relative;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--tt-success);
}
.tt-dot-live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: tt-ping 1.8s var(--tt-ease-out) infinite;
}

/* ---------- Loader ---------- */

.tt-loader {
    position: fixed;
    inset: 0;
    z-index: var(--tt-z-loader);
    display: none;
    place-items: center;
    background: var(--tt-ink);
    transition: opacity 500ms var(--tt-ease-out), visibility 500ms;
}
.tt-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.tt-loader__mark { position: relative; display: grid; place-items: center; width: 96px; height: 106px; animation: tt-loader-pop 900ms var(--tt-ease-spring) both; }
.tt-loader__mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tt-loader__mark .hex { fill: none; stroke: var(--tt-yellow); stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: tt-draw 900ms var(--tt-ease-out) forwards; }
.tt-loader__mark img { position: relative; width: 44px; height: auto; opacity: 0; transform: scale(.6); animation: tt-loader-logo 500ms 450ms var(--tt-ease-spring) forwards; }
.tt-js .tt-loader { display: grid; }
.tt-js.tt-no-loader .tt-loader { display: none; }

/* ---------- Scroll progress ---------- */

.tt-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: calc(var(--tt-z-header) + 1);
    height: 3px;
    pointer-events: none;
}
.tt-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--tt-yellow), var(--tt-orange));
    transform-origin: 0 50%;
    transform: scaleX(var(--tt-progress, 0));
}

/* ---------- Header ---------- */

.tt-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--tt-z-header);
    height: var(--tt-header-h);
    transition: transform 400ms var(--tt-ease-out), background-color var(--tt-dur), box-shadow var(--tt-dur), backdrop-filter var(--tt-dur);
}
.tt-header.is-scrolled {
    background: rgba(10, 10, 10, .72);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 1px 0 var(--tt-line);
}
.tt-header.is-hidden { transform: translateY(-100%); }

.tt-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 100%;
}

.tt-logo { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.tt-logo img { width: 40px; height: 48px; object-fit: contain; transition: transform 500ms var(--tt-ease-spring); }
.tt-logo:hover img { transform: rotate(-10deg) scale(1.08); }
.tt-logo span { font-family: var(--tt-font-display); font-size: 1.75rem; letter-spacing: .04em; line-height: 1; }

.tt-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tt-nav a {
    position: relative;
    display: block;
    padding: 10px 14px;
    border-radius: var(--tt-radius-pill);
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
    color: rgba(245, 245, 245, .82);
    transition: color var(--tt-dur-fast), background-color var(--tt-dur-fast);
}
.tt-nav a:hover { color: var(--tt-text); background: rgba(255, 255, 255, .06); }
.tt-nav a[aria-current="page"] { color: var(--tt-yellow); }
.tt-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 4px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--tt-yellow);
    transform: translateX(-50%);
}

.tt-header__actions { display: flex; align-items: center; gap: 12px; }

.tt-lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border-radius: var(--tt-radius-pill);
    box-shadow: inset 0 0 0 1px var(--tt-line-strong);
    color: var(--tt-text);
    cursor: pointer;
    transition: box-shadow var(--tt-dur-fast);
}
.tt-lang:hover, .tt-lang:focus-within { box-shadow: inset 0 0 0 1px var(--tt-yellow); }
.tt-lang svg { width: 18px; height: 18px; flex: none; }
.tt-lang select {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: 500 .9375rem var(--tt-font-body);
    padding-right: 4px;
    cursor: pointer;
}
.tt-lang select:focus { outline: none; }
.tt-lang option { background: var(--tt-surface); color: var(--tt-text); }

.tt-burger {
    display: none;
    position: relative;
    width: 48px; height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--tt-yellow);
    cursor: pointer;
    touch-action: manipulation;
}
.tt-burger span {
    position: absolute;
    left: 14px; right: 14px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--tt-ink);
    transition: transform 400ms var(--tt-ease-out), top 400ms var(--tt-ease-out);
}
.tt-burger span:nth-child(1) { top: 19px; }
.tt-burger span:nth-child(2) { top: 27px; }
.tt-burger[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.tt-burger[aria-expanded="true"] span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

/* Mobile drawer */
.tt-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--tt-z-drawer);
    display: flex;
    flex-direction: column;
    padding: calc(var(--tt-header-h) + 24px) var(--tt-gutter) 32px;
    background: var(--tt-yellow);
    color: var(--tt-ink);
    clip-path: circle(0 at calc(100% - 44px) 38px);
    visibility: hidden;
    transition: clip-path 700ms var(--tt-ease-in-out), visibility 0s 700ms;
    overflow-y: auto;
}
.tt-drawer.is-open { clip-path: circle(150% at calc(100% - 44px) 38px); visibility: visible; transition: clip-path 700ms var(--tt-ease-in-out), visibility 0s; }
.tt-drawer__close {
    position: absolute;
    top: 14px; right: var(--tt-gutter);
    width: 48px; height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--tt-ink);
    color: var(--tt-yellow);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.tt-drawer__close svg { width: 22px; height: 22px; }
.tt-drawer nav ul { margin: 0; padding: 0; list-style: none; }
.tt-drawer nav a {
    display: block;
    padding: 6px 0;
    font-family: var(--tt-font-display);
    font-size: clamp(2.5rem, 11vw, 4rem);
    line-height: 1.05;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 500ms var(--tt-ease-out), transform 600ms var(--tt-ease-out);
}
.tt-drawer nav a[aria-current="page"] { -webkit-text-stroke: 2px var(--tt-ink); color: transparent; }
.tt-drawer.is-open nav a { opacity: 1; transform: none; }
.tt-drawer.is-open nav li:nth-child(1) a { transition-delay: 150ms; }
.tt-drawer.is-open nav li:nth-child(2) a { transition-delay: 200ms; }
.tt-drawer.is-open nav li:nth-child(3) a { transition-delay: 250ms; }
.tt-drawer.is-open nav li:nth-child(4) a { transition-delay: 300ms; }
.tt-drawer.is-open nav li:nth-child(5) a { transition-delay: 350ms; }
.tt-drawer.is-open nav li:nth-child(6) a { transition-delay: 400ms; }
.tt-drawer__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 20px; }
.tt-drawer .tt-lang { color: var(--tt-ink); box-shadow: inset 0 0 0 1.5px var(--tt-ink); width: fit-content; }
.tt-drawer .tt-lang option { color: var(--tt-text); }
.tt-drawer .tt-social a { background: var(--tt-ink); }

/* ---------- Social icons ---------- */

.tt-social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tt-social a {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--tt-surface-2);
    transition: background-color var(--tt-dur-fast), transform var(--tt-dur) var(--tt-ease-spring);
}
.tt-social a:hover { background: var(--tt-yellow); transform: translateY(-3px) rotate(-6deg); }
.tt-social a:hover img { filter: brightness(0); }
.tt-social img { width: 18px; height: 18px; object-fit: contain; }

/* ---------- Background FX ---------- */

.tt-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.tt-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .5;
    will-change: transform;
}
.tt-blob--a { width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; background: radial-gradient(circle, rgba(240, 199, 21, .55), transparent 65%); top: -12%; right: -10%; animation: tt-float-a 18s ease-in-out infinite; }
.tt-blob--b { width: 38vw; height: 38vw; max-width: 600px; max-height: 600px; background: radial-gradient(circle, rgba(253, 109, 0, .4), transparent 65%); bottom: -18%; left: -12%; animation: tt-float-b 22s ease-in-out infinite; }
.tt-gridlines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}
.tt-noise {
    position: absolute;
    inset: -50%;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: tt-grain 1.2s steps(6) infinite;
}

/* ==========================================================================
   HOME
   ========================================================================== */

/* ---------- Hero ---------- */

.tt-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: calc(var(--tt-header-h) + 32px) 0 72px;
    overflow: hidden;
}
.tt-hero__inner {
    position: relative;
    z-index: var(--tt-z-base);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
}

.tt-hero__title {
    margin: 26px 0 24px;
    max-width: 100%; /* never wider than the copy column; initHeroFit() scales long words down */
    font-family: var(--tt-font-display);
    font-weight: 400;
    font-size: clamp(4.25rem, 9.5vw, 8.25rem);
    line-height: .86;
    text-transform: uppercase;
    letter-spacing: .005em;
}
.tt-hero__title .tt-line { display: block; overflow: hidden; padding: 0 .1em .04em 0; }
.tt-hero__title .tt-line > span { display: inline-block; }

.tt-rotator {
    position: relative;
    display: inline-grid;
    vertical-align: bottom;
    color: var(--tt-yellow);
}
.tt-rotator > span {
    grid-area: 1 / 1;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(70%) rotate(4deg);
    transition: opacity 500ms var(--tt-ease-out), transform 700ms var(--tt-ease-out);
}
.tt-rotator > span.is-active { opacity: 1; transform: none; }
.tt-rotator > span.is-leaving { opacity: 0; transform: translateY(-70%) rotate(-4deg); }

.tt-hero__lead { max-width: 540px; margin-bottom: 36px; }

.tt-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }

.tt-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    color: var(--tt-muted);
    font-size: .9375rem;
}
.tt-hero__proof li { display: inline-flex; align-items: center; gap: 8px; }
.tt-hero__proof svg { width: 18px; height: 18px; color: var(--tt-yellow); }

/* Hero visual */
.tt-hero__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 620px;
    justify-self: center;
}
.tt-hex-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.tt-hex {
    position: absolute;
    width: 78%;
    aspect-ratio: 1 / 1.1;
    background: var(--tt-yellow);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    box-shadow: 0 0 120px rgba(240, 199, 21, .4);
}
.tt-hex-ring {
    position: absolute;
    width: 96%;
    aspect-ratio: 1 / 1;
    animation: tt-spin 40s linear infinite;
}
.tt-hex-ring--2 { width: 112%; animation-duration: 60s; animation-direction: reverse; opacity: .5; }
.tt-hero__person {
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 112%;
    max-width: none;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    animation: tt-person-float 7s ease-in-out infinite;
}

.tt-float {
    position: absolute;
    z-index: 2;
    will-change: transform;
}
.tt-float__inner { animation: tt-bob 6s ease-in-out infinite; }
.tt-float:nth-of-type(2n) .tt-float__inner { animation-duration: 7.5s; animation-delay: -2s; }
.tt-float:nth-of-type(3n) .tt-float__inner { animation-duration: 8.5s; animation-delay: -4s; }

.tt-bubble {
    position: relative;
    padding: 10px 16px;
    border-radius: 18px 18px 18px 4px;
    background: #fff;
    color: var(--tt-ink);
    font-weight: 700;
    font-size: 1.0625rem;
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55);
    white-space: nowrap;
}
.tt-bubble small { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6E56CF; }
.tt-bubble--dark { background: var(--tt-ink); color: var(--tt-text); border-radius: 18px 18px 4px 18px; box-shadow: inset 0 0 0 1px var(--tt-line-strong), 0 16px 40px -12px rgba(0, 0, 0, .7); }
.tt-bubble--dark small { color: var(--tt-yellow); }

.tt-glass-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(17, 17, 17, .78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px var(--tt-line-strong), 0 20px 50px -16px rgba(0, 0, 0, .8);
    color: var(--tt-text);
    font-size: .875rem;
    line-height: 1.3;
    white-space: nowrap;
}
.tt-glass-card strong { display: block; font-size: .9375rem; }
.tt-glass-card span { color: var(--tt-muted); }
.tt-glass-card__icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--tt-yellow);
    color: var(--tt-ink);
    flex: none;
}
.tt-glass-card__icon svg { width: 20px; height: 20px; }
.tt-glass-card__icon--green { background: rgba(52, 211, 153, .15); color: var(--tt-success); }

.tt-coin {
    width: 58px; height: 58px;
    border-radius: 50%;
    padding: 8px;
    background: #fff;
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6);
}
.tt-coin img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tt-coin--dark { background: #1c1c1c; }

.tt-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: var(--tt-z-base);
    display: grid;
    justify-items: center;
    gap: 8px;
    transform: translateX(-50%);
    color: var(--tt-muted);
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.tt-scroll-cue i {
    width: 24px; height: 38px;
    border-radius: 14px;
    box-shadow: inset 0 0 0 2px var(--tt-line-strong);
    position: relative;
}
.tt-scroll-cue i::after {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    width: 4px; height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--tt-yellow);
    animation: tt-scroll-dot 1.8s var(--tt-ease-in-out) infinite;
}

/* ---------- Marquee ---------- */

.tt-marquee-wrap { overflow: hidden; padding-block: 28px; margin-block: -28px; position: relative; z-index: 2; }

.tt-marquee-band {
    position: relative;
    z-index: 2;
    padding: 6px 0;
    background: var(--tt-yellow);
    color: var(--tt-ink);
    transform: rotate(-2deg) scale(1.04);
    box-shadow: 0 30px 60px -30px rgba(240, 199, 21, .6);
}
.tt-marquee-band--dark { background: var(--tt-ink); color: var(--tt-yellow); transform: rotate(1.5deg) scale(1.04); margin-top: -18px; box-shadow: inset 0 1px 0 var(--tt-line), inset 0 -1px 0 var(--tt-line); }
.tt-marquee {
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tt-marquee__track {
    display: flex;
    flex: none;
    align-items: center;
    gap: 36px;
    padding-right: 36px;
    min-width: 100%;
    animation: tt-marquee 38s linear infinite;
}
.tt-marquee--reverse .tt-marquee__track { animation-direction: reverse; animation-duration: 46s; }
.tt-marquee:hover .tt-marquee__track { animation-play-state: paused; }
.tt-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 36px;
    font-family: var(--tt-font-display);
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}
.tt-marquee__item svg { width: .7em; height: .7em; flex: none; }

/* ---------- Stats ---------- */

.tt-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: var(--tt-radius-lg);
    background: var(--tt-line);
    gap: 1px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--tt-line);
}
.tt-stat { padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px); background: var(--tt-ink-2); }
.tt-stat__value {
    display: block;
    font-family: var(--tt-font-display);
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1;
    color: var(--tt-yellow);
    font-variant-numeric: tabular-nums;
}
.tt-stat__label { display: block; margin-top: 10px; color: var(--tt-muted); font-size: .9375rem; }

/* ---------- Bento features ---------- */

.tt-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(260px, auto);
    gap: 16px;
}
.tt-card {
    --mx: 50%;
    --my: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: var(--tt-radius);
    background: var(--tt-surface);
    box-shadow: var(--tt-shadow-card), inset 0 0 0 1px var(--tt-line);
    overflow: hidden;
    isolation: isolate;
    transition: transform 500ms var(--tt-ease-out), box-shadow var(--tt-dur);
}
.tt-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(240, 199, 21, .14), transparent 45%);
    opacity: 0;
    transition: opacity var(--tt-dur);
}
.tt-card:hover::before { opacity: 1; }
.tt-card:hover { box-shadow: var(--tt-shadow-card), inset 0 0 0 1px rgba(240, 199, 21, .35); }
.tt-card h3 { margin: 0 0 8px; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.tt-card p { margin: 0; color: var(--tt-muted); font-size: 1rem; line-height: 1.6; }
.tt-card__icon {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: rgba(240, 199, 21, .12);
    color: var(--tt-yellow);
}
.tt-card__icon svg { width: 24px; height: 24px; }
.tt-card__demo { margin-top: auto; padding-top: 24px; }

.tt-card--w2 { grid-column: span 2; }
.tt-card--h2 { grid-row: span 2; }
.tt-card--yellow { background: var(--tt-yellow); color: var(--tt-ink); }
.tt-card--yellow p { color: rgba(10, 10, 10, .75); }
.tt-card--yellow .tt-card__icon { background: var(--tt-ink); color: var(--tt-yellow); }
.tt-card--yellow::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .4), transparent 45%); }

/* Cipher demo */
.tt-cipher {
    display: grid;
    gap: 12px;
    padding: 20px;
    border-radius: 16px;
    background: var(--tt-ink);
    box-shadow: inset 0 0 0 1px var(--tt-line);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .9375rem;
}
.tt-cipher__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tt-cipher__label { flex: none; width: 74px; font-family: var(--tt-font-body); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tt-muted); }
.tt-cipher__out { overflow: hidden; white-space: nowrap; text-overflow: clip; color: var(--tt-yellow); }
.tt-cipher__out--plain { color: var(--tt-text); }
.tt-cipher__lock { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; width: fit-content; border-radius: var(--tt-radius-pill); background: rgba(52, 211, 153, .12); color: var(--tt-success); font-family: var(--tt-font-body); font-size: .8125rem; font-weight: 600; }
.tt-cipher__lock svg { width: 14px; height: 14px; }

/* Translate demo (mini) */
.tt-mini-translate { position: relative; height: 92px; }
.tt-mini-translate .tt-bubble { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(16px) scale(.96); transition: opacity 400ms var(--tt-ease-out), transform 600ms var(--tt-ease-out); }
.tt-mini-translate .tt-bubble.is-active { opacity: 1; transform: none; }

/* Wave bars (calls) */
.tt-wave { display: flex; align-items: center; gap: 5px; height: 56px; }
.tt-wave i { flex: 1; max-width: 7px; height: 100%; border-radius: 4px; background: var(--tt-yellow); transform-origin: 50% 50%; animation: tt-wave 1.1s ease-in-out infinite; }
.tt-wave i:nth-child(2n) { animation-delay: -.3s; }
.tt-wave i:nth-child(3n) { animation-delay: -.6s; }
.tt-wave i:nth-child(5n) { animation-delay: -.85s; }
/* Static waveform shape, visible when motion is reduced */
.tt-wave i { transform: scaleY(.45); }
.tt-wave i:nth-child(3n) { transform: scaleY(.8); }
.tt-wave i:nth-child(4n+1) { transform: scaleY(.3); }
.tt-wave i:nth-child(5n) { transform: scaleY(1); }
.tt-card--yellow .tt-wave i { background: var(--tt-ink); }

/* Avatar stack (groups) */
.tt-avatars { display: flex; align-items: center; }
.tt-avatars span {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-left: -12px;
    border-radius: 50%;
    border: 3px solid var(--tt-surface);
    background: var(--tt-surface-2);
    font-weight: 700;
    font-size: .875rem;
}
.tt-avatars span:first-child { margin-left: 0; }
.tt-avatars span:nth-child(1) { background: #F0C715; color: var(--tt-ink); }
.tt-avatars span:nth-child(2) { background: #FD6D00; color: var(--tt-ink); }
.tt-avatars span:nth-child(3) { background: #F5F5F5; color: var(--tt-ink); }
.tt-avatars span:nth-child(4) { background: #3A3A3A; }
.tt-avatars span:last-child { background: var(--tt-ink); color: var(--tt-yellow); width: auto; padding: 0 12px; border-radius: var(--tt-radius-pill); }

/* Node network */
.tt-nodes { width: 100%; height: 110px; }
.tt-nodes line { stroke: rgba(240, 199, 21, .35); stroke-width: 1.5; stroke-dasharray: 4 6; animation: tt-dash 2.5s linear infinite; }
.tt-nodes circle { fill: var(--tt-yellow); }
.tt-nodes circle.pulse { fill: none; stroke: var(--tt-yellow); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: tt-node-pulse 2.4s var(--tt-ease-out) infinite; }

/* Vanishing message */
.tt-vanish { display: grid; gap: 10px; }
.tt-vanish .tt-bubble { width: fit-content; font-weight: 500; font-size: .9375rem; }
.tt-vanish .tt-bubble--gone { animation: tt-vanish 4s var(--tt-ease-in-out) infinite; }

/* Wallet mini balance */
.tt-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 16px;
    background: linear-gradient(120deg, #2a1300, #FD6D00 140%);
    box-shadow: inset 0 0 0 1px rgba(253, 109, 0, .4);
}
.tt-balance small { display: block; color: rgba(255, 255, 255, .7); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.tt-balance strong { font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.tt-coin-row { display: flex; }
.tt-coin-row .tt-coin { width: 38px; height: 38px; padding: 5px; margin-left: -8px; box-shadow: 0 0 0 3px var(--tt-surface); }

/* ---------- Sticky story ---------- */

.tt-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.tt-story__visual {
    position: sticky;
    top: calc(var(--tt-header-h) + 40px);
    aspect-ratio: 1 / 1;
    border-radius: var(--tt-radius-lg);
    background: radial-gradient(circle at 50% 40%, rgba(240, 199, 21, .18), transparent 60%), var(--tt-ink-2);
    box-shadow: inset 0 0 0 1px var(--tt-line);
    overflow: hidden;
    container-type: inline-size;
}
.tt-story__visual > img {
    position: absolute;
    inset: 8%;
    width: 84%;
    height: 84%;
    object-fit: contain;
    opacity: 0;
    transform: scale(.92) translateY(24px);
    transition: opacity 700ms var(--tt-ease-out), transform 900ms var(--tt-ease-out);
}
.tt-story__visual > .tt-device {
    position: absolute;
    inset: 7% 0 auto;
    margin-inline: auto;
    --tt-device-w: 39cqi;
    opacity: 0;
    transform: scale(.92) translateY(24px);
    transition: opacity 700ms var(--tt-ease-out), transform 900ms var(--tt-ease-out);
}
.tt-story__visual > img.is-active, .tt-story__visual > .tt-device.is-active { opacity: 1; transform: none; }
.tt-story__count {
    position: absolute;
    left: 24px; bottom: 20px;
    font-family: var(--tt-font-display);
    font-size: 1.25rem;
    color: var(--tt-muted);
}
.tt-story__count b { color: var(--tt-yellow); font-weight: 400; font-size: 2rem; }
.tt-story__bar { position: absolute; left: 24px; right: 24px; top: 24px; display: flex; gap: 6px; }
.tt-story__bar i { flex: 1; height: 3px; border-radius: 2px; background: var(--tt-line-strong); overflow: hidden; }
.tt-story__bar i::after { content: ""; display: block; height: 100%; background: var(--tt-yellow); transform: scaleX(0); transform-origin: 0 50%; transition: transform 600ms var(--tt-ease-out); }
.tt-story__bar i.is-done::after { transform: scaleX(1); }

.tt-chapter { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding-block: 40px; opacity: .35; transition: opacity 500ms var(--tt-ease-out); }
.tt-chapter.is-active { opacity: 1; }
.tt-chapter__num { font-family: var(--tt-font-display); font-size: 1.25rem; color: var(--tt-yellow); letter-spacing: .06em; }
.tt-chapter h3 { margin: 8px 0 18px; font-family: var(--tt-font-display); font-weight: 400; font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: .95; text-transform: uppercase; }
.tt-chapter__img { display: none; }
.tt-checklist { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.tt-checklist li { display: flex; gap: 12px; align-items: flex-start; }
.tt-checklist svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--tt-yellow); }
.tt-section--yellow .tt-checklist svg { color: var(--tt-ink); }
.tt-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    font-weight: 700;
    color: var(--tt-yellow);
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
    padding-bottom: 4px;
    transition: background-size 400ms var(--tt-ease-out);
}
.tt-link-arrow:hover { background-size: 100% 2px; }
.tt-link-arrow svg { width: 18px; height: 18px; transition: transform var(--tt-dur) var(--tt-ease-out); }
.tt-link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Live translation demo ---------- */

.tt-translate { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.tt-langs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.tt-chip {
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--tt-radius-pill);
    background: rgba(10, 10, 10, .08);
    color: var(--tt-ink);
    font: 600 .9375rem var(--tt-font-body);
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--tt-dur-fast), color var(--tt-dur-fast), transform var(--tt-dur) var(--tt-ease-spring);
}
.tt-chip:hover { background: rgba(10, 10, 10, .16); }
.tt-chip:active { transform: scale(.95); }
.tt-chip[aria-pressed="true"] { background: var(--tt-ink); color: var(--tt-yellow); }

.tt-phone {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    padding: 14px;
    border-radius: 48px;
    background: #050505;
    box-shadow: 0 0 0 2px #2b2b2b, 0 50px 100px -30px rgba(0, 0, 0, .7), 0 30px 60px -30px rgba(0, 0, 0, .5);
    transform: rotate(2deg);
    color: var(--tt-text);
}
.tt-phone__screen {
    position: relative;
    border-radius: 36px;
    overflow: hidden;
    background: #121212;
    background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 18px 18px;
}
.tt-phone__top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 34px 20px 16px;
    background: #0b0b0b;
    box-shadow: 0 1px 0 var(--tt-line);
}
.tt-phone__top::before {
    content: "";
    position: absolute;
    top: 10px; left: 50%;
    width: 96px; height: 24px;
    margin-left: -48px;
    border-radius: 14px;
    background: #000;
}
.tt-phone__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--tt-yellow); color: var(--tt-ink); display: grid; place-items: center; font-weight: 800; }
.tt-phone__name { font-weight: 700; line-height: 1.2; }
.tt-phone__name span { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 500; color: var(--tt-success); }
.tt-phone__body { display: grid; gap: 14px; padding: 22px 16px 26px; min-height: 360px; align-content: start; }
.tt-msg { max-width: 84%; }
.tt-msg--me { justify-self: end; }
.tt-msg__bubble {
    padding: 12px 16px;
    border-radius: 18px 18px 18px 6px;
    background: #222;
    color: var(--tt-text);
    font-size: 1rem;
    line-height: 1.45;
}
.tt-msg--me .tt-msg__bubble { background: var(--tt-orange); color: #140700; border-radius: 18px 18px 6px 18px; font-weight: 500; }
.tt-msg__text { display: block; transition: opacity 250ms var(--tt-ease-out), filter 250ms var(--tt-ease-out), transform 300ms var(--tt-ease-out); }
.tt-msg__text.is-swapping { opacity: 0; filter: blur(6px); transform: translateY(4px); }
.tt-msg__meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-inline: 4px; color: var(--tt-muted); font-size: .75rem; }
.tt-msg--me .tt-msg__meta { justify-content: flex-end; }
.tt-msg__meta svg { width: 12px; height: 12px; color: #9F8CFF; }
.tt-msg__meta b { color: #B9A9FF; font-weight: 600; }
.tt-typing { display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: #222; width: fit-content; }
.tt-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--tt-muted); animation: tt-typing 1.2s ease-in-out infinite; }
.tt-typing i:nth-child(2) { animation-delay: .15s; }
.tt-typing i:nth-child(3) { animation-delay: .3s; }

/* ---------- Wallet orbit ---------- */

.tt-wallet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.tt-orbit { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 560px; justify-self: center; container-type: inline-size; }
.tt-orbit__ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--tt-line-strong); }
.tt-orbit__ring--inner { inset: 16%; box-shadow: inset 0 0 0 1px var(--tt-line); }
.tt-orbit__spin { position: absolute; inset: 0; animation: tt-spin 30s linear infinite; }
.tt-orbit__spin .tt-coin {
    position: absolute;
    top: 50%; left: 50%;
    margin: -29px 0 0 -29px;
    transform: rotate(var(--a)) translateX(46cqw) rotate(calc(var(--a) * -1));
}
.tt-orbit__spin .tt-coin img { animation: tt-spin 30s linear infinite reverse; }
/* Above the coin ring so coins pass behind the screen instead of covering it */
.tt-orbit__phone { position: absolute; inset: 4% 0; z-index: 2; display: grid; place-items: center; }
.tt-orbit__phone .tt-device { --tt-device-w: 41cqi; }

/* ---------- Real app screens in a CSS device frame ----------
   Screens come from tools/build_app_media.py (1320x2868 source ratio). The real
   iOS status bar is painted out there; a clean one is drawn here. Inside the
   device, 1cqi = 1% of the device width; the screen is 93.2cqi wide, so the
   status bar (165/2868 of the source) is 11.65cqi tall. */

.tt-device {
    --tt-device-w: 280px;
    position: relative;
    width: min(100%, var(--tt-device-w));
    border-radius: 15% / 7.2%;
    background: linear-gradient(145deg, #2a2a2a, #0a0a0a 38%, #050505);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .14) inset,
        0 0 0 2px #1d1d1d,
        0 50px 100px -30px rgba(0, 0, 0, .75),
        0 30px 60px -30px rgba(0, 0, 0, .5);
    container-type: inline-size;
}
.tt-device__screen {
    position: relative;
    margin: 3.4cqi;
    aspect-ratio: 1320 / 2868;
    border-radius: 11.6cqi;
    overflow: hidden;
    background: var(--tt-ink-2);
}
.tt-device__screen img, .tt-device__screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Clean status bar: clock left, signal / Wi-Fi / battery right */
.tt-device__screen::before {
    content: "9:41";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 11.65cqi;
    padding-left: 9.3cqi;
    text-align: left;
    font: 600 3.65cqi/11.65cqi system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #fff;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 14'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='9' width='3' height='4' rx='1'/%3E%3Crect x='5' y='6.5' width='3' height='6.5' rx='1'/%3E%3Crect x='10' y='3.5' width='3' height='9.5' rx='1'/%3E%3Crect x='15' y='0.5' width='3' height='12.5' rx='1'/%3E%3Ccircle cx='32' cy='11.6' r='1.7'/%3E%3Crect x='49' y='3' width='20' height='8' rx='2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M24.5 5.2a11 11 0 0 1 15 0'/%3E%3Cpath d='M27.6 8.3a6.4 6.4 0 0 1 8.8 0'/%3E%3C/g%3E%3Crect x='47' y='1' width='24' height='12' rx='3.5' fill='none' stroke='%23fff' stroke-opacity='.45'/%3E%3Crect x='72.5' y='5' width='2' height='4' rx='1' fill='%23fff' fill-opacity='.45'/%3E%3C/svg%3E") right 7cqi center / 16.3cqi auto no-repeat;
    pointer-events: none;
}
/* Dynamic Island */
.tt-device__screen::after {
    content: "";
    position: absolute;
    top: 2.3cqi; left: 50%;
    z-index: 1;
    width: 26cqi; height: 7.7cqi;
    border-radius: 99px;
    background: #000;
    transform: translateX(-50%);
    pointer-events: none;
}

.tt-screens {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.tt-screen { display: flex; flex-direction: column; align-items: center; margin: 0; text-align: center; }
.tt-screen .tt-device { transition: transform 500ms var(--tt-ease-out); }
.tt-screen:hover .tt-device { transform: translateY(-8px); }
.tt-screen figcaption { max-width: 30ch; margin-top: 24px; color: var(--tt-muted); font-size: .9375rem; line-height: 1.55; }
.tt-screen figcaption strong { display: block; margin-bottom: 4px; font-family: var(--tt-font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: .03em; color: var(--tt-text); }
.tt-screens__note { display: flex; align-items: flex-start; justify-content: center; gap: 10px; max-width: 760px; margin: clamp(32px, 5vw, 56px) auto 0; color: var(--tt-muted); font-size: .875rem; text-align: left; }
.tt-screens__note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--tt-yellow); }
.tt-chapter__device { display: none; }
.tt-device--center { margin-inline: auto; }
.tt-page .banner .tt-device { animation: tt-bob 7s ease-in-out infinite; }
.tt-orbit__glow { position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle, rgba(253, 109, 0, .35), transparent 70%); filter: blur(30px); }

.tt-keys-callout {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 32px;
    padding: 18px 20px;
    border-radius: var(--tt-radius);
    background: rgba(240, 199, 21, .08);
    box-shadow: inset 0 0 0 1px rgba(240, 199, 21, .3);
}
.tt-keys-callout svg { width: 32px; height: 32px; flex: none; color: var(--tt-yellow); }
.tt-keys-callout p { margin: 0; color: var(--tt-text); }

/* ---------- Final CTA ---------- */

.tt-cta { position: relative; overflow: hidden; padding-block: clamp(96px, 14vw, 180px); }
.tt-cta__big {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .9;
}
.tt-cta__big .tt-marquee { -webkit-mask-image: none; mask-image: none; }
.tt-cta__big .tt-marquee__item {
    font-size: clamp(8rem, 22vw, 20rem);
    line-height: .9;
    color: transparent;
    -webkit-text-stroke: 2px rgba(10, 10, 10, .14);
}
.tt-cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.tt-cta__phone { width: 100%; max-width: 440px; justify-self: center; filter: drop-shadow(0 50px 60px rgba(0, 0, 0, .35)); }
.tt-cta .tt-display { font-size: clamp(3.25rem, 8vw, 7rem); }

/* ---------- Footer ---------- */

.tt-footer { position: relative; padding-top: clamp(64px, 9vw, 112px); background: var(--tt-ink); overflow: hidden; box-shadow: inset 0 1px 0 var(--tt-line); }
.tt-footer__top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, .7fr)); gap: 40px; padding-bottom: 56px; }
.tt-footer h2 { margin: 0 0 12px; font-family: var(--tt-font-display); font-weight: 400; font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1; text-transform: uppercase; }
.tt-footer h3 { margin: 0 0 18px; font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tt-muted); }
.tt-footer ul.tt-footer__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.tt-footer__links a {
    display: inline-block;
    padding: 6px 0;
    color: rgba(245, 245, 245, .85);
    background: linear-gradient(var(--tt-yellow), var(--tt-yellow)) 0 85% / 0 1.5px no-repeat;
    transition: color var(--tt-dur-fast), background-size 400ms var(--tt-ease-out);
}
.tt-footer__links a:hover { color: var(--tt-yellow); background-size: 100% 1.5px; }

.tt-news { margin-top: 24px; max-width: 460px; }
.tt-news__label { display: block; margin-bottom: 10px; font-weight: 600; }
.tt-news__row { display: flex; gap: 8px; padding: 6px; border-radius: var(--tt-radius-pill); background: var(--tt-surface); box-shadow: inset 0 0 0 1px var(--tt-line-strong); transition: box-shadow var(--tt-dur-fast); }
.tt-news__row:focus-within { box-shadow: inset 0 0 0 1.5px var(--tt-yellow), 0 0 0 4px rgba(240, 199, 21, .15); }
.tt-news input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--tt-text);
    font: 400 1rem var(--tt-font-body);
}
.tt-news input::placeholder { color: #8a8a8a; }
.tt-news input:focus { outline: none; }
.tt-news__msg { min-height: 1.5em; margin: 10px 0 0; padding-left: 16px; font-size: .875rem; }
.tt-news__msg.is-error { color: #FF8A8A; }
.tt-news__msg.is-ok { color: var(--tt-success); }
.tt-news.is-invalid .tt-news__row { box-shadow: inset 0 0 0 1.5px #FF6B6B; }

.tt-footer__stores { display: grid; gap: 10px; justify-items: start; }
.tt-footer__stores .tt-store { height: 48px; }

.tt-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 24px;
    box-shadow: 0 -1px 0 var(--tt-line);
    color: var(--tt-muted);
    font-size: .875rem;
}
.tt-footer__bar nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.tt-footer__bar a:hover { color: var(--tt-yellow); }

.tt-wordmark {
    display: block;
    margin: 0 auto -0.18em;
    font-family: var(--tt-font-display);
    font-size: clamp(6rem, 26vw, 24rem);
    line-height: .8;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: transparent;
    background: linear-gradient(180deg, rgba(240, 199, 21, .9), rgba(240, 199, 21, 0) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
}

.tt-to-top {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: var(--tt-z-raised);
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border: 0;
    border-radius: 50%;
    background: var(--tt-yellow);
    color: var(--tt-ink);
    box-shadow: 0 0 0 2px var(--tt-ink), 0 14px 30px -10px rgba(0, 0, 0, .6);
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px) scale(.8);
    pointer-events: none;
    transition: opacity var(--tt-dur), transform 400ms var(--tt-ease-spring);
}
.tt-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.tt-to-top svg { width: 22px; height: 22px; }

/* ==========================================================================
   INNER PAGES — modern skin over legacy content markup
   ========================================================================== */

.tt-main { position: relative; }

.tt-page .banner,
.tt-page .second_banner {
    position: relative;
    padding: calc(var(--tt-header-h) + clamp(48px, 8vw, 96px)) 0 clamp(56px, 8vw, 96px);
    background: var(--tt-ink);
    overflow: hidden;
    isolation: isolate;
}
.tt-page .banner::before,
.tt-page .second_banner::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 60vw; height: 60vw;
    max-width: 820px; max-height: 820px;
    top: -30%; right: -15%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 199, 21, .35), transparent 65%);
    filter: blur(60px);
    animation: tt-float-a 18s ease-in-out infinite;
}
.tt-page .banner::after,
.tt-page .second_banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 20%, transparent 75%);
}
.tt-page .banner img,
.tt-page .second_banner img { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .6)); animation: tt-bob 7s ease-in-out infinite; }
.tt-page .banner .col-6 { flex: 0 0 auto; width: 100%; max-width: 900px; }

.tt-page .black_section { background: var(--tt-ink); padding: clamp(56px, 8vw, 112px) 0; }
.tt-page .yellow_section,
.tt-page section.why_join { background: var(--tt-yellow); color: var(--tt-ink); padding: clamp(56px, 8vw, 112px) 0; }

/* Headings */
.tt-page .yellow_heading > h1,
.tt-page--wallet .yellow_heading > :is(h2, h3),
.tt-page .banner_content > h1,
.tt-page .same_section_content > h1,
.tt-page .text_section_content > h1 {
    margin: 0 0 20px;
    font-family: var(--tt-font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    line-height: .95;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--tt-text);
    text-shadow: none;
    -webkit-text-stroke: 0;
}
.tt-page .banner .yellow_heading > h1,
.tt-page .banner_content > h1 { font-size: clamp(3rem, 8vw, 6.5rem); }
.tt-page .banner_content > h1 > span,
.tt-page .same_section_content > h1 > span,
.tt-page .text_section_content > h1 > span,
.tt-page .yellow_span > h1 > span { color: var(--tt-yellow); }
.tt-page .text_section_content { margin-bottom: clamp(48px, 7vw, 88px); }
.tt-page .text_section_content > h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
.tt-page .yellow_section .yellow_heading > h1,
.tt-page--wallet .yellow_section .yellow_heading > h2,
.tt-page .why_join .yellow_heading > h1 { color: var(--tt-ink); }

.tt-page .yellow_heading > p,
.tt-page .banner_content > p,
.tt-page .same_section_content > p,
.tt-page .icon_content_para > p {
    margin: 0 0 24px;
    font-family: var(--tt-font-body);
    font-weight: 400;
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
    line-height: 1.7;
    letter-spacing: 0;
    color: var(--tt-muted);
    text-shadow: none;
    width: auto;
}
.tt-page .yellow_section .yellow_heading > p,
.tt-page .why_join .yellow_heading > p { color: rgba(10, 10, 10, .8); }

/* Legacy CTA links inside headings → pill buttons */
.tt-page .yellow_heading > a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: var(--tt-radius-pill);
    background: var(--tt-yellow);
    color: var(--tt-ink);
    font-weight: 700;
    transition: transform var(--tt-dur) var(--tt-ease-out), box-shadow var(--tt-dur);
}
.tt-page .yellow_section .yellow_heading > a { background: var(--tt-ink); color: var(--tt-yellow); }
.tt-page .yellow_heading > a:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); }

.tt-page .banner_icon { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tt-page .banner_icon a { display: inline-flex; height: 52px; padding: 4px; border-radius: 14px; background: #000; box-shadow: inset 0 0 0 1px var(--tt-line-strong); transition: transform var(--tt-dur) var(--tt-ease-out), box-shadow var(--tt-dur); }
.tt-page .banner_icon a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--tt-yellow); }
.tt-page .banner_icon img { height: 100%; width: auto; margin: 0; animation: none; filter: none; }

/* Feature cards (privacy & security) */
.tt-page .text_section_card {
    height: 100%;
    padding: 32px 28px;
    border-radius: var(--tt-radius);
    background: var(--tt-surface);
    box-shadow: var(--tt-shadow-card), inset 0 0 0 1px var(--tt-line);
    text-align: left;
    transition: transform 500ms var(--tt-ease-out), box-shadow var(--tt-dur);
}
.tt-page .text_section_card:hover { transform: translateY(-6px); box-shadow: var(--tt-shadow-card), inset 0 0 0 1px rgba(240, 199, 21, .4); }
.tt-page .text_section_card_heading > * { margin: 0 0 12px; font-family: var(--tt-font-body); font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--tt-yellow); }
.tt-page .text_section_card_para > * { margin: 0; font-family: var(--tt-font-body); font-size: 1rem; line-height: 1.65; color: var(--tt-muted); text-align: left; }

/* Long-form docs (FAQ, terms, policies, contact…) */
.tt-page .faq_text { max-width: 860px; margin-inline: auto; }
.tt-page .faq_text > h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); color: var(--tt-yellow); }
.tt-page .faq_text > h3 { margin: 48px 0 12px; font-family: var(--tt-font-display); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; color: var(--tt-yellow); text-transform: uppercase; letter-spacing: .02em; }
.tt-page .faq_text > h4 { position: relative; margin: 36px 0 10px; font-family: var(--tt-font-body); font-size: 1.25rem; font-weight: 700; line-height: 1.35; color: var(--tt-text); }
.tt-page .faq_text > h5 { margin: 28px 0 8px; font-size: 1.0625rem; font-weight: 700; color: var(--tt-text); }
.tt-page .faq_text > p,
.tt-page .faq_text li { color: var(--tt-muted); font-size: 1.0625rem; line-height: 1.75; font-style: normal; }
.tt-page .faq_text > p:empty { display: none; }
.tt-page .faq_text strong, .tt-page .faq_text b { color: var(--tt-text); }
.tt-page .faq_text a { display: inline; color: var(--tt-yellow); font-family: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tt-page .faq_text a:hover { text-decoration-color: transparent; }
.tt-page .faq_text ul { padding-left: 0; list-style: none; display: grid; gap: 10px; }
.tt-page .faq_text > ul > li { position: relative; padding-left: 26px; }
.tt-page .faq_text > ul > li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; background: var(--tt-yellow); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.tt-page .faq_text blockquote { margin: 0 0 20px; padding: 18px 22px; border-radius: var(--tt-radius-sm); background: rgba(240, 199, 21, .08); box-shadow: inset 3px 0 0 var(--tt-yellow); }
.tt-page .faq_text blockquote p { margin: 0; color: var(--tt-text); }
.tt-page .faq_text hr { margin: 40px 0; border: 0; height: 1px; background: var(--tt-line); opacity: 1; }
.tt-page .faq_text .anchor { position: absolute; left: -28px; top: 0; display: inline-block; width: 24px; height: 100%; opacity: 0; text-decoration: none; transition: opacity var(--tt-dur-fast); z-index: auto; }
.tt-page .faq_text .anchor::before { content: "#"; color: var(--tt-yellow); font-weight: 700; }
.tt-page .faq_text h3:hover .anchor,
.tt-page .faq_text h4:hover .anchor,
.tt-page .faq_text .anchor:focus-visible { opacity: 1; }
.tt-page .dev_page_nav_wrap {
    margin: 24px 0 8px;
    padding: 24px 28px;
    border-radius: var(--tt-radius);
    background: var(--tt-surface);
    box-shadow: inset 0 0 0 1px var(--tt-line);
}
.tt-page .dev_page_nav_wrap p { margin: 16px 0 8px; }
.tt-page .dev_page_nav_wrap p:first-child { margin-top: 0; }
.tt-page .dev_page_nav_wrap p:empty { display: none; }
.tt-page .dev_page_nav_wrap ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 20px; margin: 0; }
.tt-page .dev_page_nav_wrap li { padding: 0; }
.tt-page .dev_page_nav_wrap li::before { display: none; }
.tt-page .dev_page_nav_wrap a { display: block; padding: 6px 0; text-decoration: none; color: rgba(245, 245, 245, .85); font-size: .9375rem; }
.tt-page .dev_page_nav_wrap a:hover { color: var(--tt-yellow); }
.tt-page .dev_page_nav_wrap p a { color: var(--tt-yellow); text-transform: uppercase; letter-spacing: .1em; font-size: .8125rem; }

/* Blog */
.tt-page .blog_card_section {
    height: 100%;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
    border-radius: var(--tt-radius);
    background: var(--tt-surface);
    box-shadow: var(--tt-shadow-card), inset 0 0 0 1px var(--tt-line);
    overflow: hidden;
    transition: transform 500ms var(--tt-ease-out), box-shadow var(--tt-dur);
}
.tt-page .blog_card_section:hover { transform: translateY(-8px); box-shadow: var(--tt-shadow-card), inset 0 0 0 1px rgba(240, 199, 21, .4); }
.tt-page .blog_card_section_img { margin-bottom: 20px; overflow: hidden; }
.tt-page .blog_card_section_img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; transition: transform 800ms var(--tt-ease-out); }
.tt-page .blog_card_section:hover .blog_card_section_img img { transform: scale(1.06); }
.tt-page .blog_card_section_heading,
.tt-page .blog_card_section_content,
.tt-page .blog_card_section_date { margin: 0 24px 12px; }
.tt-page .blog_card_section_heading > * { margin: 0; font-family: var(--tt-font-body); font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--tt-text); }
.tt-page .blog_card_section_content > * { margin: 0; font-family: var(--tt-font-body); font-size: 1rem; line-height: 1.6; color: var(--tt-muted); }
.tt-page .blog_card_section_date { margin-top: auto; margin-bottom: 0; }
.tt-page .blog_card_section_date > * { margin: 0; font-family: var(--tt-font-body); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tt-yellow); }

/* Wallet page */
.tt-page .wallet_feature ul { list-style: none !important; padding: 0; display: grid; gap: 4px; }
.tt-page .wallet_feature li { position: relative; padding-left: 32px; }
.tt-page .wallet_feature li p { margin: 0 0 12px; font-size: 1.0625rem; color: var(--tt-text); }
.tt-page .wallet_feature li::before {
    content: "";
    position: absolute;
    left: 0; top: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--tt-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.tt-page .wallet_feature.yellow_section .yellow_heading > p { color: rgba(10, 10, 10, .8); }
.tt-page .wallet_feature .yellow_heading.col-lg-2 > div { transition: transform 500ms var(--tt-ease-spring), box-shadow var(--tt-dur); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5); }
.tt-page .wallet_feature .yellow_heading.col-lg-2:hover > div { transform: translateY(-8px) rotate(-6deg); }
.tt-page .wallet_feature .yellow_heading.col-lg-2 > p { font-weight: 700; color: var(--tt-ink); margin-bottom: 24px; }
.tt-page .black_section .yellow_span.text-center img { width: 72px; height: 72px; margin-bottom: 12px; padding: 14px; border-radius: 20px; background: rgba(240, 199, 21, .1); box-shadow: inset 0 0 0 1px rgba(240, 199, 21, .3); }
.tt-page .black_section .yellow_span.text-center > :is(h1, h3).fs-2 { font-family: var(--tt-font-body); font-weight: 700; font-size: 1.5rem !important; text-transform: none; color: var(--tt-yellow); margin-bottom: 10px; }
.tt-page .black_section .yellow_span.text-center { padding: 28px; margin-bottom: 8px; }
.tt-page .black_section .yellow_span > :is(h1, h2).text-center { margin-bottom: 40px; }

.tt-page--wallet .tt-coin-btc { width: 94px; height: 94px; border-radius: 1.5rem; background: #f7931a; color: #171009; font: 700 3.75rem/1 system-ui, sans-serif; }

/* Earn money / buy & sell legacy blocks */
.tt-page .orange_layer { padding: 32px; border-radius: var(--tt-radius); background: linear-gradient(140deg, rgba(253, 109, 0, .18), rgba(10, 10, 10, .6)); box-shadow: inset 0 0 0 1px rgba(253, 109, 0, .35); }
.tt-page .orange_layer::before, .tt-page .orange_layer::after { display: none; }
.tt-page .icon_content { display: flex; align-items: flex-start; gap: 20px; margin: 0 0 24px; }
.tt-page .icon_content_icon { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(240, 199, 21, .1); }
.tt-page .icon_content_icon img { width: 32px; height: 32px; }
.tt-page .icon_content_para { flex: 1; border-bottom: 1px solid var(--tt-line); }
.tt-page .icon_content_para::before { display: none; }
.tt-page .eight_section, .tt-page .eight_section_img { border-radius: var(--tt-radius); }
.tt-page .eight_section_img { padding: 0; }
.tt-page .yellow_section .yellow_heading > p.text-center { color: var(--tt-ink); font-weight: 500; }

/* ==========================================================================
   MOTION — reveal system (progressively enhanced by launch.js)
   ========================================================================== */

.tt-js [data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 900ms var(--tt-ease-out), transform 1000ms var(--tt-ease-out);
    transition-delay: var(--d, 0ms);
}
.tt-js [data-reveal="left"] { transform: translateX(-48px); }
.tt-js [data-reveal="right"] { transform: translateX(48px); }
.tt-js [data-reveal="zoom"] { transform: scale(.9); }
.tt-js [data-reveal].is-in { opacity: 1; transform: none; }

.tt-js [data-split] .tt-word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .06em 0; margin: 0 -.08em -.06em 0; }
.tt-js [data-split] .tt-word > span { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--tt-ease-out); transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0ms)); }
.tt-js [data-split].is-in .tt-word > span { transform: none; }

.tt-js .tt-hero__title .tt-line > span { transform: translateY(105%); transition: transform 1100ms var(--tt-ease-out); }
.tt-js .tt-hero__title .tt-line:nth-child(2) > span { transition-delay: 120ms; }
.tt-js.tt-ready .tt-hero__title .tt-line > span { transform: none; }

/* ---------- Keyframes ---------- */

@keyframes tt-spin { to { transform: rotate(360deg); } }
@keyframes tt-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes tt-draw { to { stroke-dashoffset: 0; } }
@keyframes tt-loader-pop { from { transform: scale(.6) rotate(-20deg); } to { transform: none; } }
@keyframes tt-loader-logo { to { opacity: 1; transform: none; } }
@keyframes tt-float-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6%, 8%) scale(1.12); } }
@keyframes tt-float-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10%, -6%) scale(1.15); } }
@keyframes tt-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, 3%); } 40% { transform: translate(4%, -6%); } 60% { transform: translate(-3%, 7%); } 80% { transform: translate(6%, 2%); } 100% { transform: translate(0, 0); } }
@keyframes tt-person-float { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); } 50% { transform: translateX(-50%) translateY(-14px) rotate(-.6deg); } }
@keyframes tt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes tt-scroll-dot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@keyframes tt-marquee { to { transform: translateX(-100%); } }
@keyframes tt-wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes tt-dash { to { stroke-dashoffset: -20; } }
@keyframes tt-node-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes tt-vanish { 0%, 35% { opacity: 1; filter: blur(0); transform: none; } 55%, 80% { opacity: 0; filter: blur(8px); transform: translateX(16px) scale(.96); } 100% { opacity: 1; filter: blur(0); transform: none; } }
@keyframes tt-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ==========================================================================
   RESPONSIVE (mobile-first breakpoints: 576 / 768 / 1024 / 1200)
   ========================================================================== */

@media (max-width: 1199.98px) {
    .tt-nav a { padding: 10px 10px; font-size: .875rem; }
}

/* Narrow desktops: longer translated menus need the room of the header CTA, which
   stays available in the hero, the footer and the mobile drawer. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .tt-header__actions > .tt-btn { display: none; }
}

@media (max-width: 1023.98px) {
    .tt-nav, .tt-header__actions > .tt-lang, .tt-header__actions > .tt-btn { display: none; }
    .tt-burger { display: block; }

    .tt-hero { min-height: auto; padding-top: calc(var(--tt-header-h) + 40px); }
    .tt-hero__inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .tt-hero__copy { display: flex; flex-direction: column; align-items: center; }
    .tt-hero__ctas, .tt-hero__proof { justify-content: center; }
    .tt-hero__visual { max-width: 520px; }
    .tt-scroll-cue { display: none; }

    .tt-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tt-card--h2 { grid-row: span 1; }

    .tt-story { grid-template-columns: minmax(0, 1fr); }
    .tt-story__visual { display: none; }
    .tt-chapter { min-height: auto; opacity: 1; padding-block: 32px; }
    .tt-chapter__img { display: block; width: 100%; max-width: 480px; margin: 0 auto 24px; border-radius: var(--tt-radius); background: radial-gradient(circle at 50% 40%, rgba(240, 199, 21, .16), transparent 60%), var(--tt-ink-2); padding: 24px; }

    .tt-translate, .tt-wallet, .tt-cta__inner { grid-template-columns: minmax(0, 1fr); }
    .tt-translate__copy, .tt-cta__copy { text-align: center; }
    .tt-translate__copy .tt-eyebrow, .tt-cta__copy .tt-eyebrow { justify-content: center; }
    .tt-langs, .tt-cta .tt-stores { justify-content: center; }
    .tt-orbit { max-width: 460px; order: -1; }

    .tt-chapter__device { display: flex; justify-content: center; width: 100%; max-width: 480px; margin: 0 auto 24px; padding: 32px 24px; border-radius: var(--tt-radius); background: radial-gradient(circle at 50% 40%, rgba(240, 199, 21, .16), transparent 60%), var(--tt-ink-2); }
    .tt-chapter__device .tt-device { --tt-device-w: 220px; }
    .tt-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }

    .tt-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tt-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    :root { --tt-header-h: 68px; }
    .tt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tt-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .tt-card--w2 { grid-column: span 1; }
    .tt-card { min-height: 240px; }
    .tt-float--hide-sm { display: none; }
    .tt-phone { transform: none; }
    .tt-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
    .tt-footer__bar { flex-direction: column; text-align: center; }
    .tt-footer__bar nav { justify-content: center; }
    .tt-page .banner, .tt-page .second_banner { text-align: center; }
    .tt-page .banner_icon { justify-content: center; }
    .tt-page .faq_text .anchor { display: none; }
}

@media (max-width: 575.98px) {
    .tt-orbit__spin .tt-coin { width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 6px; }
    .tt-glass-card { font-size: .75rem; padding: 10px 12px; }
    .tt-glass-card__icon { width: 32px; height: 32px; }
    .tt-bubble { font-size: .9375rem; padding: 8px 12px; }
    .tt-coin { width: 46px; height: 46px; }
    .tt-hero__proof { font-size: .875rem; gap: 8px 16px; }
    .tt-stores .tt-store { height: 50px; }

    /* Screens become a swipeable row; the next card peeks in as an affordance. */
    .tt-screens {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 74%;
        gap: 16px;
        margin-inline: calc(var(--tt-gutter) * -1);
        padding: 8px var(--tt-gutter) 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--tt-gutter);
        scrollbar-width: thin;
        scrollbar-color: var(--tt-yellow-lo) transparent;
    }
    .tt-screens:focus-visible { outline: 2px solid var(--tt-yellow); outline-offset: -2px; }
    .tt-screens > li { scroll-snap-align: start; }
    .tt-screen .tt-device { --tt-device-w: 240px; }
}

/* ---------- Motion toggle (pause / play) ---------- */

.tt-motion-toggle {
    position: fixed;
    left: 20px; bottom: 20px;
    z-index: var(--tt-z-raised);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 12px;
    border: 0;
    border-radius: var(--tt-radius-pill);
    background: rgba(17, 17, 17, .82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px var(--tt-line-strong);
    color: var(--tt-text);
    font: 600 .8125rem var(--tt-font-body);
    cursor: pointer;
    touch-action: manipulation;
    transition: box-shadow var(--tt-dur-fast), color var(--tt-dur-fast);
}
.tt-motion-toggle:hover { box-shadow: inset 0 0 0 1px var(--tt-yellow); color: var(--tt-yellow); }
.tt-motion-toggle svg { width: 16px; height: 16px; }
.tt-motion-toggle .is-play { display: none; }
.tt-motion-toggle[aria-pressed="true"] .is-play { display: block; }
.tt-motion-toggle[aria-pressed="true"] .is-pause { display: none; }
@media (max-width: 575.98px) {
    .tt-motion-toggle { padding: 0; width: 44px; justify-content: center; }
    .tt-motion-toggle [data-motion-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Paused: freeze every looping animation in place (transitions still give feedback) */
.tt-paused *,
.tt-paused *::before,
.tt-paused *::after { animation-play-state: paused !important; }

/* ---------- Reduced motion ----------
   Motion stays on (product decision) but calmer: loops run slower, the grain
   flicker is removed and pointer parallax uses ~half amplitude (launch.js).
   The always-visible motion toggle lets anyone pause everything. */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .tt-noise { display: none; }
    .tt-marquee__track { animation-duration: 70s; }
    .tt-marquee--reverse .tt-marquee__track { animation-duration: 84s; }
    .tt-cta__big .tt-marquee__track { animation-duration: 90s; }
    .tt-float__inner { animation-duration: 10s; }
    .tt-hex-ring { animation-duration: 70s; }
    .tt-hex-ring--2 { animation-duration: 100s; }
    .tt-orbit__spin, .tt-orbit__spin .tt-coin img { animation-duration: 50s; }
    .tt-blob--a, .tt-blob--b { animation-duration: 30s; }
}

/* Shared FAQ and security copy */
.tt-page .tt-trust-copy > h2,
.tt-page .tt-trust-copy > h3 {
    margin: 2rem 0 .6rem;
    color: var(--tt-text);
    font-family: var(--tt-font-body);
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    line-height: 1.35;
    text-transform: none;
}
.tt-page .tt-trust-copy > h3 { color: var(--tt-yellow); font-size: 1.15rem; }