/* =============================================================================
   Topteller Landing — Design System
   Premium Nigerian fintech: black + gold, trustworthy, vibrant.
   ============================================================================= */

:root {
  /* Brand */
  --ink:        #0a0a0f;
  --ink-2:      #14141c;
  --ink-3:      #1c1c28;
  --ink-line:   #2a2a38;
  --paper:      #faf8f3;
  --paper-2:    #f3efe6;
  --paper-line: #e8e2d2;
  --gold:       #f5a623;
  --gold-2:     #ffc940;
  --gold-deep:  #d89000;
  --gold-soft:  rgba(245, 166, 35, 0.12);
  --gold-glow:  rgba(245, 166, 35, 0.35);
  --green:      #1f8a5b;
  --red:        #d8492f;

  /* Light surfaces */
  --bg:         var(--paper);
  --bg-2:       var(--paper-2);
  --surface:    #ffffff;
  --surface-2:  #fbf9f3;
  --line:       var(--paper-line);
  --text:       var(--ink);
  --text-2:     #4a4a5a;
  --text-3:     #7a7a8c;

  /* Type */
  --fs-display: clamp(2.4rem, 5.6vw, 4.6rem);
  --fs-h2:      clamp(1.7rem, 3.2vw, 2.5rem);
  --fs-h3:      clamp(1.2rem, 2vw, 1.5rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  /* Font pairs (overridden by tweak) */
  --font-display: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Spacing & radii */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(13, 13, 20, 0.04), 0 2px 8px rgba(13, 13, 20, 0.05);
  --shadow:    0 6px 16px rgba(13, 13, 20, 0.06), 0 2px 4px rgba(13, 13, 20, 0.04);
  --shadow-lg: 0 24px 64px -16px rgba(13, 13, 20, 0.18), 0 8px 24px -8px rgba(13, 13, 20, 0.08);
  --shadow-gold: 0 12px 32px -8px var(--gold-glow);
}

.tt-dark {
  --bg:        var(--ink);
  --bg-2:      var(--ink-2);
  --surface:   var(--ink-2);
  --surface-2: var(--ink-3);
  --line:      var(--ink-line);
  --text:      #f5f3eb;
  --text-2:    #b8b8c6;
  --text-3:    #7d7d92;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
  --shadow:    0 6px 16px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25);
  --shadow-lg: 0 24px 64px -16px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =============================================================================
   NAV
   ============================================================================= */
.tt-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.tt-nav-row {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.tt-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.tt-brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: block;
}
.tt-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tt-nav-links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color .15s, background .15s;
}
.tt-nav-links a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.tt-nav-cta {
  display: flex;
  gap: 8px;
  align-items: center;
}
@media (max-width: 880px) {
  .tt-nav-links { display: none; }
  .tt-nav-row { padding: 14px 20px; gap: 12px; }
}

/* =============================================================================
   BUTTONS
   ============================================================================= */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .15s, border-color .15s;
  white-space: nowrap;
}
.tt-btn:hover { transform: translateY(-1px); }
.tt-btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.tt-btn-primary:hover { background: var(--ink-2); box-shadow: var(--shadow-lg); }
.tt-dark .tt-btn-primary { background: var(--gold); color: var(--ink); }
.tt-dark .tt-btn-primary:hover { background: var(--gold-2); box-shadow: var(--shadow-gold); }

.tt-btn-gold {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-gold);
}
.tt-btn-gold:hover { background: var(--gold-2); box-shadow: 0 16px 40px -8px var(--gold-glow); }

.tt-btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
}
.tt-btn-ghost:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }

.tt-btn-sm { height: 38px; padding: 0 16px; font-size: 0.85rem; }

/* =============================================================================
   LAYOUT
   ============================================================================= */
.tt-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 32px;
}
.tt-section-tight { padding: 56px 32px; }
@media (max-width: 720px) {
  .tt-section, .tt-section-tight { padding: 56px 20px; }
}

.tt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.tt-dark .tt-eyebrow { color: var(--gold-2); }
.tt-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.tt-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}
.tt-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}
.tt-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
}
.tt-lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.tt-muted { color: var(--text-2); }
.tt-h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--gold-deep) 10%, var(--gold-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =============================================================================
   HERO — SPLIT (default)
   ============================================================================= */
.tt-hero {
  position: relative;
  overflow: hidden;
}
.tt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .tt-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.tt-hero-copy { display: grid; gap: 22px; }

.tt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
  border: 1px solid var(--line);
  width: fit-content;
  font-size: 0.82rem;
  color: var(--text-2);
}
.tt-hero-badge-dot {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  display: inline-grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 800;
}
.tt-hero-badge strong { color: var(--text); font-weight: 600; }

.tt-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.tt-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: center;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px dashed var(--line);
}
.tt-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--text-2);
}
.tt-trust-item svg {
  width: 18px; height: 18px;
  color: var(--gold-deep);
  flex-shrink: 0;
}
.tt-dark .tt-trust-item svg { color: var(--gold-2); }

/* Hero variant: dark */
.tt-hero-dark {
  background: var(--ink);
  color: #f5f3eb;
  margin: 0;
  border-radius: 0;
}
.tt-hero-dark .tt-section { padding-top: 96px; padding-bottom: 96px; }

/* Hero variant: centered */
.tt-hero-centered .tt-hero-grid {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}
.tt-hero-centered .tt-hero-copy { justify-items: center; }
.tt-hero-centered .tt-hero-trust { justify-content: center; border-top: 0; }
.tt-hero-centered .tt-hero-visual { margin-top: 32px; }

