/* --- Stats & Visuals --- */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.stat-card{background:#fff;border:1px solid #e0e0e0;border-radius:var(--r);padding:1.2rem;text-align:center;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(14,32,53,.2),transparent)}
.stat-num{font:700 1.8rem 'Poppins',sans-serif;color:var(--pri);display:block;line-height:1.2}
.stat-label{font-size:.75rem;color:var(--tx2);margin-top:.2rem}
.stat-sub{font-size:.65rem;color:var(--tx2);opacity:.6;margin-top:.3rem}
/* Mini chart bars */
.mini-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:40px;margin-bottom:.5rem}
.mini-bar{width:8px;border-radius:2px 2px 0 0;background:rgba(14,32,53,.15)}
.mini-bar.hi{background:rgba(55,113,200,.6)}
/* Donut */
.donut{width:70px;height:70px;border-radius:50%;margin:0 auto .5rem;position:relative;display:flex;align-items:center;justify-content:center}
.donut-inner{width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;z-index:1}
.donut-inner span{font:700 .85rem 'Poppins',sans-serif;color:var(--pri)}
/* Progress line */
.prog{height:4px;background:rgba(14,32,53,.08);border-radius:2px;margin-top:.5rem;overflow:hidden}
.prog-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,rgba(55,113,200,.4),rgba(55,113,200,.7))}
/* Pulse dot */
.pulse{width:8px;height:8px;border-radius:50%;background:#4FAF8C;display:inline-block;margin-right:.4rem;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
/* Big stat inline */
.big-stats{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin:1.5rem 0}
.big-stat{text-align:center}
.big-stat .stat-num{font-size:2rem;background:linear-gradient(135deg,var(--pri),rgba(55,113,200,.7));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.big-stat .stat-label{color:var(--tx2);font-size:.8rem}
/* Live badge */
.live-badge{display:inline-flex;align-items:center;gap:.3rem;background:rgba(79,175,140,.12);border:1px solid rgba(79,175,140,.2);border-radius:20px;padding:.3rem .8rem;font-size:.72rem;color:var(--jade);font-weight:600}


.stat-card{background:var(--bg2);border:1px solid #e0e0e0}
.stat-card::before{background:linear-gradient(90deg,transparent,rgba(14,32,53,.2),transparent)}
.stat-num{color:var(--pri)}
.stat-label{color:var(--tx2)}
.stat-sub{color:var(--tx2);opacity:.6}
.mini-bar{background:rgba(14,32,53,.15)}
.mini-bar.hi{background:rgba(55,113,200,.6)}
.donut-inner{background:#fff}
.donut-inner span{color:var(--pri)}
.prog{background:rgba(14,32,53,.08)}
.prog-fill{background:linear-gradient(90deg,rgba(55,113,200,.4),rgba(55,113,200,.7))}
.big-stat .stat-num{background:linear-gradient(135deg,var(--pri),rgba(55,113,200,.8));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.big-stat .stat-label{color:var(--tx2)}
.live-badge{background:rgba(79,175,140,.08);border-color:rgba(79,175,140,.15)}

/* === MOBILE PUNCH === */
.sec-s{display:none}
.hero>div>p{font-size:.82rem;margin-bottom:1.2rem;max-width:280px;margin-left:auto;margin-right:auto;line-height:1.5}
.sec{padding:2rem 0}
.sec-t{font-size:1.15rem;margin-bottom:1rem}
.pa span{display:none}
.pa{padding:.6rem .8rem;border-left-width:3px}
.pa strong{font-size:.85rem}
.cmp-col{padding:1.1rem .9rem}
.cmp-col h3{font-size:.88rem;margin-bottom:.7rem;padding-bottom:.5rem}
.cmp-col li{font-size:.8rem;gap:.4rem;line-height:1.35}
.cmp-col li svg{width:14px;height:14px}
.svc-g{gap:.5rem}
.svc{padding:.7rem .5rem}
.svc h3{font-size:.78rem}
.svc .cd-i{width:28px;height:28px;margin-bottom:.3rem}.svc .cd-i svg{width:14px;height:14px}
.sp>div>p{font-size:.85rem;line-height:1.5}
.sp>div>p:last-of-type{display:none}
.step p{display:none}
.step h3{font-size:.88rem}
.step-n{width:38px;height:38px;font-size:1rem;margin-bottom:.4rem}
.steps{flex-direction:row;justify-content:center;gap:.8rem}
.step{flex:1}
.res-g{grid-template-columns:1fr 1fr;gap:.6rem}
.res-th{height:auto}
.res h3{font-size:.78rem;padding:.6rem .7rem}
.cta{padding:2rem 0}
.cta h2{font-size:1rem}
.cta p{font-size:.82rem;margin-bottom:1rem}
.tm{gap:.7rem;margin-bottom:1rem}
.tm-p{width:38px;height:38px}
.tm-n{font-size:.65rem}
.car-s .cd{padding:.9rem}
.test p{font-size:.82rem;line-height:1.45}
.test cite{font-size:.75rem}
.test::before{font-size:2rem}
.btn-link{font-size:.8rem}
.sp-img{max-height:200px;overflow:hidden}
.btn-od{font-size:.78rem;padding:.5rem .9rem;min-height:40px}
/* Dividers between sections */
.sec+.sec-d,.sec+.sec-g,.sec-g+.sec,.sec-d+.sec{border:0}

/* ===== DESKTOP ===== */
@media(min-width:769px){
nav{height:120px;background:transparent}
.logo{height:104px}
.ham{display:none}
.nav-l{position:static;flex-direction:row;max-height:none;gap:2rem;align-items:center;width:auto;overflow:visible;background:transparent}
.nav-l a{padding:0;min-height:auto;font-size:.9rem}
.nav-l .nav-cta{padding:0;margin-left:.5rem}.nav-cta .btn{width:auto}

.sec-s{display:block}
.pa span{display:inline}
.step p{display:block}
.sp>div>p:last-of-type{display:block}
.steps{flex-direction:row;gap:2rem}

.stats-grid{grid-template-columns:repeat(4,1fr);gap:1.2rem}
.stat-card{padding:1.8rem}
.stat-num{font-size:2.2rem}
.stat-label{font-size:.82rem}
.mini-bars{height:55px}
.mini-bar{width:12px}
.donut{width:90px;height:90px}
.donut-inner{width:58px;height:58px}
.donut-inner span{font-size:1rem}
.big-stats{gap:3rem}
.big-stat .stat-num{font-size:2.8rem}
.sec{padding:5rem 0}
.sec-t{font-size:clamp(1.5rem,3vw,2rem)}
.sec-s{font-size:.95rem;margin-bottom:3rem}
.hero{background:var(--pri) url('../images/graph_pc_pic.webp') center 40%/cover no-repeat;padding:10rem 0 5rem;position:relative}
.hero::before{content:'';position:absolute;inset:0;background:rgba(14,32,53,.7)}
.hero .c{position:relative;z-index:1}
.hero h1{font-size:clamp(2rem,5vw,3.2rem)}
.hero>div>p{font-size:1.1rem}
.hero-b{flex-direction:row;justify-content:center;gap:1rem}
.hero-b .btn{width:auto}
.cg-3{grid-template-columns:repeat(3,1fr)}
.cg-2{grid-template-columns:repeat(2,1fr)}
.cd{padding:2rem}
.cd-i{width:48px;height:48px}.cd-i svg{width:24px;height:24px}
.cd h3{font-size:1.1rem}
.cd p{font-size:.95rem}
.prob-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.prob-arrows{display:none}
.cmp{display:grid;grid-template-columns:1fr 1fr}
.cmp-col{padding:2.5rem}
.cmp-col h3{font-size:1.1rem}
.cmp-col li{font-size:.93rem}
.svc-g{grid-template-columns:repeat(4,1fr);gap:1.5rem}
.svc{padding:2.5rem 2rem}.svc h3{font-size:1rem}.svc p{display:block;font-size:.9rem;color:rgba(255,255,255,.5);margin-top:.4rem}
.sp{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.step-n{width:56px;height:56px;font-size:1.3rem}
.tm-p{width:72px;height:72px}
.tm-n{font-size:.75rem}
.tm{gap:1.5rem}
.cs-n{font-size:1.5rem}
.res-g{grid-template-columns:repeat(3,1fr)}
.res-th{height:auto}
.cta{padding:4rem 0}
.cta h2{font-size:clamp(1.4rem,3vw,2rem)}
.cta-b{flex-direction:row;gap:1rem}
.cta-b .btn{width:auto}
.ft-g{flex-direction:row;justify-content:space-between}
}

/* --- Scroll Reveal --- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.rv.show{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.1s}
.rv-d2{transition-delay:.2s}
.rv-d3{transition-delay:.3s}
.rv-d4{transition-delay:.4s}
.rv-l{transform:translateX(-30px)}.rv-l.show{transform:translateX(0)}
.rv-r{transform:translateX(30px)}.rv-r.show{transform:translateX(0)}
.rv-s{transform:scale(.92)}.rv-s.show{transform:scale(1)}

nav{transition:transform .3s ease}
nav.hide{transform:translateY(-100%)}

/* --- Extracted inline styles --- */
.index-center-mt{text-align:center;margin-top:1.5rem}
.index-community-wrap{text-align:center;padding:2rem 0 0}
.index-community-title{display:inline-flex;align-items:center;gap:.8rem;font-size:2.2rem}
.index-rocket{width:56px;height:56px}
.index-live-wrap{text-align:center;margin-bottom:1.5rem}
.index-stats-grid{margin-top:2rem}
.index-bar-35{height:35%}
.index-bar-50{height:50%}
.index-bar-40{height:40%}
.index-bar-70{height:70%}
.index-bar-85{height:85%}
.index-bar-100{height:100%}
.index-progress-78{width:78%}
.index-progress-100{width:100%}
.index-donut-retention{background:conic-gradient(rgba(55,113,200,.7) 0% 92%,rgba(14,32,53,.08) 92% 100%)}
.index-donut-active{background:conic-gradient(var(--jade) 0% 80%,rgba(14,32,53,.08) 80% 100%)}
.index-stat-small{font-size:1.5rem}
.index-border-light{border-color:#e0e0e0}
.index-copy-title{font-size:1.25rem;margin-bottom:.5rem}
.index-copy-text{color:var(--tx2);margin-bottom:.8rem}
.index-copy-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.index-inline-link{display:inline-flex;align-items:center;gap:.4rem}
.index-icon-primary{stroke:var(--pri);fill:none;stroke-width:2}
.index-risk-note{font-size:.75rem;color:var(--tx2);margin-top:.8rem;opacity:.6}
.index-text-center{text-align:center}
.index-scale-130{transform:scale(1.3)}
.index-res-grid{margin-bottom:1.5rem}
.index-thumb-risk{background-image:url('../images/yt_thumbnails/youtube-Pjiq-jZmRQE-hqdefault_wo.webp')}
.index-thumb-analysis{background-image:url('../images/yt_thumbnails/youtube-zE7LUdEaz4Q-hqdefault_wo.webp')}
.index-thumb-copy{background-image:url('../images/yt_thumbnails/youtube-4PE6H6ObWB4-hqdefault_wo.webp')}
.index-footer-copy{margin-top:.5rem}