/* ============================================================
   Tinkaso — Landing Page CSS  (redesign 2026)
   Palette
     Primary green  : #02c062
     Lime accent    : #aaf40f
     Light bg       : #F8FAFC
     Title text     : #0c0d0c
     Body text      : #181818
     Muted          : #6b7280
     Dark section   : #0c0d0c
     Border         : #e5e7eb
   No colour gradients — solid blocks only.
   ============================================================ */

/* ── 1. Variables ──────────────────────────────────────────── */
:root {
  --tl-green    : #02c062;
  --tl-lime     : #aaf40f;
  --tl-white    : #F8FAFC;
  --tl-title    : #0c0d0c;
  --tl-body     : #181818;
  --tl-muted    : #6b7280;
  --tl-dark     : #0c0d0c;
  --tl-dark2    : #13150f;
  --tl-border   : #e5e7eb;
  --tl-light    : #f3f4f6;
  --tl-r        : 12px;
  --tl-r-sm     : 8px;
  --tl-r-lg     : 20px;
  --tl-shadow   : 0 2px 12px rgba(0,0,0,.08);
  --tl-shadow-md: 0 4px 24px rgba(0,0,0,.12);
}

/* ── 2. Base ───────────────────────────────────────────────── */
body[data-profile='public'] {
  background: #fff;
  color: var(--tl-body);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.tk-public-shell {
  overflow-x: hidden;
}

/* ── 3. Container ──────────────────────────────────────────── */
.tl-container {
  width: min(1200px, calc(100% - 2rem));
  margin-inline: auto;
}

/* ── 4. Buttons ────────────────────────────────────────────── */
.tl-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: 999px;
  font-weight: 700; font-size: .9375rem;
  text-decoration: none;
  transition: opacity .18s, transform .18s;
  border: 2px solid transparent;
  cursor: pointer;
}
.tl-btn:hover { opacity: .88; transform: translateY(-1px); }

.tl-btn--green {
  background: var(--tl-green);
  color: #fff;
  border-color: var(--tl-green);
}
.tl-btn--dark {
  background: var(--tl-dark);
  color: #fff;
  border-color: var(--tl-dark);
}
.tl-btn--outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.45);
}
.tl-btn--outline-dark {
  background: transparent;
  color: var(--tl-dark);
  border-color: var(--tl-dark);
}
.tl-btn--outline-green {
  background: transparent;
  color: var(--tl-green);
  border-color: var(--tl-green);
}
.tl-btn--lime {
  background: var(--tl-lime);
  color: var(--tl-dark);
  border-color: var(--tl-lime);
}
.tl-btn--sm {
  padding: .5rem 1.2rem;
  font-size: .8125rem;
}

/* keep old btn classes working (auth pages) */
.tk-public-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.4rem; border-radius: 999px;
  font-weight: 700; font-size: .875rem; text-decoration: none;
  background: var(--tl-green); color: #fff;
  transition: opacity .18s;
}
.tk-public-btn:hover { opacity: .88; color: #fff; }
.tk-public-btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.4rem; border-radius: 999px;
  font-weight: 700; font-size: .875rem; text-decoration: none;
  background: transparent; color: var(--tl-body);
  border: 1.5px solid var(--tl-border);
  transition: border-color .18s;
}
.tk-public-btn-outline:hover { border-color: var(--tl-green); color: var(--tl-green); }
.tk-public-link { color: var(--tl-green); text-decoration: none; font-weight: 600; }
.tk-public-link:hover { text-decoration: underline; }

