*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}

body{

background:#000;
color:white;
overflow-x:hidden;

}

.age-page{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

position:relative;

background:
linear-gradient(
180deg,
#090909,
#000000,
#111111);

}

.background-overlay{

position:absolute;

width:100%;

height:100%;

background:

radial-gradient(circle at top,#42206f 0%,transparent 40%),

radial-gradient(circle at bottom,#12001f 0%,transparent 40%);

opacity:.55;

}

.age-box{

position:relative;

z-index:5;

width:90%;

max-width:420px;

background:#111;

border:1px solid #333;

border-radius:20px;

padding:35px;

text-align:center;

box-shadow:

0 0 25px rgba(255,215,0,.25);

}

.logo{

font-size:40px;

font-weight:bold;

margin-bottom:25px;

background:linear-gradient(

180deg,

#fff7b2,

#ffd700,

#a36b00);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

text-shadow:

0 3px 12px rgba(255,215,0,.45);

}

.age-box h2{

margin-bottom:20px;

font-size:24px;

}

.age-box p{

color:#c7c7c7;

line-height:1.7;

margin-bottom:30px;

}

.buttons{

display:flex;

gap:15px;

justify-content:center;

}

button{

border:none;

border-radius:12px;

padding:16px 26px;

font-size:17px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

#enterBtn{

background:#7d2cff;

color:white;

}

#enterBtn:hover{

background:#9855ff;

transform:translateY(-2px);

}

#exitBtn{

background:#d61b36;

color:white;

}

#exitBtn:hover{

background:#ff3354;

transform:translateY(-2px);

}

.home-page{

background:#000;

padding-bottom:40px;

}

header{

display:flex;

justify-content:center;

align-items:center;

position:sticky;

top:0;

background:#000;

padding:18px;

z-index:999;

}

.mainLogo{

font-size:42px;

background:

linear-gradient(

180deg,

#fff6bf,

#ffd700,

#9b6a00);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

text-shadow:

0 0 14px rgba(255,215,0,.4);

}

.menuButton{

position:absolute;

right:18px;

font-size:30px;

cursor:pointer;

color:white;

}

.videoGrid{

display:grid;

grid-template-columns:1fr 1fr;

gap:6px;

padding:6px;

}

.videoCard p{

font-size:13px;

margin-top:6px;

color:white;

}

.thumb{

position:relative;

overflow:hidden;

border-radius:9px;

cursor:pointer;

aspect-ratio:10/14;

background:#1a1a1a;

}

.thumb img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.play{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

font-size:42px;

color:white;

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

width:70px;

height:70px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}

.duration{

position:absolute;

bottom:8px;

right:8px;

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

padding:3px 8px;

border-radius:4px;

font-size:11px;

}

.watermark{

position:absolute;

left:8px;

bottom:8px;

font-size:10px;

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

padding:3px 6px;

border-radius:5px;

}

.watermark i{

color:#ffd700;

margin-right:3px;

}

.sideMenu{

position:fixed;

right:-320px;

top:0;

width:280px;

height:100vh;

background:#111;

padding-top:90px;

transition:.35s;

z-index:9999;

}

.sideMenu button{

width:88%;

margin:12px auto;

display:block;

background:#7d2cff;

color:white;

padding:16px;

border-radius:10px;

font-size:16px;

}

.sideMenu.active{

right:0;

}

#overlay{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

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

z-index:9998;

}

.plansOverlay{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

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

display:none;

z-index:3000;

}

.plansSheet{

position:fixed;

bottom:-100%;

left:0;

width:100%;

height:75vh;

background:#111;

border-radius:25px 25px 0 0;

padding:18px;

transition:.35s;

z-index:3001;

overflow:auto;

}

.plansSheet.active{

bottom:0;

}

.sheetHandle{

width:60px;

height:6px;

background:#777;

border-radius:50px;

margin:auto;

margin-bottom:15px;

}

.closePlans{

position:absolute;

right:18px;

top:18px;

font-size:25px;

cursor:pointer;

}

.plansSheet h2{

text-align:center;

margin-bottom:20px;

font-size:20px;

}

.featureGrid{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

margin-bottom:20px;

}

.featureBox{

background:#1b1b1b;

border:1px solid #333;

border-radius:15px;

padding:16px;

text-align:center;

}

.featureBox h3{

color:#ffd700;

margin-bottom:8px;

}

.planButtons button{

width:100%;

margin-bottom:12px;

background:#252525;

color:white;

padding:16px;

border-radius:12px;

border:1px solid #444;

text-align:left;

transition:.25s;

}

.planButtons button:active{

background:#d4af37;

color:black;

}

.planButtons span{

display:block;

font-size:13px;

color:#ffcc66;

}

.planButtons strong{

float:right;

}

.starButton{

background:#7d2cff !important;

color:white !important;

text-align:center !important;

}

.paymentRow{

display:flex;

justify-content:space-around;

margin-top:25px;

gap:10px;

flex-wrap:wrap;

}

.paymentRow img{

width:55px;

height:55px;

object-fit:contain;

}

.videoCard{

animation:fadeIn .4s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.thumb:hover{

transform:scale(1.02);

transition:.3s;

}

.thumb img{

transition:.3s;

}

.planButtons button.selected{

background:

linear-gradient(
180deg,
#ffe08a,
#d4af37,
#9a6f00
);

color:black;

border:none;

}

.planButtons {
    width: 92%;
    margin: 0 auto;
}

.sampleButton {
    width: 100%;
    margin-bottom: 12px;
    background: linear-gradient(
        180deg,
        #fff0a6,
        #d4af37,
        #9a6f00
    ) !important;
    color: #080808 !important;
    padding: 15px !important;
    border: 1px solid #f5d76e !important;
    border-radius: 12px;
    text-align: center !important;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 3px 12px rgba(212, 175, 55, .25);
    transition: .25s;
}

.sampleButton:active {
    background: linear-gradient(
        180deg,
        #fff8d0,
        #f0c94d,
        #b8860b
    ) !important;
    transform: scale(.98);
}

.sampleIcon {
    margin-right: 7px;
}

/* =========================================
   SAMPLE PAGE
========================================= */

.sample-page {
    min-height: 100vh;
    background: #050505;
    color: white;
}


.sampleHeader {
    position: sticky;
    top: 0;
    z-index: 100;

    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #050505;

    border-bottom: 1px solid #252525;
}


.sampleHeader h1 {
    font-size: 28px;
    font-weight: bold;

    background:
    linear-gradient(
        180deg,
        #fff5b0,
        #ffd700,
        #9a6a00
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
    0 0 15px rgba(255,215,0,.35);
}


.backButton {
    position: absolute;
    left: 18px;

    color: white;
    text-decoration: none;

    font-size: 32px;
}


.sampleContent {
    width: 94%;
    max-width: 700px;

    margin: auto;

    padding: 25px 0 50px;
}


.sampleContent h2 {
    text-align: center;

    font-size: 26px;

    color: #ffd700;

    margin-bottom: 8px;
}


.sampleIntro {
    text-align: center;

    color: #aaa;

    margin-bottom: 25px;

    line-height: 1.5;
}


.sampleVideoBox {
    background: #111;

    border: 1px solid #292929;

    border-radius: 16px;

    overflow: hidden;

    margin-bottom: 25px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.45);
}


.sampleVideoBox video {
    width: 100%;

    display: block;

    background: #000;

    max-height: 75vh;
}


.sampleVideoBox h3 {
    padding: 15px 15px 5px;

    font-size: 17px;
}


.sampleVideoBox p {
    padding: 0 15px 18px;

    color: #999;

    font-size: 14px;

    line-height: 1.5;
}


.sampleSubscribe {
    text-align: center;

    background: #111;

    border: 1px solid #292929;

    border-radius: 16px;

    padding: 22px 15px;

    margin-top: 30px;
}


.sampleSubscribe p {
    color: #ddd;

    margin-bottom: 15px;
}


.sampleTelegramButton {
    display: inline-block;

    background: #7d2cff;

    color: white;

    text-decoration: none;

    padding: 14px 24px;

    border-radius: 11px;

    font-weight: bold;
}


.sampleTelegramButton:active {
    background:
    linear-gradient(
        180deg,
        #fff0a6,
        #d4af37,
        #9a6a00
    );

    color: #000;
}


.backHome {
    display: block;

    width: max-content;

    margin: 25px auto 0;

    color: #ffd700;

    text-decoration: none;

    font-weight: bold;
}

.portraitSampleVideo {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    background: #000;
}