/* Hero ambient glow */
.tt-hero-glow {
  position: absolute;
  inset: -10% -20% auto auto;
  width: 720px;
  height: 720px;
  background: radial-gradient(closest-side, var(--gold-soft), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.tt-hero-grid > * { position: relative; z-index: 1; }

/* =============================================================================
   PHONE MOCK
   ============================================================================= */
.tt-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
}
.tt-phone {
  width: 320px;
  aspect-ratio: 9 / 19;
  border-radius: 44px;
  padding: 10px;
  background: linear-gradient(160deg, #1d1d2a 0%, #0a0a0f 100%);
  box-shadow:
    0 1px 2px rgba(0,0,0,.2),
    0 28px 64px -12px rgba(13,13,20,.4),
    inset 0 0 0 1.5px #2a2a38;
  position: relative;
}
.tt-phone-screen {
  width: 100%; height: 100%;
  border-radius: 36px;
  background: linear-gradient(180deg, #14141c 0%, #0a0a0f 100%);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  color: #f5f3eb;
  font-family: var(--font-body);
}
.tt-phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 24px;
  background: #0a0a0f;
  border-radius: 999px;
  z-index: 5;
}
.tt-phone-stat {
  padding: 18px 24px 8px;
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  font-weight: 600;
  z-index: 1;
}
.tt-phone-body {
  flex: 1;
  padding: 12px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.tt-phone-greet {
  display: flex; align-items: center; gap: 10px;
  padding-top: 6px;
}
.tt-phone-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.85rem;
  color: var(--ink);
}
.tt-phone-greet div { font-size: 0.7rem; color: #b8b8c6; line-height: 1.3; }
.tt-phone-greet div b { color: #f5f3eb; display: block; font-size: 0.85rem; }

.tt-phone-balance {
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.tt-phone-balance::after {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(closest-side, rgba(255,255,255,.3), transparent 70%);
}
.tt-phone-balance small {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: .7;
}
.tt-phone-balance strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.tt-phone-balance-row {
  display: flex; gap: 8px; margin-top: 12px;
  position: relative; z-index: 1;
}
.tt-phone-balance-row button {
  flex: 1;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  height: 30px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tt-phone-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.tt-phone-tile {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 10px 4px;
  background: #1c1c28;
  border-radius: 12px;
  font-size: 0.62rem;
  color: #b8b8c6;
  text-align: center;
}
.tt-phone-tile-icon {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: rgba(245,166,35,.16);
  color: var(--gold-2);
  display: grid; place-items: center;
  font-size: 0.6rem;
  font-weight: 800;
  font-family: var(--font-mono);
}

.tt-phone-list {
  flex: 1;
  display: grid;
  gap: 6px;
  align-content: start;
}
.tt-phone-list h4 {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: #b8b8c6;
  display: flex; justify-content: space-between;
}
.tt-phone-list h4 span { color: var(--gold-2); font-size: 0.62rem; }
.tt-phone-tx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.tt-phone-tx:first-of-type { border-top: 0; }
.tt-phone-tx-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(245,166,35,.12);
  color: var(--gold-2);
  display: grid; place-items: center;
  font-size: 0.58rem; font-weight: 700;
  font-family: var(--font-mono);
}
.tt-phone-tx-meta {
  flex: 1;
  font-size: 0.66rem;
  line-height: 1.3;
}
.tt-phone-tx-meta b { display: block; color: #f5f3eb; font-size: 0.74rem; font-weight: 600; }
.tt-phone-tx-meta span { color: #7d7d92; }
.tt-phone-tx-amt { font-size: 0.74rem; font-weight: 700; }
.tt-phone-tx-amt.neg { color: #ff7c7c; }
.tt-phone-tx-amt.pos { color: #6ee7b7; }

.tt-phone-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tt-float-card {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
}
.tt-float-card-a { top: 14%; left: -18%; }
.tt-float-card-b { bottom: 12%; right: -16%; }
.tt-float-ic {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--gold-soft);
  color: var(--gold-deep);
  display: grid; place-items: center;
}
.tt-float-card small { display: block; color: var(--text-3); font-size: 0.7rem; }

@media (max-width: 720px) {
  .tt-phone { width: 260px; }
  .tt-float-card { display: none; }
}

/* =============================================================================
   TRUST STRIP / STATS BAND
   ============================================================================= */
.tt-stats-band {
  background: var(--ink);
  color: #f5f3eb;
}
.tt-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding: 56px 32px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .tt-stats-grid { grid-template-columns: repeat(2, 1fr); padding: 40px 24px; gap: 24px; }
}
.tt-stat {
  display: grid;
  gap: 6px;
}
.tt-stat strong {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #f5f3eb;
}
.tt-stat strong em {
  font-style: normal;
  color: var(--gold-2);
}
.tt-stat span {
  font-size: 0.85rem;
  color: #b8b8c6;
  line-height: 1.4;
}
.tt-stat-rule {
  height: 2px; width: 32px;
  background: var(--gold);
  border-radius: 2px;
  margin-top: 8px;
}

/* =============================================================================
   SERVICES GRID
   ============================================================================= */
.tt-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.tt-section-head > div:first-child {
  display: grid; gap: 14px; max-width: 640px;
}

.tt-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.tt-service {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  display: grid;
  gap: 14px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  isolation: isolate;
}
.tt-service::before {
  content: "";
  position: absolute;
  inset: auto auto -50% -20%;
  width: 70%;
  height: 70%;
  background: radial-gradient(closest-side, var(--gold-soft), transparent 70%);
  opacity: 0;
  transition: opacity .25s;
  z-index: -1;
}
.tt-service:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--gold) 30%, var(--line));
  box-shadow: var(--shadow-lg);
}
.tt-service:hover::before { opacity: 1; }
.tt-service-ic {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--gold-2);
  display: grid; place-items: center;
}
.tt-service-ic svg { width: 24px; height: 24px; }
.tt-service h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.tt-service p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.55;
}
.tt-service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.tt-service-link::after { content: "→"; transition: transform .15s; }
.tt-service:hover .tt-service-link::after { transform: translateX(3px); }

/* feature card variant (taller / dark) */
.tt-service-feature {
  grid-column: span 2;
  background: var(--ink);
  color: #f5f3eb;
  padding: 36px 32px;
}
.tt-service-feature h3 { color: #f5f3eb; font-size: 1.45rem; }
.tt-service-feature p { color: #b8b8c6; max-width: 38ch; }
.tt-service-feature .tt-service-ic { background: rgba(245,166,35,.12); color: var(--gold-2); }
.tt-service-feature .tt-service-link { color: var(--gold-2); }
@media (max-width: 720px) { .tt-service-feature { grid-column: span 1; } }

/* =============================================================================
   RESELLER VALUE PROP
   ============================================================================= */
.tt-reseller {
  background: var(--ink);
  color: #f5f3eb;
  position: relative;
  overflow: hidden;
}
.tt-reseller::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 600px; height: 600px;
  background: radial-gradient(closest-side, var(--gold-soft), transparent 70%);
  filter: blur(20px);
}
.tt-reseller-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
  position: relative;
}
@media (max-width: 980px) {
  .tt-reseller-grid { grid-template-columns: 1fr; gap: 40px; }
}
.tt-reseller-copy { display: grid; gap: 24px; }
.tt-reseller .tt-h2 { color: #f5f3eb; }
.tt-reseller .tt-lead { color: #b8b8c6; }
.tt-reseller .tt-eyebrow { color: var(--gold-2); }

.tt-checklist {
  display: grid;
  gap: 14px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}
.tt-checklist li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  color: #d8d6cc;
  font-size: 0.95rem;
  line-height: 1.5;
}
.tt-checklist b { color: #f5f3eb; font-weight: 600; }
.tt-check {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.tt-check svg { width: 14px; height: 14px; }

/* Reseller branded preview */
.tt-brand-preview {
  background: linear-gradient(160deg, #1c1c28, #0a0a0f);
  border: 1px solid var(--ink-line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 14px;
  position: relative;
}
.tt-brand-preview-bar {
  display: flex; align-items: center; gap: 8px;
  color: #7d7d92; font-size: 0.78rem;
  font-family: var(--font-mono);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-line);
}
.tt-brand-preview-bar span:first-child {
  display: flex; gap: 6px;
}
.tt-brand-preview-bar i {
  width: 10px; height: 10px; border-radius: 999px;
  background: #2a2a38;
}
.tt-brand-preview-url {
  flex: 1;
  background: #14141c;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.7rem;
}
.tt-brand-preview-url em { color: var(--gold-2); font-style: normal; }
.tt-brand-preview-site {
  border-radius: 16px;
  padding: 22px 22px 24px;
  background: var(--brand-color, var(--gold));
  color: var(--ink);
  display: grid;
  gap: 16px;
  min-height: 280px;
}
.tt-bp-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; font-weight: 600;
}
.tt-bp-logo { display: flex; align-items: center; gap: 8px; }
.tt-bp-logo-mark {
  width: 24px; height: 24px;
  background: var(--ink); color: var(--gold);
  border-radius: 6px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 0.75rem;
}
.tt-bp-nav { display: flex; gap: 14px; }
.tt-bp-nav span { opacity: .75; }
.tt-bp-h {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.015em;
  max-width: 16ch;
}
.tt-bp-h-sub {
  font-size: 0.78rem;
  opacity: .8;
  max-width: 32ch;
}
.tt-bp-btn {
  align-self: start;
  background: var(--ink);
  color: #f5f3eb;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
}
.tt-bp-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: 6px;
}
.tt-bp-card {
  background: rgba(10,10,15,.14);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.62rem;
  display: grid; gap: 2px;
}
.tt-bp-card b { font-size: 0.75rem; }

/* Brand swatches */
.tt-brand-swatches {
  display: flex; gap: 8px; align-items: center;
  font-size: 0.78rem; color: #b8b8c6;
}
.tt-swatch {
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.tt-swatch:hover { transform: scale(1.08); }
.tt-swatch.is-active { border-color: var(--gold-2); }

/* =============================================================================
   TESTIMONIALS
   ============================================================================= */
.tt-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .tt-quotes { grid-template-columns: 1fr; } }
.tt-quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: grid;
  gap: 18px;
  transition: transform .2s, box-shadow .2s;
}
.tt-quote:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tt-quote-stars {
  display: flex; gap: 2px;
  color: var(--gold);
}
.tt-quote p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}
.tt-quote-by {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.tt-quote-av {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.85rem;
  color: var(--ink);
  flex-shrink: 0;
}
.tt-quote-av.a { background: linear-gradient(135deg, #f5a623, #d89000); }
.tt-quote-av.b { background: linear-gradient(135deg, #c2b8ff, #8e7fff); color: #14141c; }
.tt-quote-av.c { background: linear-gradient(135deg, #aef0c2, #1f8a5b); color: #14141c; }
.tt-quote-by div b { display: block; font-size: 0.92rem; font-weight: 600; }
.tt-quote-by div span { color: var(--text-2); font-size: 0.82rem; }

/* =============================================================================
   DOWNLOAD BAND
   ============================================================================= */
.tt-download {
  background: var(--ink);
  color: #f5f3eb;
  position: relative;
  overflow: hidden;
}
.tt-download-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
@media (max-width: 880px) {
  .tt-download-inner { grid-template-columns: 1fr; padding: 56px 24px; text-align: center; justify-items: center; }
}
.tt-download h2 { color: #f5f3eb; }
.tt-download p { color: #b8b8c6; }
.tt-download-actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;
}
.tt-store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 20px 10px 16px;
  background: #f5f3eb;
  color: var(--ink);
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid #f5f3eb;
  transition: transform .15s;
}
.tt-store:hover { transform: translateY(-2px); }
.tt-store-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
}
.tt-store-copy {
  display: grid;
  line-height: 1.1;
  font-family: var(--font-display);
}
.tt-store-copy small {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  opacity: .68;
}
.tt-store-copy span {
  font-size: 1.05rem; font-weight: 600;
}
.tt-store-outline {
  background: transparent;
  color: #f5f3eb;
  border-color: #2a2a38;
}

.tt-download-visual {
  display: grid;
  place-items: center;
  position: relative;
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.tt-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.tt-footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 32px 32px;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
}
@media (max-width: 980px) {
  .tt-footer-grid { grid-template-columns: 1fr 1fr; padding: 56px 24px 24px; gap: 32px; }
}
@media (max-width: 560px) {
  .tt-footer-grid { grid-template-columns: 1fr 1fr; }
}
.tt-footer-brand { display: grid; gap: 14px; }
.tt-footer-brand p { margin: 0; color: var(--text-2); font-size: 0.92rem; max-width: 30ch; }
.tt-footer-col h4 {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.tt-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tt-footer-col a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color .15s;
}
.tt-footer-col a:hover { color: var(--gold-deep); }
.tt-dark .tt-footer-col a:hover { color: var(--gold-2); }
.tt-footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 32px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-2);
}
.tt-footer-socials { display: flex; gap: 10px; }
.tt-soc {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.tt-soc:hover { color: var(--text); border-color: var(--gold-deep); }
.tt-soc svg { width: 16px; height: 16px; }

/* =============================================================================
   MODE TABS  (Topteller / Reseller toggle for demo only)
   ============================================================================= */
.tt-modetabs {
  position: fixed;
  top: 80px; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.tt-modetabs button {
  border: 0;
  padding: 8px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tt-modetabs button.is-active {
  background: var(--ink);
  color: var(--paper);
}
.tt-dark .tt-modetabs button.is-active { background: var(--gold); color: var(--ink); }

/* =============================================================================
   MISC
   ============================================================================= */
.tt-divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.tt-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-deep);
  font-size: 0.72rem;
  font-weight: 600;
}
.tt-dark .tt-tag { color: var(--gold-2); }

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-vis {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =============================================================================
   APP SHELL RESKIN — only when body has .tt-app class.
   Retones the existing layouts/app.php sidebar + topbar to the new
   black/gold aesthetic. Loaded via landing.css so it's optional.
   ============================================================================= */
body.tt-app {
  background: linear-gradient(180deg, #faf8f3 0%, #f3efe6 100%);
  color: var(--text);
  font-family: var(--font-body);
}

body.tt-app .page-grid {
  max-width: 1480px;
  padding: 24px;
  gap: 24px;
}

/* Sidebar — black + gold treatment */
body.tt-app .sidebar {
  background: linear-gradient(180deg, #0a0a0f 0%, #14141c 100%);
  border: 1px solid #1c1c28;
  border-radius: 24px;
  color: #f5f3eb;
  box-shadow: 0 24px 56px -16px rgba(13,13,20,.22);
}
body.tt-app .sidebar-shell { padding: 24px 20px; gap: 18px; }
body.tt-app .brand-mark {
  background: rgba(245,166,35,.1);
  border-color: rgba(245,166,35,.24);
  color: var(--gold-2);
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
body.tt-app .sidebar .brand-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #f5f3eb;
}
body.tt-app .sidebar .brand-copy {
  color: #b8b8c6;
  font-size: 0.88rem;
  line-height: 1.5;
}
body.tt-app .sidebar-user-card,
body.tt-app .sidebar-foot-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px;
}
body.tt-app .sidebar-user-eyebrow,
body.tt-app .nav-section-label {
  color: rgba(245,166,35,.85);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}
body.tt-app .sidebar-user-card strong {
  font-family: var(--font-display);
  font-size: 1rem;
}

body.tt-app .nav-link {
  background: transparent;
  border-color: rgba(255,255,255,.05);
  border-radius: 12px;
  font-weight: 500;
  color: rgba(245,243,235,.78);
  letter-spacing: 0;
  padding: 12px 14px;
}
body.tt-app .nav-link::after { color: rgba(245,243,235,.4); }
body.tt-app .nav-link:hover {
  background: rgba(245,166,35,.08);
  border-color: rgba(245,166,35,.2);
  color: #f5f3eb;
  transform: none;
}
body.tt-app .nav-link.is-active {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-color: transparent;
  color: var(--ink);
  font-weight: 700;
}
body.tt-app .nav-link.is-active::after { color: var(--ink); }

/* Topbar */
body.tt-app .topbar {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--line);
  border-radius: 20px;
  padding: 22px 28px;
  box-shadow: 0 6px 20px -4px rgba(13,13,20,.08);
}
body.tt-app .topbar-title,
body.tt-app .brand-title,
body.tt-app .hero-title,
body.tt-app .section-title,
body.tt-app .card-title,
body.tt-app .sub-panel-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
body.tt-app .topbar-title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
body.tt-app .topbar-copy { color: var(--text-2); font-size: 0.95rem; }

body.tt-app .chip {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-2);
}
body.tt-app .chip-soft {
  background: var(--gold-soft);
  border-color: color-mix(in srgb, var(--gold) 28%, var(--line));
  color: var(--gold-deep);
}

body.tt-app .topbar-service-link {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
  font-weight: 600;
  font-size: 0.8rem;
}
body.tt-app .topbar-service-link:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}

/* Buttons in app shell */
body.tt-app .btn {
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--font-body);
  font-weight: 600;
}
body.tt-app .btn:hover { background: var(--ink-2); box-shadow: var(--shadow); transform: translateY(-1px); }
body.tt-app .btn-secondary {
  background: var(--gold);
  color: var(--ink);
  border-color: transparent;
  border-radius: 999px;
}
body.tt-app .btn-secondary:hover { background: var(--gold-2); box-shadow: var(--shadow-gold); }
body.tt-app .btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
  border-radius: 999px;
}
body.tt-app .btn-ghost:hover { border-color: color-mix(in srgb, var(--text) 28%, var(--line)); }
body.tt-app .btn-danger { border-radius: 999px; }

/* Panels in app shell */
body.tt-app .panel,
body.tt-app .stat-card,
body.tt-app .hero-card,
body.tt-app .quick-link-card,
body.tt-app .service-family-card,
body.tt-app .launch-card,
body.tt-app .spotlight-card,
body.tt-app .metric-card,
body.tt-app .sub-panel,
body.tt-app .hero-side-panel,
body.tt-app .service-nav-card,
body.tt-app .utility-stat,
body.tt-app .shell-panel {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
body.tt-app .hero-card { box-shadow: var(--shadow); border-radius: 24px; }

body.tt-app .field input,
body.tt-app .field select,
body.tt-app .field textarea {
  border-radius: 14px;
  border-width: 1.5px;
  font-size: 0.95rem;
}
body.tt-app .field input:focus,
body.tt-app .field select:focus,
body.tt-app .field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-soft);
}

/* Tables */
body.tt-app .table-wrap { border-radius: 14px; border-color: var(--line); }
body.tt-app th {
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--font-body);
}

/* Flash */
body.tt-app .flash {
  border-radius: 14px;
  font-weight: 500;
}

/* =============================================================================
   DARK MODE — combine body.tt-app + body.tt-dark
   The .tt-dark vars flip the surface/text colors. These rules patch
   the hardcoded light-value overrides we set on .tt-app so dark mode
   actually flips the whole shell.
   ============================================================================= */
body.tt-app.tt-dark {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--text);
}
body.tt-app.tt-dark .topbar {
  background: rgba(20,20,28,.78);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 6px 20px -4px rgba(0,0,0,.4);
}
body.tt-app.tt-dark .topbar-copy,
body.tt-app.tt-dark .topbar-title { color: var(--text); }
body.tt-app.tt-dark .chip {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text-2);
}
body.tt-app.tt-dark .chip-soft {
  background: var(--gold-soft);
  border-color: color-mix(in srgb, var(--gold) 32%, var(--line));
  color: var(--gold-2);
}
body.tt-app.tt-dark .topbar-service-link {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}
body.tt-app.tt-dark .topbar-service-link:hover {
  border-color: var(--gold);
  color: var(--gold-2);
  background: rgba(245,166,35,.08);
}

