/* =========================================================
   TimeTrack — কাস্টম স্টাইল
   Tailwind ইউটিলিটি দিয়ে যা সহজে করা যায় না (গ্র্যাডিয়েন্ট,
   ভ্যারিয়েবল-ভিত্তিক থিম, কাস্টম কম্পোনেন্ট, অ্যানিমেশন) — সব এখানে।
   ========================================================= */

:root{
  --bg: #F5F7FB;
  --bg-soft: #FFFFFF;
  --bg-soft-2: #EEF1F8;
  --border: rgba(15, 23, 42, 0.08);
  --text: #101828;
  --text-muted: #5B6478;
  --teal: #0D9488;
  --purple: #7C3AED;
  --blue: #0284C7;
}

html.dark{
  --bg: #0B1120;
  --bg-soft: #121A2E;
  --bg-soft-2: #182140;
  --border: rgba(148, 163, 184, 0.14);
  --text: #E7ECF5;
  --text-muted: #93A0B8;
  --teal: #2DD4BF;
  --purple: #A78BFA;
  --blue: #38BDF8;
}

*{ scroll-behavior: smooth; }
html{ scroll-behavior: smooth; }
body{ background: var(--bg); color: var(--text); }

section[id]{ scroll-margin-top: 5.5rem; }

::selection{ background: var(--teal); color: #041014; }

/* ---------- Reveal-on-scroll ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].in-view{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  *{ animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- Nav ---------- */
.nav-bar{
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-border{ border-color: var(--border); }
#mobile-menu{ background: var(--bg); }

.nav-link{
  position: relative;
  transition: color .2s ease;
}
.nav-link:hover{ color: var(--teal); }
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  width:0; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transition: width .25s ease;
}
.nav-link:hover::after{ width:100%; }

.mobile-link{
  padding: .65rem .25rem;
  border-bottom: 1px solid var(--border);
}

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width: 2.4rem; height: 2.4rem; border-radius: .75rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  transition: color .2s ease, border-color .2s ease, transform .15s ease;
}
.icon-btn:hover{ color: var(--teal); border-color: var(--teal); }
.icon-btn:active{ transform: scale(.94); }
.icon-btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .65rem 1.15rem;
  border-radius: .85rem;
  font-weight: 600;
  font-size: .95rem;
  color: #04140F;
  background: linear-gradient(135deg, #38BDF8, #2DD4BF 55%, #8B5CF6);
  box-shadow: 0 8px 24px -8px rgba(45, 212, 191, .55);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover{ transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 28px -8px rgba(45, 212, 191, .6); }
.btn-primary:active{ transform: translateY(0); }

.btn-secondary{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .65rem 1.15rem;
  border-radius: .85rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  transition: border-color .18s ease, transform .18s ease;
}
.btn-secondary:hover{ border-color: var(--teal); transform: translateY(-2px); }

.btn-lg{ padding: .85rem 1.5rem; font-size: 1rem; }

/* ---------- Eyebrow / gradient text ---------- */
.eyebrow{
  display:inline-flex; align-items:center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; letter-spacing: .04em;
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 10%, transparent);
}

.text-gradient{
  background: linear-gradient(135deg, var(--blue), var(--teal) 55%, var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-balance{ text-wrap: balance; }

/* ---------- Hero ---------- */
.hero-bg{ position: relative; overflow: hidden; }

.blob{
  position:absolute; border-radius: 999px; filter: blur(90px);
  opacity: .35; z-index: -1; pointer-events: none;
}
.blob-teal{ width: 26rem; height: 26rem; background: var(--teal); top: -6rem; left: -8rem; }
.blob-purple{ width: 24rem; height: 24rem; background: var(--purple); bottom: -8rem; right: -6rem; }

@media (max-width: 640px){
  .blob{ filter: blur(60px); opacity: .28; }
  .blob-teal{ width: 16rem; height: 16rem; }
  .blob-purple{ width: 15rem; height: 15rem; }
}

.browser-frame{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(15, 23, 42, .35);
}
html.dark .browser-frame{ box-shadow: 0 30px 60px -25px rgba(0,0,0,.6); }

.browser-topbar{
  display:flex; align-items:center; gap:.4rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft-2);
}
.browser-topbar .dot{ width:.55rem; height:.55rem; border-radius:999px; }

.frame-glow{
  position:absolute; inset: 8% 6%;
  background: linear-gradient(135deg, var(--blue), var(--teal), var(--purple));
  filter: blur(70px); opacity: .25; z-index: -1;
}

.stat-chip{
  background: var(--bg-soft-2);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .55rem .35rem;
}

/* ---------- Trust strip ---------- */
.trust-strip{ border-color: var(--border); background: var(--bg-soft); }

/* ---------- Sections ---------- */
.section-alt{ background: var(--bg-soft); }

/* ---------- Feature cards ---------- */
.feature-card{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  padding: 1.6rem;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.feature-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--teal) 50%, var(--border));
  box-shadow: 0 20px 40px -24px rgba(15, 23, 42, .35);
}
.feature-icon{
  width: 2.9rem; height: 2.9rem;
  border-radius: .8rem;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 1.1rem;
}
.feature-title{
  font-family: 'Anek Bangla', sans-serif;
  font-weight: 700; font-size: 1.1rem;
  color: var(--text);
  display:flex; align-items:center; gap:.5rem;
}
.feature-desc{ margin-top:.5rem; font-size: .93rem; line-height: 1.6; color: var(--text-muted); }
.tag-optional{
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; font-weight:600;
  padding: .15rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--purple) 15%, transparent);
  color: var(--purple);
}

