/*
Theme Name: Tracklytics
Theme URI: https://tracklytics.io
Author: Tracklytics
Description: Nexgen dark-mode theme for Tracklytics — real-time visitor tracking and revenue-linked reporting SaaS.
Version: 3.0
Text Domain: tracklytics
*/

:root{
  --bg:#06070A;
  --surface:#0F1117;
  --surface-2:#161821;
  --glass: rgba(255,255,255,0.035);
  --glass-border: rgba(255,255,255,0.09);
  --line: rgba(255,255,255,0.09);
  --ink:#EDEFF3;
  --muted:#8891A3;
  --neon:#39FFB0;
  --neon-dim: rgba(57,255,176,0.12);
  --neon-line: rgba(57,255,176,0.35);
  --gold:#FFD24D;
  --gold-dim: rgba(255,210,77,0.12);
  --gold-line: rgba(255,210,77,0.35);
  --grad: linear-gradient(120deg, var(--neon), var(--gold));
  --display:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'JetBrains Mono', monospace;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:var(--body); line-height:1.55; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}
img,svg{display:block;}

/* ---------- background grid texture, used site-wide ---------- */
body{
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
}

/* ---------- NAV ---------- */
nav{position:sticky; top:0; z-index:50; background:rgba(6,7,10,0.75); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); transition:box-shadow .3s ease, border-color .3s ease;}
nav.scrolled{border-color:var(--neon-line); box-shadow:0 1px 24px -4px rgba(57,255,176,0.15);}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:104px;}
.logo{display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-0.01em; color:var(--ink);}
.logo img{height:76px; width:auto; filter:drop-shadow(0 0 10px rgba(57,255,176,0.25));}
.navlinks{display:flex; gap:32px; font-size:13.5px; color:var(--muted); font-weight:500; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.04em;}
.navlinks a{position:relative; padding-bottom:4px; transition:color .2s ease;}
.navlinks a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--neon); box-shadow:0 0 8px var(--neon); transition:width .25s ease;}
.navlinks a:hover{color:var(--ink);}
.navlinks a:hover::after{width:100%;}
.navcta{display:flex; align-items:center; gap:20px;}
.navcta a.login{font-size:13.5px; color:var(--muted); font-weight:600; font-family:var(--mono);}
.navcta a.login:hover{color:var(--ink);}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border-radius:8px; font-size:14px; font-weight:700; font-family:var(--body); transition:all .2s ease; white-space:nowrap; border:none; cursor:pointer; letter-spacing:0.01em;}
.btn-primary{background:var(--neon); color:#04140D;}
.btn-primary:hover{box-shadow:0 0 22px rgba(57,255,176,0.55); transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:#241A02;}
.btn-gold:hover{box-shadow:0 0 22px rgba(255,210,77,0.55); transform:translateY(-2px);}
.btn-ghost{border:1.5px solid var(--glass-border); color:var(--ink); background:rgba(255,255,255,0.02);}
.btn-ghost:hover{border-color:var(--neon-line); box-shadow:0 0 16px rgba(57,255,176,0.2);}
.btn-lg{padding:15px 28px; font-size:15.5px;}

.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; background:none; border:none; cursor:pointer; padding:4px; flex-shrink:0;}
.nav-toggle span{width:100%; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .3s ease;}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:920px){
  nav .wrap{flex-wrap:wrap; height:auto; min-height:100px; padding-top:14px; padding-bottom:14px;}
  .nav-toggle{display:flex; order:3;}
  .navcta{order:2; margin-left:auto; gap:12px;}
  .navcta a.login{display:none;}
  .navlinks{order:4; width:100%; flex-direction:column; align-items:stretch; gap:0; max-height:0; overflow:hidden; transition:max-height .35s ease;}
  .navlinks.open{max-height:400px; margin-top:14px;}
  .navlinks a{padding:14px 4px; border-top:1px solid var(--line); font-size:14px;}
}
@media(max-width:480px){.navcta .btn{padding:11px 16px; font-size:13px;}}

/* ---------- eyebrow / terminal pill ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--neon); background:var(--neon-dim); border:1px solid var(--neon-line); padding:8px 16px; border-radius:100px; margin-bottom:28px; letter-spacing:0.02em;}
.eyebrow .pulse{width:6px; height:6px; border-radius:50%; background:var(--neon); box-shadow:0 0 8px var(--neon); animation:blink 1.6s infinite;}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:0.25;}}

.gold-divider{display:flex; align-items:center; gap:14px; justify-content:center;}
.gold-divider .line{height:1px; width:36px; background:var(--gold); box-shadow:0 0 6px var(--gold-line);}
.gold-divider span{font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em; color:var(--gold); text-transform:uppercase; font-weight:700;}

/* ---------- HERO ---------- */
.hero{padding:90px 0 150px; position:relative; overflow:hidden;}
.hex-glow{position:absolute; width:640px; height:640px; border:1px solid rgba(57,255,176,0.1); z-index:0; clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); top:-160px; right:-220px; animation:floatHex 9s ease-in-out infinite;}
@keyframes floatHex{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-14px) rotate(1deg);}}