/* Buttons in dark app shell */
body.tt-app.tt-dark .btn {
  background: var(--gold);
  color: var(--ink);
}
body.tt-app.tt-dark .btn:hover { background: var(--gold-2); }
body.tt-app.tt-dark .btn-secondary {
  background: rgba(245,166,35,.16);
  color: var(--gold-2);
  border-color: rgba(245,166,35,.32);
}
body.tt-app.tt-dark .btn-ghost {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}
body.tt-app.tt-dark .btn-ghost:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--gold);
}

/* Panels & cards in dark */
body.tt-app.tt-dark .panel,
body.tt-app.tt-dark .stat-card,
body.tt-app.tt-dark .quick-link-card,
body.tt-app.tt-dark .service-family-card,
body.tt-app.tt-dark .launch-card,
body.tt-app.tt-dark .spotlight-card,
body.tt-app.tt-dark .metric-card,
body.tt-app.tt-dark .sub-panel,
body.tt-app.tt-dark .service-nav-card,
body.tt-app.tt-dark .utility-stat,
body.tt-app.tt-dark .shell-panel,
body.tt-app.tt-dark .tt-card,
body.tt-app.tt-dark .tt-dash-stat,
body.tt-app.tt-dark .tt-quick,
body.tt-app.tt-dark .tt-svc-tile,
body.tt-app.tt-dark .tt-svc-form-card,
body.tt-app.tt-dark .tt-svc-aside-card,
body.tt-app.tt-dark .tt-svc-back {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}

