/*==================================================
GUIDE PAGE
HAHA Multimedia IPTV
==================================================*/


/*==================================
HERO
==================================*/

.guide-hero{

position:relative;

padding:150px 5% 110px;

overflow:hidden;

}

.guide-hero::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at 20% 20%,rgba(0,212,255,.12),transparent 30%),

radial-gradient(circle at 80% 25%,rgba(123,61,255,.12),transparent 35%),

radial-gradient(circle at 50% 100%,rgba(255,45,149,.08),transparent 45%);

pointer-events:none;

}

.guide-hero .container{

position:relative;

z-index:2;

}

.hero-content{

max-width:900px;

margin:auto;

text-align:center;

}

.hero-badge{

display:inline-flex;

padding:12px 30px;

border-radius:50px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

font-size:14px;

font-weight:800;

letter-spacing:2px;

margin-bottom:25px;

}

.guide-hero h1{

font-size:clamp(48px,6vw,74px);

font-weight:900;

margin-bottom:25px;

background:linear-gradient(

90deg,

var(--blue),

var(--purple),

var(--pink)

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.guide-hero p{

max-width:760px;

margin:auto;

font-size:20px;

line-height:2;

color:#d5d5d5;

}





/*==================================
DEVICES GRID
==================================*/

.devices-guide{

padding:120px 5%;

}

.devices-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:30px;

margin-top:60px;

}

.device-card{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

padding:35px;

text-align:center;

backdrop-filter:blur(18px);

transition:.35s;

display:block;

}

.device-card:hover{

transform:translateY(-10px);

border-color:var(--blue);

box-shadow:0 0 35px rgba(0,212,255,.20);

}

.device-card img{

width:90px;

height:90px;

object-fit:contain;

margin-bottom:20px;

transition:.35s;

}

.device-card:hover img{

transform:scale(1.12);

}

.device-card h3{

font-size:22px;

font-weight:800;

color:#fff;

}
/*==================================================
GUIDE SECTION
==================================================*/

.guide-section{

padding:120px 5%;

position:relative;

overflow:hidden;

}

.guide-header{

max-width:850px;

margin:auto;

text-align:center;

margin-bottom:70px;

}

.guide-header span{

display:inline-block;

padding:10px 22px;

border-radius:40px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

font-size:14px;

font-weight:700;

letter-spacing:2px;

color:var(--blue);

margin-bottom:20px;

}

.guide-header h2{

font-size:48px;

font-weight:900;

margin-bottom:20px;

background:linear-gradient(

90deg,

var(--blue),

var(--purple)

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.guide-header p{

font-size:18px;

line-height:2;

color:#d5d5d5;

}





/*==================================================
STEPS
==================================================*/

.guide-steps{

display:flex;

flex-direction:column;

gap:45px;

}

.guide-step{

display:grid;

grid-template-columns:90px 1fr 420px;

gap:35px;

align-items:center;

padding:35px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:30px;

backdrop-filter:blur(18px);

transition:.35s;

}

.guide-step:hover{

border-color:var(--blue);

transform:translateY(-8px);

box-shadow:0 0 40px rgba(0,212,255,.20);

}

.guide-step.reverse{

grid-template-columns:420px 1fr 90px;

}

.guide-step.reverse .step-image{

order:1;

}

.guide-step.reverse .step-content{

order:2;

}

.guide-step.reverse .step-number{

order:3;

}





/*==================================================
STEP NUMBER
==================================================*/

.step-number{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:28px;

font-weight:900;

background:linear-gradient(

135deg,

var(--blue),

var(--purple)

);

color:#fff;

box-shadow:0 0 30px rgba(0,212,255,.30);

}





/*==================================================
STEP CONTENT
==================================================*/

.step-content h3{

font-size:30px;

font-weight:900;

margin-bottom:18px;

color:#fff;

}

.step-content p{

font-size:18px;

line-height:2;

color:#d8d8d8;

}





/*==================================================
STEP IMAGE
==================================================*/

.step-image{

overflow:hidden;

border-radius:22px;

border:1px solid rgba(255,255,255,.08);

box-shadow:0 20px 40px rgba(0,0,0,.25);

}

.step-image img{

display:block;

width:100%;

transition:.5s;

}

.step-image:hover img{

transform:scale(1.08);

}
/*==================================================
GUIDE NOTE
==================================================*/

.guide-note{

display:flex;

align-items:flex-start;

gap:30px;

margin-top:60px;

padding:35px;

border-radius:28px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

}

.note-icon{

width:90px;

height:90px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:42px;

background:linear-gradient(

135deg,

#ffb300,

#ff6f00

);

flex-shrink:0;

box-shadow:0 0 35px rgba(255,179,0,.25);

}

.guide-note h3{

font-size:30px;

font-weight:900;

margin-bottom:18px;

color:#fff;

}

.guide-note ul{

padding:0;

margin:0;

list-style:none;

display:flex;

flex-direction:column;

gap:15px;

}

.guide-note li{

font-size:17px;

line-height:1.9;

color:#d8d8d8;

padding-right:28px;

position:relative;

}

.guide-note li::before{

content:"✔";

position:absolute;

right:0;

top:0;

color:#00d4ff;

font-weight:900;

}





/*==================================================
GUIDE BUTTONS
==================================================*/

.guide-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:50px;

flex-wrap:wrap;

}

.guide-buttons a{

min-width:220px;

}





/*==================================================
SUPPORT
==================================================*/

.support-section{

padding:120px 5%;

}

.support-card{

max-width:900px;

margin:auto;

padding:60px;

text-align:center;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:35px;

backdrop-filter:blur(18px);

}

.support-icon{

width:110px;

height:110px;

margin:auto;

margin-bottom:30px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:52px;

background:linear-gradient(

135deg,

var(--blue),

var(--purple)

);

box-shadow:0 0 35px rgba(0,212,255,.30);

}

.support-card h2{

font-size:42px;

font-weight:900;

margin-bottom:20px;

}

.support-card p{

font-size:18px;

line-height:2;

color:#d4d4d4;

margin-bottom:35px;

}

.support-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}





/*==================================================
DOWNLOAD APP
==================================================*/

.download-app{

padding:120px 5%;

}

.download-card{

max-width:900px;

margin:auto;

padding:60px;

text-align:center;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:35px;

backdrop-filter:blur(18px);

}

.download-card h2{

font-size:42px;

font-weight:900;

margin-bottom:20px;

}

.download-card p{

font-size:18px;

line-height:2;

color:#d5d5d5;

margin-bottom:35px;

}
/*==================================================
SECTION EFFECTS
==================================================*/

.guide-hero,
.devices-guide,
.guide-section,
.support-section,
.download-app{

position:relative;

overflow:hidden;

}

.guide-hero::after,
.devices-guide::after,
.guide-section::after,
.support-section::after,
.download-app::after{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(0,212,255,.08),

transparent 70%

);

filter:blur(45px);

pointer-events:none;

z-index:0;

}