/* ── 5. Navbar ─────────────────────────────────────────────── */
.tl-nav {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--tl-border);
}
.tl-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 66px;
}
.tl-nav__logo img { height: 38px; width: auto; display: block; }
.tl-nav__links {
  display: none; align-items: center; gap: 1.75rem;
}
.tl-nav__links a {
  font-weight: 600; font-size: .9rem;
  color: var(--tl-body); text-decoration: none;
  transition: color .15s;
}
.tl-nav__links a:hover { color: var(--tl-green); }
.tl-nav__actions {
  display: flex; align-items: center; gap: .65rem;
}
.tl-nav__toggle {
  width: 42px; height: 42px; border: 1.5px solid var(--tl-border);
  border-radius: var(--tl-r-sm); background: transparent;
  color: var(--tl-body); font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* ── 6. Mobile menu ────────────────────────────────────────── */
.tl-mobile-menu {
  display: none; flex-direction: column; gap: .1rem;
  background: #fff; border-bottom: 1px solid var(--tl-border);
  padding: .75rem 1rem;
}
.tl-mobile-menu.is-open { display: flex; }
.tl-mobile-menu a {
  padding: .65rem .5rem;
  font-weight: 600; font-size: .95rem;
  color: var(--tl-body); text-decoration: none;
  border-radius: var(--tl-r-sm);
}
.tl-mobile-menu a:hover { background: var(--tl-light); color: var(--tl-green); }

/* ── 7. Hero ───────────────────────────────────────────────── */
.tl-hero {
  background: var(--tl-dark);
  color: #fff;
}
.tl-hero__inner {
  display: grid;
  gap: 2rem;
  padding: 4rem 0 4.5rem;
}
.tl-hero__badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem 1rem;
  border-radius: 999px;
  background: rgba(170,244,15,.12);
  color: var(--tl-lime);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  width: fit-content;
}
.tl-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800; line-height: 1.1;
  color: #fff; margin: 1rem 0 1.25rem;
}
.tl-hero__title span { color: var(--tl-lime); }
.tl-hero__desc {
  font-size: 1.0625rem; line-height: 1.75;
  color: rgba(255,255,255,.72);
  max-width: 34rem; margin-bottom: 2rem;
}
.tl-hero__ctas {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem;
}
.tl-hero__stats {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
}
.tl-hero__stat strong {
  display: block; font-size: 1.75rem; font-weight: 800;
  color: var(--tl-lime); line-height: 1;
}
.tl-hero__stat span {
  font-size: .8rem; color: rgba(255,255,255,.55);
  margin-top: .2rem; display: block;
}