body.tt-app.tt-dark .panel-nested,
body.tt-app.tt-dark .service-card,
body.tt-app.tt-dark .task-card,
body.tt-app.tt-dark .service-form-shell,
body.tt-app.tt-dark .service-nav-link {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}

/* Tables in dark */
body.tt-app.tt-dark th {
  background: var(--surface-2);
  color: var(--text-2);
}
body.tt-app.tt-dark .table-wrap { border-color: var(--line); }
body.tt-app.tt-dark tbody tr:hover { background: rgba(245,166,35,.05); }

/* Form inputs in dark */
body.tt-app.tt-dark .field input,
body.tt-app.tt-dark .field select,
body.tt-app.tt-dark .field textarea {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}
body.tt-app.tt-dark .field input::placeholder,
body.tt-app.tt-dark .field textarea::placeholder { color: var(--text-3); }

/* Hero cards in dark — already dark, just patch glow */
body.tt-app.tt-dark .hero-card,
body.tt-app.tt-dark .hero-card--dashboard,
body.tt-app.tt-dark .hero-card--wallet,
body.tt-app.tt-dark .hero-card--services,
body.tt-app.tt-dark .hero-card--transactions,
body.tt-app.tt-dark .hero-card--notifications,
body.tt-app.tt-dark .tt-dash-hero,
body.tt-app.tt-dark .tt-svc-hub-hero,
body.tt-app.tt-dark .tt-svc-detail-hero {
  background: linear-gradient(135deg, #050811 0%, var(--ink-2) 100%);
  border-color: var(--line);
}

/* Note box, tag, code, status pills in dark */
body.tt-app.tt-dark .note-box {
  background: rgba(245,166,35,.1);
  border-color: rgba(245,166,35,.32);
  color: var(--text);
}
body.tt-app.tt-dark .tt-tag {
  background: rgba(245,166,35,.12);
  color: var(--gold-2);
}
body.tt-app.tt-dark code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--gold-2);
}
body.tt-app.tt-dark .tt-tx-status { background: rgba(245,166,35,.12); color: var(--gold-2); }
body.tt-app.tt-dark .tt-tx-status.ok { background: rgba(31,138,91,.16); color: #6ee7b7; }
body.tt-app.tt-dark .tt-tx-status.fail { background: rgba(216,73,47,.16); color: #fca5a5; }

/* Sidebar already dark — keep it, only tighten borders */
body.tt-app.tt-dark .sidebar { border-color: rgba(255,255,255,.06); }

/* Service tile hover in dark */
body.tt-app.tt-dark .tt-svc-tile:hover {
  border-color: var(--gold);
}

/* Dark mode toggle button visual state */
.tt-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.tt-theme-toggle:hover { transform: translateY(-1px); border-color: var(--gold); }
.tt-theme-toggle svg { width: 18px; height: 18px; }
.tt-theme-toggle .icon-moon { display: block; }
.tt-theme-toggle .icon-sun { display: none; }
body.tt-dark .tt-theme-toggle .icon-moon { display: none; }
body.tt-dark .tt-theme-toggle .icon-sun { display: block; color: var(--gold-2); }

/* =============================================================================
   BOTTOM MOBILE NAV — fixed 5-tab bar shown only on small screens.
   Replaces the slide-out sidebar as the primary nav on phones.
   ============================================================================= */
.tt-bottom-nav {
  display: none;
}
@media (max-width: 880px) {
  body.tt-app .tt-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px -4px rgba(13,13,20,.08);
    padding: 8px 6px max(8px, env(safe-area-inset-bottom));
  }
  body.tt-app.tt-dark .tt-bottom-nav {
    background: rgba(20,20,28,.96);
    border-top-color: var(--line);
  }
  body.tt-app .tt-bottom-nav-item {
    display: grid;
    place-items: center;
    gap: 2px;
    text-decoration: none;
    color: var(--text-3);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 4px 2px;
    border-radius: 12px;
    transition: color .15s, background .15s;
  }
  body.tt-app .tt-bottom-nav-item svg { width: 22px; height: 22px; }
  body.tt-app .tt-bottom-nav-item.is-active {
    color: var(--gold-deep);
    background: var(--gold-soft);
  }
  body.tt-app.tt-dark .tt-bottom-nav-item.is-active {
    color: var(--gold-2);
    background: rgba(245,166,35,.16);
  }
  /* leave space for bottom nav */
  body.tt-app .page-grid { padding-bottom: 88px; }
}

/* =============================================================================
   WHATSAPP FLOATING BUTTON — global, sits above bottom nav on mobile.
   ============================================================================= */
.tt-wa-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  text-decoration: none;
  box-shadow: 0 14px 32px -6px rgba(37,211,102,.5);
  transition: transform .2s, box-shadow .2s;
  border: 0;
  cursor: pointer;
}
.tt-wa-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 40px -8px rgba(37,211,102,.6);
  color: #fff;
}
.tt-wa-fab svg { width: 28px; height: 28px; }
.tt-wa-fab-label {
  position: absolute;
  right: 70px;
  background: var(--ink);
  color: #f5f3eb;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.tt-wa-fab:hover .tt-wa-fab-label { opacity: 1; transform: translateX(0); }
@media (max-width: 880px) {
  .tt-wa-fab { bottom: 88px; right: 14px; width: 52px; height: 52px; }
  .tt-wa-fab svg { width: 26px; height: 26px; }
  .tt-wa-fab-label { display: none; }
}

/* =============================================================================
   STATUS BADGE — live "all systems operational" pill in topbar
   ============================================================================= */
.tt-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(31,138,91,.1);
  border: 1px solid rgba(31,138,91,.32);
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 600;
}
.tt-status-badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: tt-pulse 2s ease-in-out infinite;
}
@keyframes tt-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.8); }
}
body.tt-app.tt-dark .tt-status-badge {
  background: rgba(31,138,91,.18);
  border-color: rgba(31,138,91,.4);
  color: #6ee7b7;
}
.tt-status-badge.is-degraded { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 38%, var(--line)); color: var(--gold-deep); }
.tt-status-badge.is-degraded::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
@media (max-width: 880px) {
  body.tt-app .tt-status-badge { display: none; }
}

/* =============================================================================
   AMOUNT QUICK-PICK CHIPS — ₦100, ₦200, ₦500, ₦1,000 above amount field
   ============================================================================= */