.guide-hero::after{

top:-180px;

left:-150px;

}

.devices-guide::after{

bottom:-180px;

right:-180px;

}

.guide-section::after{

top:40%;

left:-180px;

}

.support-section::after{

bottom:-180px;

right:-180px;

}

.download-app::after{

top:-180px;

left:-180px;

}

.guide-hero .container,
.devices-guide .container,
.guide-section .container,
.support-section .container,
.download-app .container{

position:relative;

z-index:2;

}





/*==================================================
ANIMATIONS
==================================================*/

.device-card,
.guide-step,
.support-card,
.download-card{

animation:fadeUp .8s ease both;

}

.device-card:nth-child(2){

animation-delay:.08s;

}

.device-card:nth-child(3){

animation-delay:.16s;

}

.device-card:nth-child(4){

animation-delay:.24s;

}

.device-card:nth-child(5){

animation-delay:.32s;

}

.device-card:nth-child(6){

animation-delay:.40s;

}





/*==================================================
IMAGE EFFECT
==================================================*/

.step-image{

cursor:pointer;

}

.step-image img{

transition:.45s ease;

}

.step-image:hover img{

transform:scale(1.08);

}





/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

.guide-step{

grid-template-columns:80px 1fr;

}

.guide-step.reverse{

grid-template-columns:80px 1fr;

}

.step-image{

grid-column:1/-1;

margin-top:25px;

}

.guide-step.reverse .step-image,

.guide-step.reverse .step-content,

.guide-step.reverse .step-number{

order:unset;

}

}





@media(max-width:992px){

.devices-grid{

grid-template-columns:repeat(2,1fr);

}

}





@media(max-width:768px){

.guide-hero{

padding:100px 20px 80px;

}

.guide-hero h1{

font-size:40px;

}

.guide-hero p{

font-size:17px;

}

.devices-grid{

grid-template-columns:1fr;

}

.guide-header h2{

font-size:34px;

}

.guide-step{

padding:25px;

}

.step-number{

width:60px;

height:60px;

font-size:24px;

}

.step-content h3{

font-size:24px;

}

.step-content p{

font-size:16px;

}

.guide-note{

flex-direction:column;

text-align:center;

}

.guide-buttons,

.support-buttons{

flex-direction:column;

}

.guide-buttons a,

.support-buttons a{

width:100%;

}

.support-card,

.download-card{

padding:35px 25px;

}

}





@media(max-width:480px){

.guide-hero{

padding:80px 15px 60px;

}

.hero-badge{

font-size:12px;

padding:10px 20px;

}

.guide-hero h1{

font-size:30px;

}

.guide-hero p{

font-size:15px;

line-height:1.8;

}

.guide-header h2{

font-size:28px;

}

.step-content h3{

font-size:22px;

}

.step-content p{

font-size:15px;

}

.note-icon{

width:75px;

height:75px;

font-size:34px;

}

.support-icon{

width:90px;

height:90px;

font-size:42px;

}

.support-card h2,

.download-card h2{

font-size:28px;

}

.support-card p,

.download-card p{

font-size:15px;

}

}



/*==================================================
LIGHTBOX
==================================================*/

.guide-lightbox{

position:fixed;

inset:0;

background:rgba(0,0,0,.92);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:99999;

padding:40px;

}

.guide-lightbox.show{

opacity:1;

visibility:visible;

}

.guide-lightbox img{

max-width:90%;

max-height:90%;

border-radius:20px;

box-shadow:0 0 60px rgba(0,212,255,.25);

}

.close-lightbox{

position:absolute;

top:30px;

left:40px;

font-size:55px;

color:#fff;

cursor:pointer;

font-weight:bold;

transition:.3s;

}

.close-lightbox:hover{

transform:rotate(90deg);

color:var(--blue);

}

.device-card.active{

border-color:var(--blue);

box-shadow:0 0 35px rgba(0,212,255,.30);

}

/*==================================================
END GUIDE PAGE
==================================================*/