/* GUIDE PAGE */
.guide-hero { padding:calc(var(--header-h) + 80px) 0 60px; position:relative; overflow:hidden; }
.guide-hero::before { content:''; position:absolute; width:700px; height:500px; background:radial-gradient(ellipse,rgba(245,158,11,0.12),transparent 65%); top:-100px; left:40%; transform:translateX(-50%); filter:blur(60px); pointer-events:none; }
.guide-hero-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.guide-hero-title { font-size:clamp(2.2rem,4.5vw,3.4rem); font-weight:900; line-height:1.15; color:var(--tx); margin-bottom:16px; }
.guide-hero-title span { background:linear-gradient(135deg,var(--or),var(--or-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.update-badge { display:inline-flex; align-items:center; gap:6px; color:var(--tx-3); font-size:0.8rem; margin-top:18px; }
.update-badge svg { width:14px; height:14px; color:var(--or); }
/* Stats 4-col */
.guide-stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--bdr); border:1px solid var(--bdr); border-radius:var(--r-xl); overflow:hidden; margin:48px 0 64px; }
.gs-item { background:var(--surface-1); padding:24px 20px; display:flex; align-items:center; gap:12px; }
.gs-icon { width:46px; height:46px; border-radius:var(--r); background:var(--or-glow-2); border:1px solid var(--or-bdr); display:flex; align-items:center; justify-content:center; color:var(--or); flex-shrink:0; }
.gs-icon svg { width:22px; height:22px; }
.gs-val { font-size:1.5rem; font-weight:900; color:var(--tx); line-height:1; }
.gs-lbl { font-size:0.78rem; color:var(--tx-3); margin-top:2px; }
/* Mockup */
.guide-mockup { background:var(--surface-1); border:1px solid var(--bdr); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg),0 0 60px rgba(245,158,11,0.08); }
.mockup-bar { display:flex; align-items:center; gap:6px; padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--bdr); }
.mockup-dot { width:10px; height:10px; border-radius:50%; }
.mockup-dot.r{background:#FF5F56;} .mockup-dot.a{background:#FFBD2E;} .mockup-dot.g{background:#27C93F;}
.mockup-body { display:grid; grid-template-columns:1fr 1fr; }
.mockup-player { position:relative; background:#090909; min-height:200px; display:flex; align-items:center; justify-content:center; border-left:1px solid var(--bdr); }
.mockup-play { width:56px; height:56px; background:linear-gradient(135deg,var(--or),#E08A1A); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 0 30px var(--or-glow); cursor:pointer; transition:transform .2s; }
.mockup-play:hover { transform:scale(1.1); }
.mockup-play svg { width:22px; height:22px; fill:#fff; margin-right:-2px; }
.mockup-steps-list { padding:12px 14px; display:flex; flex-direction:column; gap:5px; }
.ms-step { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer; transition:background .2s; }
.ms-step:hover,.ms-step.active { background:var(--or-glow-2); border:1px solid var(--or-bdr); }
.ms-step.active .ms-icon { color:var(--or); }
.ms-icon { width:28px; height:28px; border-radius:6px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--tx-4); flex-shrink:0; }
.ms-icon svg { width:13px; height:13px; }
.ms-lbl { font-size:0.76rem; color:var(--tx-3); }
.ms-step.active .ms-lbl { color:var(--or); font-weight:700; }
.mockup-progress { padding:10px 16px; border-top:1px solid var(--bdr); background:var(--surface-2); }
.prog-bar { height:3px; background:var(--bdr-2); border-radius:2px; margin-bottom:6px; }
.prog-fill { height:100%; width:30%; background:linear-gradient(90deg,var(--or),var(--or-2)); border-radius:2px; }
.prog-times { display:flex; justify-content:space-between; font-size:0.7rem; color:var(--tx-4); }
/* Steps */
.steps-section { padding:0 0 80px; }
.timeline-bar { display:flex; align-items:center; position:relative; margin-bottom:36px; }
.timeline-bar::before { content:''; position:absolute; top:18px; right:18px; left:18px; height:2px; background:linear-gradient(to left,var(--bdr-2),var(--or) 60%); }
.tb-dot { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; }
.tb-dot-circle { width:36px; height:36px; border-radius:50%; background:var(--surface-1); border:2px solid var(--bdr-2); display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:800; color:var(--tx-4); cursor:pointer; transition:all .3s; }
.tb-dot.active .tb-dot-circle { border-color:var(--or); background:var(--or-glow-2); color:var(--or); box-shadow:0 0 18px var(--or-glow); }
.steps-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.step-card { padding:24px 18px; cursor:pointer; position:relative; }
.step-card.active,.step-card:hover { border-color:var(--or-bdr) !important; box-shadow:0 8px 28px rgba(245,158,11,0.1); }
.step-num { font-size:2.5rem; font-weight:900; color:var(--or); opacity:.15; line-height:1; margin-bottom:12px; }
.step-icon-box { margin-bottom:14px; }
.step-title { font-size:0.95rem; font-weight:800; color:var(--tx); margin-bottom:8px; }
.step-desc { font-size:0.8rem; color:var(--tx-3); line-height:1.7; }
/* Steps mobile */
.steps-mobile { display:none; flex-direction:column; gap:12px; }
.step-m-item { display:flex; gap:14px; background:var(--surface-1); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:16px; }
.step-m-num { width:38px; height:38px; border-radius:50%; background:var(--or); color:#fff; font-weight:900; font-size:0.95rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
/* Video tutorials */
.tutorials-section { padding:0 0 80px; }
.tut-layout { display:grid; grid-template-columns:1fr 1.6fr; gap:48px; align-items:start; }
.tut-features { margin:16px 0 24px; display:flex; flex-direction:column; gap:8px; }
.tut-feat { display:flex; align-items:center; gap:8px; font-size:0.88rem; color:var(--tx-2); }
.tut-feat::before { content:'✓'; width:18px; height:18px; background:var(--or-glow-2); border:1px solid var(--or-bdr); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.65rem; color:var(--or); flex-shrink:0; }
.video-player-card { background:var(--surface-1); border:1px solid var(--bdr); border-radius:var(--r-xl); overflow:hidden; }
.video-screen { position:relative; background:#090909; height:220px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.video-screen::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(245,158,11,0.1),transparent 60%); }
.video-play-lg { width:70px; height:70px; background:linear-gradient(135deg,var(--or),#E08A1A); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 0 40px rgba(245,158,11,0.45); position:relative; z-index:1; transition:transform .2s; }
.video-play-lg:hover { transform:scale(1.08); }
.video-play-lg svg { width:26px; height:26px; fill:#fff; margin-right:-3px; }
.video-controls { padding:14px 16px; border-top:1px solid var(--bdr); background:var(--surface-2); }
.vprog { height:3px; background:var(--bdr-2); border-radius:2px; margin-bottom:10px; cursor:pointer; }
.vprog-fill { height:100%; width:40%; background:linear-gradient(90deg,var(--or),var(--or-2)); border-radius:2px; }
.vctrl-row { display:flex; align-items:center; gap:10px; }
.vcbtn { background:none; border:none; color:var(--tx-3); font-size:0.9rem; padding:4px; cursor:pointer; transition:color .15s; }
.vcbtn:hover { color:var(--or); }
.vtime { font-size:0.74rem; color:var(--tx-3); margin-right:auto; }
.playlist { border-top:1px solid var(--bdr); }
.playlist-hdr { padding:12px 16px; font-size:0.84rem; font-weight:700; color:var(--tx-2); border-bottom:1px solid var(--bdr); }
.playlist-item { display:flex; align-items:center; gap:12px; padding:11px 16px; cursor:pointer; transition:background .2s; border-bottom:1px solid rgba(255,255,255,0.03); }
.playlist-item:hover { background:var(--surface-2); }
.playlist-item.active { background:var(--or-glow-2); border-right:2px solid var(--or); }
.pi-thumb { width:34px; height:34px; border-radius:7px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--tx-4); flex-shrink:0; transition:all .2s; }
.playlist-item.active .pi-thumb { background:var(--or-glow-2); color:var(--or); }
.pi-thumb svg { width:12px; height:12px; }
.pi-name { font-size:0.82rem; color:var(--tx-2); flex:1; }
.playlist-item.active .pi-name { color:var(--or); font-weight:700; }
.pi-dur { font-size:0.72rem; color:var(--tx-4); }
/* FAQ */
.faq-section { padding:0 0 80px; }
.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--surface-1); border:1px solid var(--bdr); border-radius:var(--r-lg); overflow:hidden; transition:border-color .2s; }
.faq-item.open { border-color:var(--or-bdr); }
.faq-q { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; cursor:pointer; font-size:0.97rem; font-weight:700; color:var(--tx); gap:16px; }
.faq-q-icon { width:28px; height:28px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--tx-3); flex-shrink:0; font-size:1rem; transition:all .3s; }
.faq-item.open .faq-q-icon { background:var(--or-glow-2); color:var(--or); transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s var(--ease-expo),padding .3s; padding:0 20px; font-size:0.88rem; color:var(--tx-3); line-height:1.8; }
.faq-item.open .faq-a { max-height:200px; padding-bottom:18px; }
/* Responsive */
@media(max-width:1024px){ .guide-stats-bar{grid-template-columns:1fr 1fr;} .steps-grid{grid-template-columns:repeat(3,1fr);} .tut-layout{grid-template-columns:1fr;} }
@media(max-width:768px){ .guide-hero-layout{grid-template-columns:1fr;} .guide-mockup { display:none; } .guide-stats-bar{grid-template-columns:1fr 1fr;} .steps-grid{display:none;} .steps-mobile{display:flex;} .timeline-bar{display:none;} }
@media(max-width:480px){ .guide-stats-bar{grid-template-columns:1fr;} }