.tt-amount-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
}
.tt-amount-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  transition: all .15s;
}
.tt-amount-chip:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: var(--gold-soft);
}
.tt-amount-chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
body.tt-app.tt-dark .tt-amount-chip {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}
body.tt-app.tt-dark .tt-amount-chip.is-active {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

/* =============================================================================
   SAVED BENEFICIARIES — chips above phone number field
   ============================================================================= */
.tt-benef-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tt-benef-row-label {
  font-size: 0.78rem;
  color: var(--text-3);
  font-weight: 500;
  margin-right: 4px;
}
.tt-benef-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.tt-benef-chip:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold-deep);
}
.tt-benef-chip-av {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--ink);
  display: grid; place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  flex-shrink: 0;
}
.tt-benef-chip b { font-weight: 600; }
.tt-benef-chip span { color: var(--text-3); font-size: 0.76rem; }
.tt-benef-chip-del {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-3);
  display: grid; place-items: center;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
}
.tt-benef-chip-del:hover { color: var(--red); }

/* Network detected pill */
.tt-network-detected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-deep);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-left: 8px;
  animation: tt-fade-in .3s ease-out;
}
@keyframes tt-fade-in {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}
body.tt-app.tt-dark .tt-network-detected { color: var(--gold-2); }

/* =============================================================================
   TRUST LOGOS STRIP — partners under landing hero
   ============================================================================= */
.tt-trust-strip {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}
.tt-trust-strip-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  gap: 18px;
  text-align: center;
}
.tt-trust-strip-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tt-trust-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 42px;
}
.tt-trust-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--text-2);
  opacity: .75;
  transition: opacity .2s, color .2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tt-trust-logo:hover { opacity: 1; color: var(--text); }
.tt-trust-logo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
}

/* =============================================================================
   RESELLER REVENUE WIDGET — animated earnings card for dashboard hero
   ============================================================================= */
.tt-revenue-widget {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  margin-top: 18px;
  position: relative;
  overflow: hidden;
}
.tt-revenue-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(245,166,35,.08), transparent);
  transform: translateX(-100%);
  animation: tt-shimmer 4s ease-in-out infinite;
}
.tt-revenue-widget > * { position: relative; }
@keyframes tt-shimmer {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
.tt-revenue-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(245,243,235,.7);
  font-size: 0.78rem;
  font-weight: 500;
}
.tt-revenue-label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #6ee7b7;
  box-shadow: 0 0 8px #6ee7b7;
  animation: tt-pulse 2s ease-in-out infinite;
}
.tt-revenue-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--gold-2);
  line-height: 1;
}
.tt-revenue-spark {
  width: 100%;
  height: 32px;
  display: block;
}
.tt-revenue-meta {
  display: flex;
  gap: 14px;
  font-size: 0.76rem;
  color: rgba(245,243,235,.6);
}
.tt-revenue-meta strong { color: #6ee7b7; font-weight: 600; }

/* =============================================================================
   MOBILE TOPBAR FIX — compact the sticky header on small screens.
   The full topbar (title + copy + service strip + actions) is too tall
   on phones, eating viewport. On mobile we collapse it.
   ============================================================================= */
@media (max-width: 880px) {
  body.tt-app .topbar {
    padding: 12px 16px;
    border-radius: 14px;
    backdrop-filter: blur(14px) saturate(140%);
    background: rgba(255,255,255,0.92);
    box-shadow: 0 4px 12px -2px rgba(13,13,20,.08);
    gap: 8px;
    align-items: center;
  }
  body.tt-app .topbar > .shell-heading {
    flex: 1; min-width: 0;
    gap: 2px;
  }
  body.tt-app .topbar-context {
    display: none;          /* hide chips on mobile — already visible in sidebar */
  }
  body.tt-app .topbar-title {
    font-size: 1.15rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }
  body.tt-app .topbar-copy {
    display: none;          /* page copy hidden on mobile — saves height */
  }
  body.tt-app .topbar-service-strip {
    display: none;          /* hidden — service shortcuts available in sidebar */
  }
  body.tt-app .shell-meta {
    justify-items: end;
    gap: 6px;
    flex-shrink: 0;
  }
  body.tt-app .shell-meta > .chip,
  body.tt-app .shell-meta > .chip-soft {
    display: none;          /* hide role chips on mobile */
  }
  body.tt-app .shell-meta .action-row {
    gap: 6px;
  }
  body.tt-app .shell-meta .btn-ghost,
  body.tt-app .shell-meta .btn-secondary,
  body.tt-app .shell-meta .btn,
  body.tt-app .shell-meta .btn-danger,
  body.tt-app .shell-meta .nav-toggle {
    min-height: 38px;
    padding: 6px 14px;
    font-size: 0.82rem;
  }
  /* Settings button is less critical on mobile, keep Menu + Logout visible */
  body.tt-app .shell-meta .action-row > .btn-ghost:not(.nav-toggle):not(:last-of-type) {
    display: none;
  }
  body.tt-app .page-grid { gap: 12px; padding: 12px; }
  body.tt-app .main-panel { padding: 0; }
}

@media (max-width: 480px) {
  body.tt-app .topbar { padding: 10px 12px; }
  body.tt-app .topbar-title { font-size: 1rem; }
  body.tt-app .shell-meta .btn-danger { padding: 6px 10px; }
}

/* Hide hero cards' redundant service strip when nested inside topbar (legacy) */
body.tt-app .topbar .topbar-service-strip {
  display: flex;            /* desktop default */
}
@media (max-width: 880px) {
  body.tt-app .topbar .topbar-service-strip { display: none; }
}

/* =============================================================================
   SERVICES — directory / hub page (new design)
   Used by services/index.php as a clean grid of service cards.
   ============================================================================= */
.tt-svc-hub {
  display: grid;
  gap: 20px;
}
.tt-svc-hub-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--ink) 0%, #14141c 100%);
  color: #f5f3eb;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
  gap: 32px;
  align-items: center;
  box-shadow: var(--shadow);
}
.tt-svc-hub-hero::before {
  content: "";
  position: absolute;
  inset: -30% -15% auto auto;
  width: 480px; height: 480px;
  background: radial-gradient(closest-side, var(--gold-soft), transparent 70%);
  pointer-events: none;
}
.tt-svc-hub-hero > * { position: relative; z-index: 1; }
@media (max-width: 820px) {
  .tt-svc-hub-hero { grid-template-columns: 1fr; padding: 24px; gap: 22px; }
}
.tt-svc-hub-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #f5f3eb;
  margin: 12px 0 10px;
}
.tt-svc-hub-hero p {
  color: #b8b8c6;
  font-size: 0.96rem;
  margin: 0;
  max-width: 56ch;
}

.tt-svc-hub-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  width: fit-content;
  font-size: 0.78rem;
  color: #d8d6cc;
}
.tt-svc-hub-eyebrow b {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--gold); color: var(--ink);
  display: grid; place-items: center;
  font-size: 0.64rem; font-weight: 800;
}

.tt-svc-hub-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.tt-svc-hub-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 16px;
}
.tt-svc-hub-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--gold-2);
}
.tt-svc-hub-stat span {
  display: block;
  color: #b8b8c6;
  font-size: 0.78rem;
  margin-top: 4px;
}

/* The grid of service tiles */
.tt-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.tt-svc-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 24px 20px;
  display: grid;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tt-svc-tile::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 280px; height: 280px;
  background: radial-gradient(closest-side, var(--gold-soft), transparent 70%);
  opacity: 0;
  transition: opacity .25s;
  z-index: -1;
}
.tt-svc-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gold) 35%, var(--line));
  box-shadow: var(--shadow);
}
.tt-svc-tile:hover::before { opacity: 1; }
.tt-svc-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tt-svc-tile-ic {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--gold-2);
  display: grid; place-items: center;
  transition: background .25s, color .25s;
}
.tt-svc-tile-ic svg { width: 24px; height: 24px; }
.tt-svc-tile:hover .tt-svc-tile-ic {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--ink);
}
.tt-svc-tile-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.tt-svc-tile h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 6px 0 0;
}
.tt-svc-tile p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.55;
}
.tt-svc-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px dashed var(--line);
  color: var(--text-3);
  font-size: 0.78rem;
}
.tt-svc-tile-meta strong {
  color: var(--gold-deep);
  font-weight: 700;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tt-svc-tile-meta strong::after {
  content: "→";
  transition: transform .15s;
}
.tt-svc-tile:hover .tt-svc-tile-meta strong::after {
  transform: translateX(3px);
}

/* =============================================================================
   SERVICE DETAIL PAGE — used by airtime, data, tv, electricity, etc.
   ============================================================================= */
.tt-svc-page {
  display: grid;
  gap: 20px;
}
.tt-svc-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: color .15s, border-color .15s, background .15s;
}
.tt-svc-back:hover {
  color: var(--text);
  border-color: var(--gold);
  background: var(--gold-soft);
}