.mesh-orb{position:absolute; border-radius:50%; filter:blur(100px); z-index:0; animation:meshDrift 14s ease-in-out infinite;}
.mesh-orb.o1{width:560px; height:560px; background:var(--neon); opacity:0.14; top:-200px; left:-140px;}
.mesh-orb.o2{width:480px; height:480px; background:var(--gold); opacity:0.12; bottom:-220px; right:-120px; animation-delay:-5s;}
.mesh-orb.o3{width:360px; height:360px; background:var(--neon); opacity:0.08; top:22%; right:8%; animation-delay:-9s;}
@keyframes meshDrift{0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(28px,-22px) scale(1.08);} 66%{transform:translate(-22px,20px) scale(0.94);}}

.hero-spotlight{position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(560px circle at var(--sx,50%) var(--sy,15%), rgba(57,255,176,0.08), transparent 62%);}
.hero-diagonal{position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, var(--neon-line), var(--gold-line), transparent); z-index:2;}

.hero .wrap{position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center;}
h1{font-family:var(--display); font-weight:700; letter-spacing:-0.03em; font-size:clamp(36px,5.6vw,62px); line-height:1.08; margin-bottom:24px; max-width:840px; color:var(--ink);}
h1 .gold-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.hero p.sub{color:var(--muted); font-size:18px; line-height:1.6; max-width:560px; margin-bottom:38px;}
.hero-ctas{display:flex; gap:14px; margin-bottom:16px; flex-wrap:wrap; justify-content:center;}
.microcopy{font-size:12.5px; color:var(--muted); font-family:var(--mono); letter-spacing:0.03em;}

.bars-motif{display:flex; align-items:flex-end; gap:8px; margin-top:56px; height:64px;}
.bars-motif i{width:14px; background:var(--grad); border-radius:2px 2px 0 0; transform-origin:bottom; animation:growBar .9s cubic-bezier(.2,.8,.2,1) both; box-shadow:0 0 12px rgba(57,255,176,0.4);}
@keyframes growBar{from{transform:scaleY(0);} to{transform:scaleY(1);}}
.bars-motif i:nth-child(1){animation-delay:.7s;}
.bars-motif i:nth-child(2){animation-delay:.78s;}
.bars-motif i:nth-child(3){animation-delay:.86s;}
.bars-motif i:nth-child(4){animation-delay:.94s;}
.bars-motif i:nth-child(5){animation-delay:1.02s;}

/* ---------- FLOATING DASHBOARD (glass terminal) ---------- */
.showcase{perspective:1600px; margin-top:56px; position:relative; z-index:1; width:100%;}
.showcase::after{content:''; position:absolute; width:60%; height:70px; background:var(--neon); filter:blur(80px); opacity:0.25; bottom:6px; left:20%; z-index:-1; border-radius:50%;}
.dash-mock{background:var(--glass); backdrop-filter:blur(18px); border:1px solid var(--glass-border); border-radius:16px; padding:10px; box-shadow:0 50px 100px -40px rgba(0,0,0,0.7), 0 0 40px -10px rgba(57,255,176,0.15); transform:rotateX(7deg) rotateY(-9deg); transition:transform .5s cubic-bezier(.2,.8,.2,1); animation:floatCard 6.5s ease-in-out infinite; will-change:transform;}
.dash-mock:hover{transform:rotateX(0deg) rotateY(0deg) scale(1.015);}
@keyframes floatCard{0%,100%{transform:rotateX(7deg) rotateY(-9deg) translateY(0);} 50%{transform:rotateX(5deg) rotateY(-7deg) translateY(-14px);}}
.dash-inner{background:var(--surface); border-radius:10px; padding:28px; color:var(--ink); position:relative; overflow:hidden;}
.dash-inner::before{content:''; position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--neon), transparent); top:0; animation:scanline 3.2s linear infinite; opacity:0.7;}
@keyframes scanline{0%{top:0;} 100%{top:100%;}}
.dash-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:0.04em;}
.dash-topbar .brand{display:flex; align-items:center; gap:8px;}
.dash-topbar .live{display:flex; align-items:center; gap:7px; color:var(--neon); font-weight:700;}
.dash-topbar .live .pulse{width:6px; height:6px; border-radius:50%; background:var(--neon); box-shadow:0 0 8px var(--neon); animation:blink 1.6s infinite;}
.dash-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px;}
@media(max-width:760px){.dash-grid{grid-template-columns:repeat(2,1fr);}}
.dash-card{background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:8px; padding:18px; text-align:left; transition:border-color .3s ease;}
.dash-card:hover{border-color:var(--neon-line);}
.dash-card span{font-family:var(--mono); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em;}
.dash-card b{display:block; font-family:var(--display); font-size:26px; font-weight:700; margin-top:6px; color:var(--ink);}
.dash-card em{font-style:normal; font-size:12px; color:var(--neon); font-family:var(--mono); font-weight:700;}
.dash-chart{background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:8px; padding:22px; height:160px; display:flex; align-items:flex-end; gap:7px;}
.dash-chart i{flex:1; background:var(--grad); border-radius:3px 3px 0 0; opacity:0.9;}

