/* =========================================================
   TALLYKNOT LOCAL -- landing page (local/index.php)
   Only what this page adds (.tl-*). The navbar, buttons, section titles, feature cards,
   trust bar, download box and footer come from common.css (Local's copy of the site's); the browser preview,
   steps and the two-card band come from web_app.css (a copy of the main site's, in this folder).
   Markup: local/index.php + local/components/. Colours: common.css's :root tokens.
========================================================= */

/* "Local" chip beside the brand (navbar, mobile menu, the preview's sidebar) */
.tl-nav-chip { padding:3px 9px; border-radius:100px; background:var(--tn-primary-soft); border:1px solid #bfdbfe; color:var(--tn-primary); font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.tnw-brand .tl-nav-chip { padding:2px 7px; border-color:transparent; background:rgba(37,99,235,.3); color:#bfdbfe; font-size:8.5px; }
.tl-nav-lock { margin-left:auto; width:auto !important; font-size:9px !important; color:#64748b; }

/* ---------- HERO (dark, with glow) ---------- */
.tl-hero { position:relative; isolation:isolate; overflow:hidden; padding:96px 0 104px; background:#0b1120; color:#fff; }
.tl-hero-orb { position:absolute; z-index:-1; border-radius:50%; filter:blur(80px); pointer-events:none; }
.tl-hero-orb-one { top:-180px; right:-120px; width:620px; height:620px; background:radial-gradient(circle,rgba(37,99,235,.55),rgba(37,99,235,0) 70%); animation:tlDrift 14s ease-in-out infinite; }
.tl-hero-orb-two { bottom:-260px; left:-160px; width:640px; height:640px; background:radial-gradient(circle,rgba(124,58,237,.42),rgba(124,58,237,0) 70%); animation:tlDrift 18s ease-in-out -6s infinite reverse; }
.tl-hero-grid { position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(148,163,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.07) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 72%); mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 72%); pointer-events:none; }
@keyframes tlDrift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-40px,30px) scale(1.08); } }