.tt-svc-detail-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--ink) 0%, #14141c 100%);
  color: #f5f3eb;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.85fr);
  gap: 28px;
  align-items: center;
  box-shadow: var(--shadow);
}
.tt-svc-detail-hero::before {
  content: "";
  position: absolute;
  inset: -30% -15% auto auto;
  width: 480px; height: 480px;
  background: radial-gradient(closest-side, var(--gold-soft), transparent 70%);
  pointer-events: none;
}
.tt-svc-detail-hero > * { position: relative; z-index: 1; }
@media (max-width: 820px) {
  .tt-svc-detail-hero {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 20px;
  }
}
.tt-svc-detail-hero-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--ink);
  margin-bottom: 14px;
}
.tt-svc-detail-hero-ic svg { width: 28px; height: 28px; }
.tt-svc-detail-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #f5f3eb;
  margin: 0 0 8px;
}
.tt-svc-detail-hero p {
  margin: 0;
  color: #b8b8c6;
  font-size: 0.96rem;
  max-width: 56ch;
}
.tt-svc-detail-stats {
  display: grid;
  gap: 8px;
}
.tt-svc-detail-stat {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  font-size: 0.85rem;
}
.tt-svc-detail-stat span { color: #b8b8c6; }
.tt-svc-detail-stat strong {
  color: #f5f3eb;
  font-family: var(--font-display);
  font-weight: 600;
}
.tt-svc-detail-stat strong em {
  font-style: normal;
  color: var(--gold-2);
}

/* Service page split layout: form + sidebar */
.tt-svc-detail-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 980px) {
  .tt-svc-detail-cols { grid-template-columns: 1fr; }
}

/* Service form card (consistent across all service pages) */
.tt-svc-form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 28px 26px;
  display: grid;
  gap: 18px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 600px) {
  .tt-svc-form-card { padding: 22px 20px; border-radius: 18px; }
}
.tt-svc-form-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.tt-svc-form-card-head h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.tt-svc-form-card-head .tt-eyebrow { font-size: 0.7rem; }

/* Quick provider picker — chips of available networks */
.tt-svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tt-svc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.tt-svc-chip:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: var(--gold-soft);
}
.tt-svc-chip.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* Service aside (right column on detail pages) */
.tt-svc-aside {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 16px;
  align-self: start;
}
@media (max-width: 980px) {
  .tt-svc-aside { position: static; }
}
.tt-svc-aside-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  display: grid;
  gap: 12px;
}
.tt-svc-aside-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
}
.tt-svc-aside-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.55;
}
.tt-svc-aside-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tt-svc-aside-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.5;
}
.tt-svc-aside-list li::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--gold-soft);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d89000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 2px;
}
.tt-svc-aside-list li b {
  display: block;
  color: var(--text);
  font-weight: 600;
}

/* ===== Comprehensive legacy-class retoning =====
   Covers every class used across services, wallet, transactions,
   tasks, notifications, profile, settings — so all those PHP views
   inherit the new black/gold aesthetic without being rewritten. */

/* Hero cards (dashboard, wallet, services, transactions, notifications) */
body.tt-app .hero-card,
body.tt-app .hero-card--landing,
body.tt-app .hero-card--dashboard,
body.tt-app .hero-card--services,
body.tt-app .hero-card--wallet,
body.tt-app .hero-card--transactions,
body.tt-app .hero-card--notifications {
  background: linear-gradient(135deg, var(--ink) 0%, #14141c 100%);
  color: #f5f3eb;
  border: 1px solid #1c1c28;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  padding: 32px;
  box-shadow: var(--shadow-lg);
}
body.tt-app .hero-card::before,
body.tt-app .hero-card--landing::before,
body.tt-app .hero-card--dashboard::before,
body.tt-app .hero-card--services::before,
body.tt-app .hero-card--wallet::before,
body.tt-app .hero-card--transactions::before,
body.tt-app .hero-card--notifications::before {
  content: "";
  position: absolute;
  inset: -30% -15% auto auto;
  width: 480px; height: 480px;
  background: radial-gradient(closest-side, var(--gold-soft), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body.tt-app .hero-card > *,
body.tt-app .hero-card--landing > *,
body.tt-app .hero-card--dashboard > *,
body.tt-app .hero-card--services > *,
body.tt-app .hero-card--wallet > *,
body.tt-app .hero-card--transactions > *,
body.tt-app .hero-card--notifications > * { position: relative; z-index: 1; }

body.tt-app .hero-card .hero-title,
body.tt-app .hero-card--landing .hero-title,
body.tt-app .hero-card--dashboard .hero-title,
body.tt-app .hero-card--services .hero-title,
body.tt-app .hero-card--wallet .hero-title,
body.tt-app .hero-card--transactions .hero-title,
body.tt-app .hero-card--notifications .hero-title {
  color: #f5f3eb;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 22ch;
}
body.tt-app .hero-card .section-copy,
body.tt-app .hero-card--landing .section-copy,
body.tt-app .hero-card--dashboard .section-copy,
body.tt-app .hero-card--services .section-copy,
body.tt-app .hero-card--wallet .section-copy,
body.tt-app .hero-card--transactions .section-copy,
body.tt-app .hero-card--notifications .section-copy {
  color: #b8b8c6;
  max-width: 60ch;
}
body.tt-app .hero-card .brand-mark,
body.tt-app .hero-card--landing .brand-mark,
body.tt-app .hero-card--dashboard .brand-mark,
body.tt-app .hero-card--services .brand-mark,
body.tt-app .hero-card--wallet .brand-mark,
body.tt-app .hero-card--transactions .brand-mark,
body.tt-app .hero-card--notifications .brand-mark {
  background: rgba(245,166,35,.1);
  border-color: rgba(245,166,35,.32);
  color: var(--gold-2);
}
body.tt-app .hero-card .chip,
body.tt-app .hero-card--landing .chip,
body.tt-app .hero-card--dashboard .chip,
body.tt-app .hero-card--services .chip,
body.tt-app .hero-card--wallet .chip,
body.tt-app .hero-card--transactions .chip,
body.tt-app .hero-card--notifications .chip {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #d8d6cc;
}

/* Hero side panel — gold wallet-style accent on dashboard/wallet hero,
   subtle dark for the rest */
body.tt-app .hero-side-panel {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 24px;
  color: #f5f3eb;
  align-self: start;
}
body.tt-app .hero-card--wallet .hero-side-panel,
body.tt-app .hero-card--dashboard .hero-side-panel {
  background: linear-gradient(140deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-color: transparent;
  color: var(--ink);
  box-shadow: var(--shadow-gold);
}
body.tt-app .hero-side-row {
  display: flex; justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #b8b8c6;
  font-size: 0.88rem;
}
body.tt-app .hero-card--wallet .hero-side-row,
body.tt-app .hero-card--dashboard .hero-side-row {
  border-color: rgba(10,10,15,.18);
  color: rgba(10,10,15,.7);
}
body.tt-app .hero-side-row:last-child { border-bottom: 0; padding-bottom: 0; }
body.tt-app .hero-side-row strong {
  color: #f5f3eb;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
body.tt-app .hero-card--wallet .hero-side-row strong,
body.tt-app .hero-card--dashboard .hero-side-row strong { color: var(--ink); }

body.tt-app .hero-actions { margin-top: 24px; gap: 10px; }
body.tt-app .hero-card .btn,
body.tt-app .hero-card--dashboard .btn,
body.tt-app .hero-card--wallet .btn,
body.tt-app .hero-card--services .btn,
body.tt-app .hero-card--transactions .btn,
body.tt-app .hero-card--notifications .btn {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-gold);
}
body.tt-app .hero-card .btn-ghost,
body.tt-app .hero-card--dashboard .btn-ghost,
body.tt-app .hero-card--wallet .btn-ghost,
body.tt-app .hero-card--services .btn-ghost,
body.tt-app .hero-card--transactions .btn-ghost,
body.tt-app .hero-card--notifications .btn-ghost {
  background: rgba(255,255,255,.05);
  color: #f5f3eb;
  border-color: rgba(255,255,255,.18);
}

/* Stat cards */
body.tt-app .stat-card { padding: 22px 24px; }
body.tt-app .stat-label,
body.tt-app .metric-label {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 600;
}
body.tt-app .stat-value,
body.tt-app .metric-value {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  color: var(--text);
}
body.tt-app .mini-copy {
  color: var(--text-2);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

/* Card titles */
body.tt-app .card-title,
body.tt-app .sub-panel-title,
body.tt-app .section-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
}
body.tt-app .section-title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
body.tt-app .sub-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.tt-app .sub-panel-title svg {
  color: var(--gold-deep);
  flex-shrink: 0;
}

/* Service eyebrow */
body.tt-app .service-eyebrow,
body.tt-app .quick-link-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Service / task cards inside panels */
body.tt-app .service-card,
body.tt-app .task-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  gap: 6px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
body.tt-app .service-card:hover,
body.tt-app .task-card:hover {
  border-color: color-mix(in srgb, var(--gold) 32%, var(--line));
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
body.tt-app .service-card strong,
body.tt-app .task-card strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Quick link / launch / spotlight cards */
body.tt-app .launch-card,
body.tt-app .spotlight-card,
body.tt-app .quick-link-card {
  padding: 22px 24px;
  display: grid;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}
body.tt-app .launch-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--gold-2);
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
}
body.tt-app .launch-chip,
body.tt-app .quick-link-kicker {
  background: var(--gold-soft);
  color: var(--gold-deep);
  border-radius: 999px;
  padding: 4px 10px;
  width: fit-content;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.tt-app .launch-card h3,
body.tt-app .quick-link-card strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0;
}
body.tt-app .launch-card p,
body.tt-app .quick-link-card p {
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}
body.tt-app .launch-arrow {
  margin-top: auto;
  color: var(--gold-deep);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* Service family cards */
body.tt-app .service-family-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
body.tt-app .service-family-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

/* Sub-panels (nested forms) */
body.tt-app .sub-panel,
body.tt-app .panel-nested {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
}

/* Service form shell */
body.tt-app .service-form-shell {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}

/* Note box */
body.tt-app .note-box {
  background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line));
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Pill row / chip scroll */
body.tt-app .pill-row,
body.tt-app .chip-scroll { gap: 8px; }

/* List clean */
body.tt-app .list-clean {
  display: grid;
  gap: 10px;
  padding-left: 0;
  list-style: none;
}
body.tt-app .list-clean li {
  position: relative;
  padding-left: 26px;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.55;
}
body.tt-app .list-clean li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--gold);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Form polish */
body.tt-app .form-grid { gap: 14px; }
body.tt-app .field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.tt-app .field input,
body.tt-app .field select,
body.tt-app .field textarea {
  height: 46px;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 0.95rem;
}
body.tt-app .field textarea {
  height: auto;
  min-height: 108px;
  padding: 12px 14px;
}
body.tt-app code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--gold-deep);
}