/* ---------- TRUST ---------- */
.trust{padding:44px 0; text-align:center; overflow:hidden;}
.trust-label{font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.16em; font-weight:600; margin-bottom:26px;}
.trust-logos-mask{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);}
.trust-logos-track{display:flex; gap:64px; width:max-content; animation:marquee 20s linear infinite;}
.trust:hover .trust-logos-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.trust-logos-track span{color:var(--muted); font-family:var(--mono); font-weight:600; font-size:15px; opacity:0.6; flex-shrink:0; text-transform:uppercase; letter-spacing:0.05em;}

/* ---------- SECTIONS ---------- */
section{padding:100px 0;}
@media(max-width:640px){section{padding:56px 0;}}
.section-head{max-width:620px; margin:0 auto 56px; text-align:center;}
.section-head h2{font-family:var(--display); font-size:clamp(28px,3.6vw,40px); font-weight:700; letter-spacing:-0.02em; margin:16px 0 14px; color:var(--ink);}
.section-head p{color:var(--muted); font-size:16px; line-height:1.6;}

/* ---------- FEATURES (glass bento) ---------- */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:860px){.features{grid-template-columns:1fr;}}
.feature{background:var(--glass); backdrop-filter:blur(14px); border:1px solid var(--glass-border); border-radius:var(--radius); padding:32px; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;}
.feature:hover{transform:translateY(-4px); border-color:var(--neon-line); box-shadow:0 20px 40px -24px rgba(57,255,176,0.25);}
.features .feature:first-child{grid-column:span 2; background:linear-gradient(135deg, rgba(57,255,176,0.08), rgba(255,210,77,0.05)); border-color:var(--neon-line);}
@media(max-width:860px){.features .feature:first-child{grid-column:span 1;}}
.feature .hex{width:44px; height:44px; margin-bottom:22px; clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; transition:transform .3s ease, border-color .3s ease;}
.feature:hover .hex{transform:rotate(10deg) scale(1.06); border-color:var(--neon-line);}
.feature .hex svg{width:20px; height:20px; stroke:var(--neon);}
.feature h3{font-family:var(--display); font-size:19px; font-weight:600; margin-bottom:10px; color:var(--ink);}
.feature p{color:var(--muted); font-size:14.5px; line-height:1.6;}

/* ---------- STEPS ---------- */
.steps{display:flex; flex-direction:column;}
.step-row{display:grid; grid-template-columns:70px 1fr; gap:24px; padding:28px 0; border-top:1px solid var(--line); transition:background-color .3s ease, padding-left .3s ease;}
.step-row:last-child{border-bottom:1px solid var(--line);}
.step-row:hover{background-color:rgba(57,255,176,0.03); padding-left:10px;}
.step-num{font-family:var(--mono); font-weight:700; font-size:22px; color:var(--gold); line-height:1;}
.step-row:hover .step-num{color:var(--neon);}
.step-body h3{font-family:var(--display); font-size:19px; font-weight:600; margin-bottom:8px; color:var(--ink);}
.step-body p{color:var(--muted); font-size:14.5px; max-width:560px; line-height:1.6;}