.tl-hero-badge { display:inline-flex; align-items:center; gap:10px; padding:8px 15px; border:1px solid rgba(148,163,184,.28); border-radius:100px; background:rgba(15,23,42,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#e2e8f0; font-size:13px; font-weight:700; }
.tl-pulse { position:relative; width:9px; height:9px; border-radius:50%; background:#4ade80; }
.tl-pulse::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid #4ade80; animation:tlPing 2s ease-out infinite; }
@keyframes tlPing { 0% { transform:scale(.5); opacity:.8; } 100% { transform:scale(1.6); opacity:0; } }

.tl-hero-title { margin:22px 0 20px; font-size:58px; line-height:1.06; font-weight:800; letter-spacing:-2.2px; color:#fff; }
.tl-hero-title span { background:linear-gradient(100deg,#60a5fa 0%,#a78bfa 48%,#f0abfc 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.tl-hero-copy { max-width:560px; margin:0; color:#cbd5e1; font-size:18px; line-height:1.72; }
.tl-hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
.tl-hero-login { margin:20px 0 0; color:#94a3b8; font-size:14px; }
.tl-hero-login a { color:#93c5fd; font-weight:700; }
.tl-hero-login a:hover { color:#fff; }
.tl-hero-login a i { font-size:11px; margin-left:3px; }
.tl-hero-points { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; color:#e2e8f0; font-size:14px; font-weight:600; }
.tl-hero-points i { margin-right:6px; color:#4ade80; }

/* The main call to action: a glowing gradient button (hero + final box). */
.tl-btn-glow { position:relative; display:inline-flex; align-items:center; gap:13px; padding:12px 22px; border-radius:12px; background:linear-gradient(135deg,#3b82f6 0%,#6366f1 55%,#8b5cf6 100%); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 18px 40px -8px rgba(79,70,229,.7); transition:transform .2s ease, box-shadow .2s ease; }
.tl-btn-glow:hover { color:#fff; transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,.22) inset, 0 24px 50px -8px rgba(79,70,229,.9); }
.tl-btn-glow i { font-size:24px; }
.tl-btn-glow small { display:block; color:#dbeafe; font-size:10px; text-transform:uppercase; letter-spacing:.03em; }
.tl-btn-glow strong { display:block; font-size:17px; }

/* ---------- HERO PREVIEW: the ledger card + floating chips ---------- */
.tl-prev { position:relative; max-width:440px; margin:0 auto; padding:26px 0; }
.tl-prev-card { position:relative; z-index:2; padding:22px; border:1px solid rgba(255,255,255,.6); border-radius:26px; background:#fff; color:var(--tn-text); box-shadow:0 60px 120px -30px rgba(2,6,23,.9), 0 0 0 10px rgba(255,255,255,.06); transform:perspective(1400px) rotateY(-9deg) rotateX(4deg); transition:transform .5s ease; }
.tl-prev:hover .tl-prev-card { transform:perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.tl-prev-head { display:flex; align-items:center; gap:12px; }
.tl-prev-icon { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; border-radius:14px; background:#dbeafe; color:var(--tn-primary); font-size:19px; }
.tl-prev-head strong { display:block; font-size:16px; font-weight:800; }
.tl-prev-local { display:inline-block; margin-top:4px; padding:2px 8px; border-radius:100px; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:10.5px; font-weight:800; }
.tl-prev-add { display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding:8px 12px; border-radius:9px; background:var(--tn-primary); color:#fff; font-size:12px; font-weight:800; white-space:nowrap; box-shadow:0 8px 18px rgba(37,99,235,.35); }
.tl-prev-balance { margin-top:20px; }
.tl-prev-balance span { display:block; color:var(--tn-muted); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.tl-prev-balance strong { display:block; margin-top:2px; font-size:38px; font-weight:800; letter-spacing:-1.4px; line-height:1.1; }
.tl-prev-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.tl-prev-stats div { padding:11px 13px; border:1px solid var(--tn-border); border-radius:13px; }
.tl-prev-stats span { display:block; color:var(--tn-muted); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.tl-prev-stats strong { display:block; margin-top:3px; font-size:16px; font-weight:800; }
.tl-prev-stats .in { background:var(--tn-green-soft); border-color:#bbf7d0; } .tl-prev-stats .in strong { color:var(--tn-green); }
.tl-prev-stats .out { background:var(--tn-red-soft); border-color:#fecaca; } .tl-prev-stats .out strong { color:var(--tn-red); }
.tl-prev-spark { display:block; width:100%; height:64px; margin-top:14px; }
.tl-prev-spark .line { fill:none; stroke:var(--tn-primary); stroke-width:2.6; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:700; stroke-dashoffset:700; animation:tlDraw 2.2s cubic-bezier(.4,0,.2,1) .4s forwards; }
.tl-prev-spark .area { fill:url(#tlSpark); opacity:0; animation:tlFade 1.4s ease 1.2s forwards; }
@keyframes tlDraw { to { stroke-dashoffset:0; } }
@keyframes tlFade { to { opacity:1; } }
.tl-prev-rows { margin-top:8px; }
.tl-prev-row { display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid #eef2f7; }
.tl-prev-row > i { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:10px; font-size:12px; font-style:normal; }
.tl-prev-row > i.in { background:var(--tn-green-soft); color:var(--tn-green); } .tl-prev-row > i.out { background:var(--tn-red-soft); color:var(--tn-red); }
.tl-prev-row strong { display:block; font-size:13.5px; font-weight:700; }
.tl-prev-row div span { display:block; margin-top:1px; color:var(--tn-muted); font-size:11px; font-weight:600; }
.tl-prev-row b { margin-left:auto; font-size:13.5px; font-weight:800; white-space:nowrap; }
.tl-prev-row b.in { color:var(--tn-green); } .tl-prev-row b.out { color:var(--tn-red); }

.tl-prev-chip { position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid rgba(255,255,255,.7); border-radius:15px; background:rgba(255,255,255,.96); color:var(--tn-text); box-shadow:0 24px 50px -12px rgba(2,6,23,.75); }
.tl-prev-chip strong { display:block; font-size:12.5px; font-weight:800; white-space:nowrap; }
.tl-prev-chip span { display:block; color:var(--tn-muted); font-size:10.5px; font-weight:600; white-space:nowrap; }
.tl-prev-chip-ic { display:grid !important; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:10px; font-size:13px !important; }
.tl-prev-chip-ic.blue { background:var(--tn-primary-soft); color:var(--tn-primary) !important; }
.tl-prev-chip-ic.green { background:var(--tn-green-soft); color:var(--tn-green) !important; }
.tl-prev-chip svg { flex:0 0 38px; width:38px; height:38px; transform:rotate(-90deg); }
.tl-prev-chip circle { fill:none; stroke-width:15; }
.tl-prev-chip-one { top:-6px; right:-34px; animation:tlFloat 5.4s ease-in-out infinite; }
.tl-prev-chip-two { left:-64px; top:55%; animation:tlFloat 6.2s ease-in-out .8s infinite; }
.tl-prev-chip-three { right:-46px; bottom:-22px; animation:tlFloat 5.8s ease-in-out 1.6s infinite; }
@keyframes tlFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

/* ---------- LOCAL vs ONLINE ---------- */
.tl-compare-cards .tnw-side-card { display:flex; flex-direction:column; }
.tl-compare-cards .tnw-side-card ul { margin-bottom:22px; }
.tl-card-btn { margin-top:auto; align-self:flex-start; }
.tnw-sync-ic.tl-or { font-size:15px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }

.tl-compare { max-width:880px; margin:34px auto 0; overflow:hidden; border:1px solid var(--tn-border); border-radius:22px; background:#fff; box-shadow:0 30px 60px -34px rgba(15,23,42,.3); }
.tl-compare table { width:100%; border-collapse:collapse; }
.tl-compare thead th { padding:16px 18px; background:var(--tn-dark); color:#fff; font-size:13px; font-weight:800; letter-spacing:.02em; text-align:center; white-space:nowrap; }
.tl-compare thead th:first-child { text-align:left; color:#94a3b8; font-weight:700; }
.tl-compare thead th i { margin-right:6px; color:#93c5fd; }
.tl-compare thead th:last-child i { color:#4ade80; }
.tl-compare tbody th { padding:14px 18px; border-top:1px solid #eef2f7; font-size:14.5px; font-weight:600; color:#334155; text-align:left; }
.tl-compare tbody td { width:24%; padding:14px 12px; border-top:1px solid #eef2f7; border-left:1px solid #eef2f7; text-align:center; font-size:13.5px; font-weight:700; color:var(--tn-text); }
.tl-compare tbody tr:hover { background:#fafcff; }
.tl-yes { color:var(--tn-green); font-size:18px; }
.tl-no { color:#cbd5e1; font-size:18px; }
.tl-compare-note { max-width:880px; margin:18px auto 0; color:var(--tn-muted); font-size:13.5px; line-height:1.6; text-align:center; }
.tl-compare-note > i { margin-right:5px; color:var(--tn-primary); }
.tl-compare-note a { color:var(--tn-primary); font-weight:700; white-space:nowrap; }
.tl-compare-note a i { font-size:10px; }

/* ---------- ANDROID APP band ---------- */
.tl-app { position:relative; overflow:hidden; padding:58px; border:1px solid #bbf7d0; border-radius:28px; background:radial-gradient(circle at 100% 0,rgba(61,220,132,.2),transparent 46%),linear-gradient(160deg,#f0fdf4 0%,#fff 66%); }
.tl-app-label { display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid #bbf7d0; border-radius:100px; background:#fff; color:#15803d; font-size:13px; font-weight:700; }
.tl-app-label i { color:#3ddc84; font-size:16px; }
.tl-app-title { margin:18px 0 14px; font-size:40px; line-height:1.12; font-weight:800; letter-spacing:-1.5px; }
.tl-app-copy { max-width:560px; margin:0; color:var(--tn-muted); font-size:17px; line-height:1.72; }
.tl-app-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:28px; }
.tl-app .tn-play-button { background:var(--tn-dark); border-color:var(--tn-dark); color:#fff; }
.tl-app .tn-play-button:hover { color:#fff; }
.tl-app .tn-play-button small { color:#94a3b8; }
.tl-app-link { color:#15803d; font-size:14.5px; font-weight:700; }
.tl-app-link:hover { color:#166534; }
.tl-app-link i { font-size:11px; margin-left:3px; }
.tl-app-list { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.tl-app-list li { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--tn-border); border-radius:16px; background:#fff; box-shadow:0 10px 24px -16px rgba(15,23,42,.25); }
.tl-app-list li > i { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:12px; background:var(--tn-green-soft); color:var(--tn-green); font-size:15px; }
.tl-app-list strong { display:block; font-size:14.5px; font-weight:800; }
.tl-app-list span { display:block; margin-top:1px; color:var(--tn-muted); font-size:13px; }

/* ---------- FAQ ---------- */
.tl-faq { max-width:820px; margin:40px auto 0; display:grid; gap:12px; }
.tl-faq details { border:1px solid var(--tn-border); border-radius:16px; background:#fff; transition:border-color .2s ease, box-shadow .2s ease; }
.tl-faq details[open] { border-color:#bfdbfe; box-shadow:0 18px 36px -24px rgba(37,99,235,.45); }
.tl-faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; font-size:16px; font-weight:700; cursor:pointer; list-style:none; }
.tl-faq summary::-webkit-details-marker { display:none; }
.tl-faq summary::after { content:"\2b"; font-family:"Font Awesome 6 Free"; font-weight:900; flex:0 0 auto; color:var(--tn-primary); font-size:14px; transition:transform .2s ease; }
.tl-faq details[open] summary::after { transform:rotate(45deg); }
.tl-faq p { margin:0; padding:0 22px 20px; color:var(--tn-muted); font-size:15px; line-height:1.72; }

/* ---------- FINAL CTA (on top of common.css's .tn-download-box) ---------- */
.tl-final { background:#0b1120; }
.tl-final-glow { position:absolute; top:-220px; right:-140px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(99,102,241,.55),rgba(99,102,241,0) 70%); filter:blur(60px); pointer-events:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1199px) {
  .tl-hero-title { font-size:46px; letter-spacing:-1.9px; }
  .tl-prev-chip-one { right:-10px; }
  .tl-prev-chip-two { left:-20px; }
  .tl-prev-chip-three { right:-14px; }
}
@media (max-width:991px) {
  .tl-hero { padding:70px 0 80px; }
  .tl-hero-title { font-size:46px; letter-spacing:-1.8px; }
  .tl-prev { margin-top:22px; }
  .tl-prev-card, .tl-prev:hover .tl-prev-card { transform:none; }
  .tl-app { padding:42px 34px; }
  .tl-app-title { font-size:34px; }
  .tl-card-btn { align-self:stretch; }
}
@media (max-width:575px) {
  .tl-hero { padding:50px 0 60px; }
  .tl-hero-badge { font-size:11.5px; padding:7px 12px; }
  .tl-hero-title { font-size:37px; letter-spacing:-1.4px; }
  .tl-hero-title br { display:none; }
  .tl-hero-copy { font-size:16px; line-height:1.65; }
  .tl-hero-actions { display:grid; }
  .tl-hero-actions a, .tl-btn-glow { justify-content:center; }
  .tl-prev { max-width:100%; padding:30px 6px 34px; }
  .tl-prev-card { padding:18px; border-radius:22px; }
  .tl-prev-balance strong { font-size:32px; }
  .tl-prev-add { padding:7px 10px; font-size:11px; }
  .tl-prev-chip { padding:8px 11px; border-radius:13px; }
  .tl-prev-chip span { display:none; }
  .tl-prev-chip-one { top:4px; right:0; }
  .tl-prev-chip-two { left:0; top:auto; bottom:2px; }
  .tl-prev-chip-three { display:none; }
  .tl-app { padding:30px 22px; border-radius:22px; }
  .tl-app-title { font-size:29px; letter-spacing:-1px; }
  .tl-app-copy { font-size:16px; }
  .tl-app-actions .tn-play-button { width:100%; }
  .tl-compare { border-radius:16px; }
  .tl-compare thead th { padding:13px 8px; font-size:11.5px; }
  .tl-compare tbody th { padding:12px 10px 12px 14px; font-size:13px; }
  .tl-compare tbody td { width:27%; padding:12px 6px; font-size:12px; }
  .tl-faq summary { padding:16px 18px; font-size:15px; }
  .tl-faq p { padding:0 18px 18px; }
}
@media (prefers-reduced-motion:reduce) {
  .tl-hero-orb, .tl-pulse::after, .tl-prev-chip { animation:none; }
  .tl-prev-spark .line { animation:none; stroke-dashoffset:0; }
  .tl-prev-spark .area { animation:none; opacity:1; }
  .tl-prev-card { transition:none; }
}