/* Buttons inside cards */
body.tt-app .btn-glow {
  box-shadow: var(--shadow-gold);
}

/* Badges */
body.tt-app .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
body.tt-app .badge-muted,
body.tt-app .badge {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
}
body.tt-app .badge-gradient {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--ink);
  border-color: transparent;
}
body.tt-app .badge-success {
  background: rgba(31,138,91,.12);
  color: var(--green);
  border-color: rgba(31,138,91,.32);
}
body.tt-app .badge-warning {
  background: var(--gold-soft);
  color: var(--gold-deep);
  border-color: color-mix(in srgb, var(--gold) 38%, var(--line));
}
body.tt-app .badge-danger {
  background: rgba(216,73,47,.1);
  color: var(--red);
  border-color: rgba(216,73,47,.32);
}

/* Service nav card (services sidebar) */
body.tt-app .service-nav-card {
  position: sticky;
  top: 110px;
  background: var(--surface);
  border-radius: 20px;
  padding: 22px;
}
body.tt-app .service-nav-link {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  padding: 12px 14px;
  font-size: 0.9rem;
}
body.tt-app .service-nav-link:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  transform: translateX(2px);
}

/* Empty / table empty */
body.tt-app .table-empty {
  color: var(--text-3);
  text-align: center;
  padding: 28px;
}

/* Muted divider */
body.tt-app .muted-divider {
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}

/* Panel header */
body.tt-app .panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
body.tt-app .panel-header .card-title { margin-top: 4px; }

/* Topbar service strip on dark hero conflict */
body.tt-app .hero-card .topbar-service-strip { display: none; }

/* Feature grid */
body.tt-app .feature-grid { gap: 12px; }

/* Stat trend */
body.tt-app .stat-card-trend {
  margin-top: 8px;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(31,138,91,.12);
  color: var(--green);
}

/* Inline form */
body.tt-app .inline-form-grid { display: grid; gap: 12px; }
body.tt-app .form-grid.two-up { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) {
  body.tt-app .form-grid.two-up { grid-template-columns: 1fr; }
}

/* Action row */
body.tt-app .action-row { gap: 10px; }
body.tt-app .action-row--spread { justify-content: space-between; }

/* Service eyebrow inside dark hero */
body.tt-app .hero-card .service-eyebrow,
body.tt-app .hero-card--dashboard .service-eyebrow,
body.tt-app .hero-card--wallet .service-eyebrow,
body.tt-app .hero-card--services .service-eyebrow,
body.tt-app .hero-card--transactions .service-eyebrow,
body.tt-app .hero-card--notifications .service-eyebrow { color: var(--gold-2); }

/* Spotlight grid card */
body.tt-app .spotlight-card { background: var(--surface); }

/* Stack */
body.tt-app .stack { display: grid; gap: 14px; }

/* =============================================================================
   AUTH PAGES — login / register / forgot / reset.
   Wrapped in .tt-auth-page which overrides the existing .auth-shell.
   ============================================================================= */
.tt-auth-page {
  min-height: 100vh;
  background:
    radial-gradient(800px 600px at 90% -10%, var(--gold-soft), transparent 70%),
    radial-gradient(900px 700px at -10% 110%, rgba(245,166,35,.05), transparent 70%),
    var(--bg);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.tt-auth-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 32px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 940px) {
  .tt-auth-shell { grid-template-columns: 1fr; gap: 32px; padding: 32px 20px 48px; }
}

/* Auth card — the form */
.tt-auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 40px 40px 36px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 22px;
  position: relative;
  isolation: isolate;
}
.tt-auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 0%, var(--gold-soft) 100%);
  opacity: .6;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 560px) {
  .tt-auth-card { padding: 28px 24px; border-radius: 22px; }
}

.tt-auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--line);
  width: fit-content;
  font-size: 0.78rem;
  color: var(--text-2);
}
.tt-auth-eyebrow::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--gold);
  display: inline-block;
  flex-shrink: 0;
}

.tt-auth-card h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--text);
}
.tt-auth-card .tt-lead { font-size: 0.98rem; margin-top: -8px; }

/* Form fields */
.tt-form {
  display: grid;
  gap: 14px;
}
.tt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) { .tt-form-row { grid-template-columns: 1fr; } }

.tt-field {
  display: grid;
  gap: 6px;
}
.tt-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tt-field label a {
  font-size: 0.78rem;
  color: var(--gold-deep);
  text-decoration: none;
  font-weight: 600;
}
.tt-field label a:hover { text-decoration: underline; }

.tt-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.98rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.tt-input:hover { border-color: color-mix(in srgb, var(--text) 28%, var(--line)); }
.tt-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-soft);
}
.tt-input::placeholder { color: var(--text-3); }

.tt-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.tt-checkbox input { accent-color: var(--gold-deep); width: 16px; height: 16px; }

/* Buttons sit at full width inside form */
.tt-form .tt-btn { width: 100%; height: 50px; font-size: 1rem; }

/* Auth divider */
.tt-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-3);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tt-divider::before, .tt-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.tt-auth-foot {
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-2);
}
.tt-auth-foot a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid var(--gold);
}
.tt-auth-foot a:hover { color: var(--gold-deep); }