/* ---------- TESTIMONIAL ---------- */
.testi{background:var(--glass); backdrop-filter:blur(14px); border:1px solid var(--glass-border); border-radius:20px; padding:56px; text-align:center; position:relative; overflow:hidden;}
.testi .hex-bg{position:absolute; width:400px; height:400px; border:1px solid rgba(57,255,176,0.1); clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); top:-120px; left:50%; transform:translateX(-50%);}
.testi p{position:relative; font-family:var(--display); font-weight:500; font-size:clamp(19px,2.4vw,26px); line-height:1.5; margin:0 auto 28px; max-width:720px; color:var(--ink);}
.testi .who{position:relative; display:flex; align-items:center; justify-content:center; gap:12px;}
.testi .avatar{width:40px; height:40px; clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background:var(--grad); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; font-weight:700; color:#04140D;}
.testi .who b{display:block; font-size:14.5px; color:var(--ink);}
.testi .who span{font-size:13px; color:var(--muted);}

/* ---------- PRICING (glass, static glow — no spin) ---------- */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:860px){.pricing{grid-template-columns:1fr;}}
.plan{background:var(--glass); backdrop-filter:blur(14px); border:1px solid var(--glass-border); border-radius:var(--radius); padding:36px 32px; display:flex; flex-direction:column;}
.plan.featured{border:1.5px solid var(--gold-line); box-shadow:0 0 40px -12px rgba(255,210,77,0.3); position:relative;}
.plan.featured::before{content:'MOST POPULAR'; position:absolute; top:0; left:0; background:var(--gold); color:#241A02; font-family:var(--mono); font-size:10.5px; font-weight:700; padding:6px 14px; letter-spacing:0.05em; border-radius:14px 0 14px 0;}
.plan h3{font-family:var(--display); font-size:19px; font-weight:600; margin-bottom:6px; margin-top:8px; color:var(--ink);}
.plan .price{font-family:var(--display); font-size:40px; font-weight:700; margin:16px 0 4px; color:var(--ink);}
.plan .price span{font-size:14px; font-weight:400; color:var(--muted); font-family:var(--body);}
.plan .desc{color:var(--muted); font-size:13.5px; margin-bottom:24px;}
.plan ul{list-style:none; margin-bottom:28px; flex:1;}
.plan li{display:flex; gap:10px; font-size:14px; padding:8px 0; color:var(--ink);}
.plan li svg{width:15px; height:15px; stroke:var(--neon); flex-shrink:0; margin-top:2px;}
.plan.featured li svg{stroke:var(--gold);}

/* ---------- CTA ---------- */
.cta-band{text-align:center;}
.cta-inner{background:linear-gradient(135deg, rgba(57,255,176,0.08), rgba(255,210,77,0.05)); border:1px solid var(--glass-border); border-radius:28px; padding:90px 40px; position:relative; overflow:hidden;}
.cta-inner .mesh-orb{opacity:0.3;}
.cta-band h2{font-family:var(--display); font-size:clamp(28px,3.8vw,42px); font-weight:700; margin-bottom:14px; position:relative; color:var(--ink);}
.cta-band h2 .gold-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.cta-band p{color:var(--muted); margin-bottom:34px; font-size:16px; position:relative;}
.cta-band .hero-ctas{justify-content:center; position:relative;}

/* ---------- FOOTER ---------- */
footer{padding:64px 0 32px; background:var(--surface); border-top:1px solid var(--line);}
.foot-top{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; margin-bottom:44px;}
@media(max-width:760px){.foot-top{grid-template-columns:1fr 1fr;}}
.foot-col h4{font-family:var(--mono); font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:16px; font-weight:700;}
.foot-col a{display:block; font-size:14px; color:var(--muted); margin-bottom:11px; transition:color .2s ease;}
.foot-col a:hover{color:var(--neon);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap; gap:12px;}
.foot-bottom span{font-size:12.5px; color:var(--muted); font-family:var(--mono);}

/* ---------- scroll reveal / entrance animation (shared) ---------- */
.hero-anim{opacity:0; animation:fadeUp .8s ease forwards;}
@keyframes fadeUp{from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:translateY(0);}}
.hero .eyebrow.hero-anim{animation-delay:.05s;}
.hero h1.hero-anim{animation-delay:.15s;}
.hero p.sub.hero-anim{animation-delay:.28s;}
.hero .hero-ctas.hero-anim{animation-delay:.4s;}
.hero .microcopy.hero-anim{animation-delay:.5s;}
.hero .showcase.hero-anim{animation-delay:.72s;}

.reveal{opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal-stagger.is-visible > *{opacity:1; transform:translateY(0);}
.reveal-stagger > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger > *:nth-child(2){transition-delay:.13s;}
.reveal-stagger > *:nth-child(3){transition-delay:.21s;}
.reveal-stagger > *:nth-child(4){transition-delay:.29s;}
.reveal-stagger > *:nth-child(5){transition-delay:.37s;}
.reveal-stagger > *:nth-child(6){transition-delay:.45s;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

.screen-reader-text{position:absolute; left:-9999px;}