/* ---------- Dashboard preview ---------- */
.dash-card{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  padding: 1.6rem;
}
.range-pill{
  padding: .3rem .65rem; border-radius: 999px;
  color: var(--text-muted); border: 1px solid var(--border);
}
.range-pill-active{ background: var(--teal); color: #04140F; border-color: var(--teal); font-weight:600; }

.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:.5rem; }
.bar-fill{
  width: 100%;
  max-width: 2.1rem;
  height: 4%;
  border-radius: .5rem .5rem .3rem .3rem;
  background: linear-gradient(180deg, var(--teal), var(--blue));
  transition: height 1s cubic-bezier(.22,1,.36,1);
}
.bar-label{ font-size:.72rem; color: var(--text-muted); font-family:'JetBrains Mono', monospace; }

.donut{
  width: 8.5rem; height: 8.5rem; border-radius: 999px;
  background: conic-gradient(
    #38BDF8 0% 38%,
    #8B5CF6 38% 64%,
    #2DD4BF 64% 86%,
    #f59e0b 86% 95%,
    #64748b 95% 100%
  );
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.donut::after{
  content:""; width: 62%; height: 62%; border-radius: 999px;
  background: var(--bg-soft);
}
.legend-row{ display:flex; align-items:center; gap:.55rem; color: var(--text-muted); }
.legend-dot{ width:.6rem; height:.6rem; border-radius:999px; }
.legend-row b{ color: var(--text); font-weight:600; }

/* ---------- Steps ---------- */
.step-item{ display:flex; gap:1.1rem; align-items:flex-start; }
.step-num{
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size: 1rem; color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  border-radius: .65rem;
  width: 2.6rem; height: 2.6rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.step-title{ font-family:'Anek Bangla', sans-serif; font-weight:700; color: var(--text); }
.step-desc{ margin-top:.25rem; font-size:.92rem; color: var(--text-muted); line-height:1.6; }

.video-frame{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(15,23,42,.4);
}

/* ---------- Video thumbnail (links out to YouTube) ---------- */
.video-thumb{
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b0b0f;
}
.video-thumb img{
  transition: transform .4s ease, filter .4s ease;
}
.video-thumb:hover img{
  transform: scale(1.04);
  filter: brightness(.85);
}
.video-thumb-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.play-button{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem; height: 4rem;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  color: #04140F;
  background: linear-gradient(135deg, #38BDF8, #2DD4BF 55%, #8B5CF6);
  box-shadow: 0 10px 30px -6px rgba(0,0,0,.5);
  transition: transform .25s ease;
}
.video-thumb:hover .play-button{ transform: translate(-50%, -50%) scale(1.1); }

@media (max-width: 640px){
  .play-button{ width: 3.2rem; height: 3.2rem; }
}

/* ---------- Support / contact card ---------- */
.support-card{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 2rem;
}
.support-avatar{
  width: 3.6rem; height: 3.6rem;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #04140F;
  background: linear-gradient(135deg, #38BDF8, #2DD4BF 55%, #8B5CF6);
}

.footer-credit-link{
  color: var(--teal);
  font-weight: 600;
  text-underline-offset: 3px;
}
.footer-credit-link:hover{ text-decoration: underline; }

/* ---------- Download card ---------- */
.download-card{
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 2.5rem;
}

/* ---------- FAQ ---------- */
.faq-item{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: 1.1rem 1.3rem;
}
.faq-item summary{
  cursor: pointer;
  font-family:'Anek Bangla', sans-serif;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display:flex; align-items:center; justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content: "+";
  font-family: 'JetBrains Mono', monospace;
  color: var(--teal);
  font-size: 1.2rem;
  transition: transform .2s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin-top:.75rem; font-size:.92rem; color: var(--text-muted); line-height:1.7; }

/* tabular numerals for the ticking clock */
.tabular-nums{ font-variant-numeric: tabular-nums; }