/* Auth aside — illustration / value-prop side */
.tt-auth-aside {
  display: grid;
  gap: 24px;
  position: relative;
}
.tt-auth-aside-card {
  background: var(--ink);
  color: #f5f3eb;
  border-radius: var(--r-xl);
  padding: 40px 36px;
  display: grid;
  gap: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.tt-auth-aside-card::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 380px; height: 380px;
  background: radial-gradient(closest-side, var(--gold-soft), transparent 70%);
  pointer-events: none;
}
.tt-auth-aside-card > * { position: relative; }
.tt-auth-aside-card h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  color: #f5f3eb;
  text-wrap: balance;
}
.tt-auth-aside-card .tt-lead { color: #b8b8c6; font-size: 0.95rem; }
.tt-auth-aside-card .tt-eyebrow { color: var(--gold-2); }

.tt-aside-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.tt-aside-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 16px;
}
.tt-aside-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f5f3eb;
}
.tt-aside-stat strong em { font-style: normal; color: var(--gold-2); }
.tt-aside-stat span { color: #b8b8c6; font-size: 0.8rem; }

/* Mini phone in auth aside */
.tt-aside-mini-phone {
  display: grid;
  place-items: center;
  padding-top: 6px;
}
.tt-aside-mini-phone .tt-phone { width: 220px; }
.tt-aside-mini-phone .tt-float-card { display: none; }
@media (max-width: 940px) { .tt-auth-aside { display: none; } }

/* Auth header bar */
.tt-auth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 32px;
  gap: 16px;
  flex-wrap: wrap;
}
.tt-auth-header .tt-brand { font-size: 1.1rem; }
.tt-auth-header-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-2);
}
.tt-auth-header-meta a { color: var(--text); font-weight: 600; text-decoration: none; }

/* Auth footer line */
.tt-auth-footline {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 32px 32px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--text-3);
}
.tt-auth-footline a { color: var(--text-2); text-decoration: none; margin-left: 18px; }
.tt-auth-footline a:hover { color: var(--text); }

/* =============================================================================
   DASHBOARD REFRESH — sits inside existing .page-grid + sidebar
   ============================================================================= */
.tt-dash {
  display: grid;
  gap: 20px;
  font-family: var(--font-body);
  color: var(--text);
}

.tt-dash-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--ink);
  color: #f5f3eb;
  padding: 36px 36px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
  gap: 36px;
  align-items: stretch;
  box-shadow: var(--shadow);
}
.tt-dash-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 480px; height: 480px;
  background: radial-gradient(closest-side, var(--gold-soft), transparent 70%);
  pointer-events: none;
}
.tt-dash-hero > * { position: relative; z-index: 1; }
@media (max-width: 820px) {
  .tt-dash-hero { grid-template-columns: 1fr; padding: 28px 24px; gap: 24px; }
}

.tt-dash-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  width: fit-content;
  font-size: 0.78rem;
  color: #d8d6cc;
}
.tt-dash-hero-eyebrow b {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--gold); color: var(--ink);
  display: grid; place-items: center;
  font-size: 0.64rem; font-weight: 800;
}

.tt-dash-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 16px 0 10px;
  color: #f5f3eb;
}
.tt-dash-hero p { color: #b8b8c6; max-width: 56ch; margin: 0; }

.tt-dash-hero-cta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 20px;
}
.tt-dash-hero-cta .tt-btn-gold { color: var(--ink); }
.tt-dash-hero-cta .tt-btn-ghost { color: #f5f3eb; border-color: rgba(255,255,255,.18); }
.tt-dash-hero-cta .tt-btn-ghost:hover { background: rgba(255,255,255,.05); }

/* Wallet balance card on the right */
.tt-dash-balance {
  background: linear-gradient(140deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--ink);
  border-radius: 20px;
  padding: 24px 26px;
  display: grid;
  gap: 16px;
  position: relative;
  overflow: hidden;
  align-self: stretch;
}
.tt-dash-balance::before {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 260px; height: 260px;
  background: radial-gradient(closest-side, rgba(255,255,255,.4), transparent 70%);
  pointer-events: none;
}
.tt-dash-balance > * { position: relative; }
.tt-dash-balance-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: .75;
}
.tt-dash-balance-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.tt-dash-balance-row {
  display: flex; gap: 8px;
  margin-top: 4px;
}
.tt-dash-balance-row a {
  flex: 1;
  background: var(--ink);
  color: var(--paper);
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s;
}
.tt-dash-balance-row a:hover { transform: translateY(-1px); }
.tt-dash-balance-row a.ghost {
  background: rgba(10,10,15,.12);
  color: var(--ink);
}
.tt-dash-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px dashed rgba(10,10,15,.25);
  font-size: 0.78rem;
}
.tt-dash-meta div { display: grid; gap: 2px; }
.tt-dash-meta b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}

/* Quick stats row */
.tt-dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.tt-dash-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 22px;
  display: grid;
  gap: 8px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tt-dash-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold) 30%, var(--line)); }
.tt-dash-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.tt-dash-stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}
.tt-dash-stat-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.8rem; font-weight: 600;
  width: fit-content;
}
.tt-dash-stat-trend.up { color: var(--green); }
.tt-dash-stat-trend.down { color: var(--red); }

/* Quick actions grid */
.tt-dash-quicks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.tt-quick {
  display: grid;
  gap: 10px;
  padding: 22px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.tt-quick:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold) 30%, var(--line)); }
.tt-quick-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--gold-2);
  display: grid; place-items: center;
}
.tt-quick-ic svg { width: 22px; height: 22px; }
.tt-quick h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tt-quick p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.45;
}
.tt-quick-arrow {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
}
.tt-quick-arrow::after { content: " →"; }

/* Section header */
.tt-dash-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.tt-dash-sec-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.tt-dash-sec-head a {
  font-size: 0.86rem;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tt-dash-sec-head a:hover { color: var(--gold-deep); }

/* Two-column content grid */
.tt-dash-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
}
@media (max-width: 940px) { .tt-dash-cols { grid-template-columns: 1fr; } }

.tt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 26px;
  display: grid;
  gap: 16px;
}
.tt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tt-card-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tt-card-head .tt-eyebrow { display: flex; }

/* Transaction list */
.tt-tx-list {
  display: grid;
  gap: 2px;
}
.tt-tx-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.tt-tx-row:first-child { border-top: 0; }
.tt-tx-ic {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--gold-soft);
  color: var(--gold-deep);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
}
.tt-tx-meta {
  display: grid; gap: 2px;
  font-size: 0.92rem;
  min-width: 0;
}
.tt-tx-meta b {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-tx-meta span {
  color: var(--text-3);
  font-size: 0.8rem;
}
.tt-tx-amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  text-align: right;
}
.tt-tx-amt.neg { color: var(--text); }
.tt-tx-amt.pos { color: var(--green); }

.tt-tx-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-deep);
}
.tt-tx-status.ok { background: rgba(31,138,91,.12); color: var(--green); }
.tt-tx-status.fail { background: rgba(216,73,47,.12); color: var(--red); }
.tt-tx-status.pending { background: var(--gold-soft); color: var(--gold-deep); }

.tt-empty {
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--text-3);
  text-align: center;
  font-size: 0.9rem;
}

/* Service spotlight column items */
.tt-svc-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
}
.tt-svc-row:first-child { border-top: 0; }
.tt-svc-row-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--gold-2);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
}
.tt-svc-row-meta b {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
}
.tt-svc-row-meta span {
  color: var(--text-3);
  font-size: 0.82rem;
}
.tt-svc-row-go {
  color: var(--gold-deep);
  font-weight: 700;
  font-size: 0.86rem;
}
.tt-svc-row:hover .tt-svc-row-go::after { transform: translateX(3px); }
.tt-svc-row-go::after { content: "→"; display: inline-block; margin-left: 4px; transition: transform .15s; }

/* Promo/announcement strip */
.tt-promo {
  background: linear-gradient(110deg, var(--ink) 0%, #1c1c28 100%);
  color: #f5f3eb;
  border-radius: 18px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.tt-promo::before {
  content: "";
  position: absolute;
  inset: -40% auto auto -10%;
  width: 320px; height: 320px;
  background: radial-gradient(closest-side, var(--gold-soft), transparent 70%);
  pointer-events: none;
}
.tt-promo > * { position: relative; }
.tt-promo h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: #f5f3eb;
}
.tt-promo p {
  margin: 0;
  color: #b8b8c6;
  font-size: 0.92rem;
  max-width: 56ch;
}
@media (max-width: 720px) {
  .tt-promo { grid-template-columns: 1fr; }
}