/* Hero visual panel */
.tl-hero__visual {
  background: #1a1c18;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--tl-r-lg);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.tl-game-tile {
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--tl-r);
}
.tl-game-tile__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--tl-r-sm); font-size: 1.1rem;
}
.tl-game-tile__icon--green  { background: var(--tl-green); }
.tl-game-tile__icon--lime   { background: var(--tl-lime); }
.tl-game-tile__icon--white  { background: rgba(255,255,255,.15); }
.tl-game-tile__name { font-weight: 700; font-size: .875rem; color: #fff; }
.tl-game-tile__sub  { font-size: .7rem; color: rgba(255,255,255,.45); }
.tl-game-tile__pill {
  margin-left: auto; flex-shrink: 0;
  padding: .25rem .7rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700;
  background: rgba(2,192,98,.15); color: var(--tl-lime);
}
.tl-hero__free-badge {
  margin-top: auto;
  padding: 1rem;
  background: var(--tl-green);
  border-radius: var(--tl-r);
  text-align: center;
  font-weight: 800; font-size: 1rem; color: #fff;
}

/* ── 8. Section utility ────────────────────────────────────── */
.tl-section {
  padding: 5rem 0;
}
.tl-section--light  { background: var(--tl-light); }
.tl-section--white  { background: #fff; }
.tl-section--dark   { background: var(--tl-dark); color: #fff; }
.tl-section--green  { background: var(--tl-green); color: #fff; }
.tl-section--sm     { padding: 2.5rem 0; }

.tl-section__label {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .9rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 1rem;
}
.tl-section__label--green { background: rgba(2,192,98,.12); color: var(--tl-green); }
.tl-section__label--lime  { background: rgba(170,244,15,.15); color: #4a7a00; }
.tl-section__label--white { background: rgba(255,255,255,.15); color: #fff; }
.tl-section__label--dark  { background: rgba(12,13,12,.08); color: var(--tl-title); }

.tl-section__title {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 800; color: var(--tl-title); line-height: 1.2;
  margin: 0 0 1rem;
}
.tl-section--dark  .tl-section__title,
.tl-section--green .tl-section__title { color: #fff; }

.tl-section__lead {
  font-size: 1.0625rem; line-height: 1.75;
  color: var(--tl-muted); max-width: 46rem;
  margin: 0 0 2.5rem;
}
.tl-section--dark  .tl-section__lead,
.tl-section--green .tl-section__lead { color: rgba(255,255,255,.7); }

/* ── 9. Gift Cards Carousel ────────────────────────────────── */
.tl-gc-carousel-wrap {
  position: relative;
}
.tl-gc-carousel .slick-track { display: flex; gap: 0; }
.tl-gc-carousel .slick-slide { padding: 0 .5rem; height: auto; }
.tl-gc-carousel .slick-slide > div { height: 100%; }
.tl-gc-carousel .slick-list { overflow: hidden; padding: .5rem 0 1rem; }
.tl-gc-carousel .slick-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 40px; height: 40px;
  background: #fff; border: 1px solid var(--tl-border);
  border-radius: 50%;
  display: flex !important; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--tl-body); cursor: pointer;
}
.tl-gc-carousel .slick-prev { left: -20px; }
.tl-gc-carousel .slick-next { right: -20px; }
.tl-gc-carousel .slick-arrow:hover { background: var(--tl-green); color: #fff; border-color: var(--tl-green); }

.tl-gc-card {
  background: #fff;
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-r-lg);
  overflow: hidden;
  height: 100%;
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.tl-gc-card:hover {
  box-shadow: var(--tl-shadow-md);
  transform: translateY(-3px);
}
.tl-gc-card__img {
  width: 100%; aspect-ratio: 16/9;
  background: var(--tl-light);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--tl-muted);
}
.tl-gc-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tl-gc-card__body { padding: .9rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; }
.tl-gc-card__cat {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tl-green); margin-bottom: .3rem;
}
.tl-gc-card__name {
  font-weight: 700; font-size: .9rem; color: var(--tl-title);
  line-height: 1.3; flex: 1;
}
.tl-gc-card__price {
  margin-top: .6rem; font-size: .8rem; color: var(--tl-muted);
}
.tl-gc-card__price strong { color: var(--tl-title); font-size: .9rem; }

/* ── 10. Quiénes Somos ─────────────────────────────────────── */
.tl-about__grid {
  display: grid; gap: 3rem; align-items: center;
}
.tl-about__title {
  font-size: clamp(1.5rem,3vw,2.25rem);
  font-weight: 800; color: var(--tl-title); line-height: 1.2;
  margin: 0 0 1.25rem;
}
.tl-about__text { font-size: 1rem; line-height: 1.8; color: var(--tl-muted); margin: 0 0 1.5rem; }
.tl-about__features { display: grid; gap: .85rem; }
.tl-about__feature {
  display: flex; align-items: flex-start; gap: .75rem;
}
.tl-about__feature-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--tl-r-sm);
  background: rgba(2,192,98,.1); color: var(--tl-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.tl-about__feature-text strong { display: block; font-size: .875rem; font-weight: 700; color: var(--tl-title); }
.tl-about__feature-text span   { font-size: .8rem; color: var(--tl-muted); }

.tl-about__numbers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.tl-about__number {
  background: var(--tl-light);
  border-radius: var(--tl-r-lg); padding: 1.5rem;
  text-align: center;
}
.tl-about__number strong {
  display: block; font-size: 2.25rem; font-weight: 800;
  color: var(--tl-title); line-height: 1;
}
.tl-about__number span { font-size: .8rem; color: var(--tl-muted); margin-top: .3rem; display: block; }

/* ── 11. Strip CTA ─────────────────────────────────────────── */
.tl-strip {
  padding: 2rem 0;
}
.tl-strip__inner {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 1.5rem;
}
.tl-strip__text strong { font-size: 1.5rem; font-weight: 800; display: block; }
.tl-strip__text span   { font-size: .9rem; opacity: .8; }

/* ── 12. Games Section ─────────────────────────────────────── */
.tl-games__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.tl-game-card {
  background: #fff; border: 1px solid var(--tl-border);
  border-radius: var(--tl-r-lg); padding: 1.5rem;
  display: flex; flex-direction: column; gap: .75rem;
  transition: box-shadow .2s, transform .2s;
}
.tl-game-card:hover { box-shadow: var(--tl-shadow-md); transform: translateY(-3px); }
.tl-game-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--tl-r); font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
.tl-game-card__icon--green  { background: rgba(2,192,98,.12); color: var(--tl-green); }
.tl-game-card__icon--lime   { background: rgba(170,244,15,.2); color: #3d6400; }
.tl-game-card__icon--dark   { background: rgba(12,13,12,.07); color: var(--tl-title); }
.tl-game-card__icon--purple { background: rgba(124,58,237,.1); color: #7c3aed; }
.tl-game-card__name { font-size: 1.0625rem; font-weight: 800; color: var(--tl-title); margin: 0; }
.tl-game-card__desc { font-size: .875rem; color: var(--tl-muted); line-height: 1.6; flex: 1; }
.tl-game-card__link {
  font-size: .8125rem; font-weight: 700; color: var(--tl-green);
  text-decoration: none; display: inline-flex; align-items: center; gap: .3rem;
}
.tl-game-card__link:hover { text-decoration: underline; }

/* ── 13. Winners ───────────────────────────────────────────── */
.tl-winners__grid { display: grid; gap: .75rem; }
.tl-winner-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem;
  background: #fff; border: 1px solid var(--tl-border);
  border-radius: var(--tl-r);
}
.tl-winner-row__icon {
  width: 40px; height: 40px; border-radius: var(--tl-r-sm); flex-shrink: 0;
  background: rgba(2,192,98,.1); color: var(--tl-green);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.tl-winner-row__name { font-weight: 700; font-size: .875rem; color: var(--tl-title); }
.tl-winner-row__game { font-size: .75rem; color: var(--tl-muted); }
.tl-winner-row__amount {
  margin-left: auto; font-weight: 800; font-size: .9rem; color: var(--tl-green);
}

/* ── 14. CTA Banner ────────────────────────────────────────── */
.tl-cta-banner {
  background: var(--tl-dark);
  padding: 5rem 0;
}
.tl-cta-banner__inner { text-align: center; }
.tl-cta-banner__tag {
  display: inline-block; padding: .35rem 1rem;
  border-radius: 999px; background: rgba(170,244,15,.15); color: var(--tl-lime);
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 1.25rem;
}
.tl-cta-banner__title {
  font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800;
  color: #fff; line-height: 1.15; margin: 0 auto 1rem; max-width: 40rem;
}
.tl-cta-banner__title em { color: var(--tl-lime); font-style: normal; }
.tl-cta-banner__sub {
  font-size: 1rem; color: rgba(255,255,255,.6);
  max-width: 34rem; margin: 0 auto 2.25rem;
}
.tl-cta-banner__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ── 15. Business Section ──────────────────────────────────── */
.tl-biz__grid { display: grid; gap: 3rem; align-items: start; }
.tl-biz__title {
  font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 800;
  color: var(--tl-title); line-height: 1.2; margin: 0 0 1.25rem;
}
.tl-biz__lead { font-size: 1rem; line-height: 1.8; color: var(--tl-muted); margin: 0 0 2rem; }
.tl-biz__types { display: grid; gap: .6rem; }
.tl-biz__type {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1rem; border-radius: var(--tl-r);
  background: var(--tl-light); font-size: .875rem;
}
.tl-biz__type i { color: var(--tl-green); font-size: 1.1rem; width: 20px; }
.tl-biz__type strong { font-weight: 700; color: var(--tl-title); }
.tl-biz__type span   { color: var(--tl-muted); font-size: .8rem; margin-left: auto; }

.tl-biz__panel {
  background: var(--tl-dark); color: #fff;
  border-radius: var(--tl-r-lg); padding: 2rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.tl-biz__panel h3 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.tl-biz__panel p  { color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.7; margin: 0; }
.tl-biz__benefit {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem; background: rgba(255,255,255,.06);
  border-radius: var(--tl-r); border: 1px solid rgba(255,255,255,.08);
}
.tl-biz__benefit i { color: var(--tl-lime); font-size: 1.15rem; margin-top: .1rem; }
.tl-biz__benefit strong { display: block; font-size: .875rem; }
.tl-biz__benefit span   { font-size: .78rem; color: rgba(255,255,255,.5); }

/* ── 16. Plans ─────────────────────────────────────────────── */
.tl-plans__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.tl-plan-card {
  background: #fff; border: 1.5px solid var(--tl-border);
  border-radius: var(--tl-r-lg); padding: 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: box-shadow .2s, transform .2s;
  position: relative;
}
.tl-plan-card:hover { box-shadow: var(--tl-shadow-md); transform: translateY(-3px); }
.tl-plan-card--featured {
  border-color: var(--tl-green);
  box-shadow: 0 0 0 4px rgba(2,192,98,.1);
}
.tl-plan-card__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--tl-green); color: #fff;
  padding: .3rem 1rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.tl-plan-card__name { font-size: 1.1rem; font-weight: 800; color: var(--tl-title); }
.tl-plan-card__desc { font-size: .875rem; color: var(--tl-muted); line-height: 1.6; }
.tl-plan-card__price {
  display: flex; align-items: flex-end; gap: .3rem;
  padding: 1rem 0; border-top: 1px solid var(--tl-border); border-bottom: 1px solid var(--tl-border);
}
.tl-plan-card__price strong { font-size: 2.5rem; font-weight: 800; color: var(--tl-title); line-height: 1; }
.tl-plan-card__price span   { font-size: .85rem; color: var(--tl-muted); margin-bottom: .2rem; }
.tl-plan-card__features { display: grid; gap: .6rem; flex: 1; }
.tl-plan-card__feature {
  display: flex; align-items: center; gap: .6rem;
  font-size: .875rem; color: var(--tl-body);
}
.tl-plan-card__feature i { color: var(--tl-green); font-size: 1rem; }

/* ── 17. Events ────────────────────────────────────────────── */
.tl-events__grid { display: grid; gap: 1.25rem; }
.tl-event-card {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: #fff; border: 1px solid var(--tl-border);
  border-radius: var(--tl-r-lg);
  transition: box-shadow .2s;
}
.tl-event-card:hover { box-shadow: var(--tl-shadow); }
.tl-event-card__date {
  flex-shrink: 0; width: 56px; text-align: center;
  background: var(--tl-light); border-radius: var(--tl-r); padding: .6rem .4rem;
}
.tl-event-card__date strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--tl-green); line-height: 1; }
.tl-event-card__date span   { font-size: .65rem; text-transform: uppercase; color: var(--tl-muted); letter-spacing: .04em; }
.tl-event-card__body h4 { font-size: 1rem; font-weight: 700; color: var(--tl-title); margin: 0 0 .3rem; }
.tl-event-card__body p  { font-size: .85rem; color: var(--tl-muted); margin: 0; }
.tl-event-card__tag {
  margin-left: auto; flex-shrink: 0;
  padding: .25rem .75rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700;
}
.tl-event-card__tag--green  { background: rgba(2,192,98,.1); color: var(--tl-green); }
.tl-event-card__tag--lime   { background: rgba(170,244,15,.2); color: #3d6400; }

/* ── 18. Contact ───────────────────────────────────────────── */
.tl-contact__grid { display: grid; gap: 3rem; }
.tl-contact__info h3 { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 1rem; }
.tl-contact__info p  { color: rgba(255,255,255,.65); line-height: 1.8; margin: 0 0 2rem; }
.tl-contact__items { display: grid; gap: .85rem; }
.tl-contact__item {
  display: flex; align-items: center; gap: .85rem;
  color: rgba(255,255,255,.75); font-size: .9rem;
}
.tl-contact__item i { color: var(--tl-lime); font-size: 1.2rem; width: 20px; }

.tl-contact__form { display: grid; gap: .9rem; }
.tl-contact__row  { display: grid; gap: .9rem; }
.tl-contact__field label {
  display: block; font-size: .8rem; font-weight: 700;
  color: rgba(255,255,255,.75); margin-bottom: .4rem;
}
.tl-contact__field input,
.tl-contact__field textarea {
  width: 100%; padding: .8rem 1rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--tl-r); color: #fff; font: inherit;
  outline: none; transition: border-color .15s;
}
.tl-contact__field input::placeholder,
.tl-contact__field textarea::placeholder { color: rgba(255,255,255,.3); }
.tl-contact__field input:focus,
.tl-contact__field textarea:focus { border-color: var(--tl-green); }
.tl-contact__field textarea { resize: vertical; min-height: 110px; }

/* ── 19. Footer ────────────────────────────────────────────── */
.tl-footer {
  background: #0a0b08;
  padding: 3.5rem 0 2rem;
}
.tl-footer__grid {
  display: grid; gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tl-footer__brand img { height: 36px; display: block; margin-bottom: 1rem; }
.tl-footer__brand p   { font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.7; max-width: 22rem; }
.tl-footer__col h5 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.4); margin: 0 0 1rem; }
.tl-footer__col a  { display: block; font-size: .875rem; color: rgba(255,255,255,.65); text-decoration: none; margin-bottom: .55rem; }
.tl-footer__col a:hover { color: var(--tl-green); }
.tl-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem;
  padding-top: 1.5rem;
  font-size: .8rem; color: rgba(255,255,255,.35);
}
.tl-footer__bottom a { color: rgba(255,255,255,.45); text-decoration: none; }
.tl-footer__bottom a:hover { color: #fff; }

/* ── 20. Responsive ────────────────────────────────────────── */
@media (min-width: 640px) {
  .tl-contact__row { grid-template-columns: 1fr 1fr; }
  .tl-events__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .tl-nav__links { display: flex; }
  .tl-nav__toggle { display: none; }

  .tl-hero__inner { grid-template-columns: 1fr 1fr; align-items: center; }
  .tl-about__grid { grid-template-columns: 1fr 1fr; }
  .tl-biz__grid   { grid-template-columns: 1fr 1fr; }
  .tl-contact__grid { grid-template-columns: 1fr 1fr; }

  .tl-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .tl-winners__grid { grid-template-columns: 1fr 1fr; }
  .tl-events__grid  { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .tl-games__grid { grid-template-columns: repeat(4, 1fr); }
  .tl-plans__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 21. Auth pages (keep compatibility) ───────────────────── */
body[data-profile='public'] .tk-section-kicker {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .9rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700;
  background: rgba(2,192,98,.1); color: var(--tl-green);
}
.tk-auth-shell {
  width: min(1180px, calc(100% - 1.25rem)); margin: 0 auto;
  min-height: 100vh; display: grid; gap: 1rem;
  align-items: center; padding: 1.25rem 0 2rem;
}
.tk-auth-showcase,.tk-auth-card {
  padding: 1.4rem; display: flex;
  flex-direction: column; justify-content: center; align-items: stretch;
  border-radius: 20px;
}
.tk-auth-showcase > *,.tk-auth-card > * { width: 100%; }
.tk-auth-showcase {
  position: relative; overflow: hidden;
  background: var(--tl-dark); color: #fff;
}
.tk-auth-showcase__list { display: grid; gap: .85rem; margin-top: 1.5rem; }
.tk-auth-benefit {
  display: flex; gap: .8rem; align-items: flex-start; padding: .95rem;
  border-radius: 22px; background: rgba(255,255,255,.07);
}
.tk-auth-card { background: rgba(255,255,255,.96); }
.tk-auth-header { margin-bottom: 1.3rem; }
.tk-form-grid { display: grid; gap: 1rem; }
.tk-form-grid--2 { grid-template-columns: 1fr; }
.tk-field { display: grid; gap: .45rem; }
.tk-field label { font-weight: 700; font-size: .92rem; }
.tk-input-wrap {
  display: flex; align-items: center; gap: .65rem;
  min-height: 58px; padding: 0 1rem; border-radius: 18px;
  border: 1px solid rgba(17,32,59,.08); background: #f7fbff;
}
.tk-input-wrap input,.tk-input-wrap select {
  width: 100%; border: 0; background: transparent;
  outline: none; font: inherit; color: var(--tl-body);
}
.tk-input-wrap i,.tk-input-wrap button { color: var(--tl-muted); }
.tk-input-wrap button { border: 0; background: transparent; }
.tk-field small,.tk-inline-note { color: var(--tl-muted); }
.tk-validation-row,.tk-password-strength,.tk-auth-divider,
.tk-social-buttons,.tk-check-row,.tk-inline-meta {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
}
.tk-password-strength span {
  height: 8px; flex: 1; min-width: 60px;
  border-radius: 999px; background: #dfebf7;
}
.tk-password-strength span.is-active { background: var(--tl-green); }
.tk-social-buttons { display: grid; grid-template-columns: 1fr 1fr; }
.tk-social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem; min-height: 50px; border-radius: 18px;
  border: 1px solid rgba(17,32,59,.08); background: #fff;
  color: var(--tl-body); font-weight: 700;
}
.tk-auth-divider { justify-content: center; color: var(--tl-muted); font-size: .85rem; }
.tk-auth-divider::before,.tk-auth-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(17,32,59,.08);
}
.tk-feedback-success { color: #10966f; }
.tk-feedback-error   { color: #de3b62; }
.tk-mobile-code      { font-weight: 700; color: var(--tl-green); }
.tk-auth-copy,.tk-winner-card small { color: var(--tl-muted); line-height: 1.7; }
@media (min-width: 768px) {
  .tk-auth-shell { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: stretch; }
  .tk-form-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tk-auth-showcase,.tk-auth-card { min-height: clamp(540px,calc(100vh - 3.25rem),760px); }
}
@media (min-width: 992px) {
  .tk-auth-shell { grid-template-columns: .96fr 1.04fr; }
}