*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Inter,Arial,sans-serif;
background:#030c16;
color:#fff;
}

.container{
width:1200px;
max-width:95%;
margin:auto;
}

.header{
border-bottom:1px solid rgba(255,255,255,.08);
background:#030c16;
}

.nav{
height:74px;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo{
display:flex;
align-items:center;
gap:10px;
}

.logo-icon{
width:42px;
height:42px;
border-radius:12px;
background:#18e4b2;
color:#000;
font-weight:bold;
display:flex;
align-items:center;
justify-content:center;
}

.logo small{
display:block;
font-size:12px;
opacity:.7;
}

.menu{
display:flex;
gap:25px;
list-style:none;
}

.menu a{
text-decoration:none;
color:#b9c5d0;
font-size:14px;
}

.menu a:hover{
color:#fff;
}

.nav-btn{
display:flex;
gap:12px;
align-items:center;
}

.batch{
background:#191306;
border:1px solid #6d5515;
padding:10px 18px;
border-radius:30px;
color:#ffd767;
font-size:13px;
font-weight:700;
}

.btn-main{
background:#5df2cf;
color:#021013;
padding:12px 24px;
border-radius:14px;
text-decoration:none;
font-weight:700;
}

.hero{
padding:55px 0;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:50px;
align-items:center;
}

.hero-left h1{
    font-size:42px;
    line-height:1.15;
    font-weight:800;
    margin-bottom:25px;
    max-width:620px;
}

.hero-left h1 .circle{
position:relative;
display:inline-block;
}

.hero-left h1 .circle:after{
content:"";
position:absolute;
left:-10px;
bottom:-6px;
width:110%;
height:55px;
border:4px solid #f2b93b;
border-radius:50%;
}

.hero-left p{
font-size:22px;
line-height:1.7;
color:#c2d0da;
margin-bottom:35px;
}

.price-card{
background:#071423;
border:1px solid rgba(93,242,207,.15);
border-radius:24px;
padding:25px;
box-shadow:0 0 40px rgba(0,255,180,.08);
}

.card-top{
display:flex;
justify-content:space-between;
margin-bottom:20px;
}

.badge-green{
background:#072d28;
padding:8px 15px;
border-radius:30px;
font-size:12px;
font-weight:700;
color:#5df2cf;
}

.badge-yellow{
background:#46360a;
padding:8px 15px;
border-radius:30px;
font-size:12px;
font-weight:700;
color:#ffd767;
}

.price{
font-size:64px;
font-weight:800;
color:#ffd54f;
}

.price span{
font-size:32px;
}

.price small{
font-size:22px;
text-decoration:line-through;
color:#7c8892;
margin-left:15px;
}

.price-card hr{
margin:20px 0;
border:none;
border-top:1px solid rgba(255,255,255,.08);
}

.price-note{
color:#b6c1cb;
}

.hero-buttons{
display:flex;
gap:15px;
margin-top:25px;
}

.btn-primary{
background:#5df2cf;
padding:16px 28px;
border-radius:14px;
text-decoration:none;
font-weight:700;
color:#021013;
}

.btn-outline{
border:1px solid #32404b;
padding:16px 28px;
border-radius:14px;
text-decoration:none;
color:#fff;
}

.dashboard-card{
background:#081522;
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
padding:15px;
margin-bottom:20px;
}

.dashboard-card img{
width:100%;
display:block;
border-radius:12px;
}

.hero-right{
display:flex;
flex-direction:column;
gap:20px;
}

.dashboard-card,
.uw-panel,
.steps{
margin-bottom:0;
}

/* ===== UNLIMITED PANEL ===== */

.uw-panel{
display:flex;
align-items:center;
gap:22px;

background:#081522;
padding:25px;

border-radius:20px;

border:1px solid rgba(93,242,207,.15);

margin-bottom:20px;

box-shadow:0 0 40px rgba(0,255,180,.05);
}

.uw-badge{
width:160px;
flex-shrink:0;
}

.uw-badge svg{
width:100%;
display:block;
}

.uw-spin{
transform-origin:center;
animation:uwSpin 28s linear infinite;
}

.uw-ring-text{
fill:rgba(93,242,207,.55);
font-size:8px;
letter-spacing:2px;
}

.uw-pulse{
opacity:.3;
animation:uwPulse 3s infinite;
}

.uw-percent{
font-size:32px;
font-weight:800;
fill:#5df2cf;
}

.uw-unlimited{
font-size:11px;
font-weight:700;
letter-spacing:3px;
fill:#7ff9dc;
}

.uw-infinity{
font-size:16px;
fill:rgba(255,255,255,.5);
}

.uw-copy{
flex:1;
}

.uw-copy h3{
font-size:28px;
font-weight:800;
margin-bottom:14px;
line-height:1.2;
}

.uw-copy h3 span{
color:#5df2cf;
}

.uw-copy p{
color:#c2d0da;
line-height:1.7;
margin-bottom:18px;
}

.uw-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.uw-tags span{
display:flex;
align-items:center;
gap:8px;

padding:10px 14px;

background:#0b1b2c;

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

border-radius:30px;

font-size:13px;

color:#d7e4ec;
}

.uw-tags svg{
width:14px;
height:14px;
color:#5df2cf;
flex-shrink:0;
}

@keyframes uwSpin{
from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}
}

@keyframes uwPulse{

0%{
opacity:.15;
transform:scale(.95);
}

50%{
opacity:.55;
transform:scale(1);
}

100%{
opacity:.15;
transform:scale(.95);
}

}

/* ===== MOBILE ===== */

@media(max-width:900px){

.hero-grid{
grid-template-columns:1fr;
}

.menu,
.nav-btn{
display:none;
}

.hero-left h1{
font-size:34px;
}

.hero-left p{
font-size:18px;
}

.price{
font-size:48px;
}

.uw-panel{
flex-direction:column;
text-align:center;
}

.uw-badge{
width:180px;
}

.uw-copy h3{
font-size:24px;
}

.uw-tags{
justify-content:center;
}

.steps{
flex-direction:column;
gap:10px;
}

}

@media(max-width:600px){

.hero{
padding:35px 0;
}

.hero-left h1{
font-size:28px;
}

.hero-buttons{
flex-direction:column;
}

.btn-primary,
.btn-outline{
text-align:center;
}

.card-top{
flex-direction:column;
gap:10px;
}

}

/* ===== CARA KERJA ===== */

.steps{

display:flex;
justify-content:center;
align-items:center;
gap:24px;

background:#081522;

padding:22px 30px;

border-radius:18px;

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

margin-bottom:16px;

}

.step-item{

display:flex;
align-items:center;

gap:12px;

font-size:18px;

font-weight:700;

color:#fff;

white-space:nowrap;

}

.step-num{

width:28px;
height:28px;

display:flex;

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

border-radius:8px;

background:rgba(93,242,207,.08);

border:1px solid rgba(93,242,207,.25);

color:#5df2cf;

font-size:13px;

font-weight:800;

}

.step-arrow{

color:#5df2cf;

font-size:18px;

}

.steps-bottom{

display:flex;

justify-content:center;

gap:26px;

flex-wrap:wrap;

padding:4px 0;

}

.steps-bottom span{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

color:#b7c7d1;

}

.steps-bottom i{

width:8px;
height:8px;

border-radius:50%;

background:#5df2cf;

box-shadow:
0 0 10px rgba(93,242,207,.8);

display:block;

}

/* MOBILE */

@media(max-width:768px){

.steps{
display:flex;

flex-direction:column;

gap:0;

padding:18px;

}

.step-item{

display:grid;

grid-template-columns:
42px
1fr
24px;

align-items:center;

column-gap:14px;

width:100%;

padding:18px 0;

font-size:16px;

}

.step-item:not(:last-child){

border-bottom:
1px solid rgba(255,255,255,.06);

}

.step-num{

width:30px;
height:30px;

}

.step-arrow{

display:block;

justify-self:end;

font-size:18px;

color:#5df2cf;

margin:0;

}

.steps-bottom{

justify-content:flex-start;

gap:12px;

padding-top:16px;

}
}

/* ===== PLATFORM ===== */

.platform{
padding:110px 0 80px;
border-top:1px solid rgba(255,255,255,.06);
position:relative;
z-index:2;
}

.platform .container{
max-width:1200px;
}

.platform-box{

display:grid;

grid-template-columns:
minmax(0,1fr)
minmax(320px,520px);

align-items:center;

gap:50px;

background:#081522;

padding:44px;

border-radius:28px;

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

box-shadow:
0 0 60px rgba(0,255,180,.03);

overflow:hidden;

}

.platform-left,
.platform-right{
min-width:0;
}

.platform-left{

display:flex;

flex-direction:column;

justify-content:center;

}

.platform-label{

display:inline-block;

font-size:12px;

font-weight:800;

letter-spacing:2px;

color:#5df2cf;

margin-bottom:18px;

}

.platform-left h2{
font-size:44px;
line-height:1.15;
margin-bottom:18px;
}

.platform-left p{
font-size:18px;
line-height:1.8;
max-width:480px;
}

.os-info h3{
font-size:22px;
margin-bottom:2px;
}

.os-info p{
font-size:14px;
}

.download-btn{
font-size:18px;
padding:18px 28px;
}

.download-note{
font-size:14px;
}

.platform-left h2 span{
color:#7ff9dc;
}


.platform-right{

display:flex;

flex-direction:column;

gap:16px;

}

.os-card{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

padding:22px 26px;

border-radius:20px;

background:#07111d;

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

}

.os-info{

display:flex;

align-items:center;

gap:18px;

}

.os-icon{

width:46px;

font-size:36px;

text-align:center;

flex-shrink:0;

}


.os-info p{

color:#93a8b6;

font-size:15px;

}

.os-status{

display:flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:999px;

background:
rgba(93,242,207,.08);

border:
1px solid rgba(93,242,207,.18);

color:#5df2cf;

font-size:12px;

font-weight:800;

white-space:nowrap;

}

.os-status i{

width:8px;

height:8px;

border-radius:50%;

background:#5df2cf;

box-shadow:0 0 12px #5df2cf;

display:block;

}

.platform-cta{

display:flex;

flex-direction:column;

align-items:center;

margin-top:40px;

}

.download-btn{

display:flex;

align-items:center;

gap:18px;

padding:20px 34px;

background:#5df2cf;

color:#021013;

text-decoration:none;

font-size:22px;

font-weight:800;

border-radius:18px;

}

.download-btn span{

width:36px;

height:36px;

display:flex;

align-items:center;

justify-content:center;

background:#021013;

color:#5df2cf;

border-radius:12px;

}

.download-note{

margin-top:16px;

color:#93a8b6;

}

.download-note span{

color:#ffd767;

font-weight:700;

}

/* MOBILE */

@media(max-width:900px){

.platform{
padding:70px 0;
}

.platform-box{

grid-template-columns:1fr;

padding:28px;

gap:28px;

}

.platform-left h2{
font-size:38px;
}

.platform-left p{
font-size:18px;
}

.os-info h3{
font-size:22px;
}

.download-btn{

width:100%;

justify-content:center;

font-size:18px;

}

}

@media(max-width:600px){

.os-card{

flex-direction:column;

align-items:flex-start;

}

.os-status{

margin-top:10px;

}

}

/* ===== PLATFORM MOBILE FIX ===== */

@media(max-width:768px){

.platform{
padding:60px 0;
overflow:hidden;
}

.platform .container{
max-width:100%;
padding:0 14px;
}

.platform-box{

display:grid;

grid-template-columns:1fr;

width:100%;

padding:20px;

gap:22px;

border-radius:22px;

}

.platform-left,
.platform-right{

width:100%;

min-width:0;

}

.platform-left h2{

font-size:30px;

line-height:1.2;

word-break:break-word;

}

.platform-left p{

font-size:16px;

line-height:1.7;

max-width:100%;

}

.os-card{

width:100%;

display:flex;

flex-direction:column;

align-items:stretch;

padding:18px;

gap:16px;

}

.os-info{

width:100%;

min-width:0;

gap:14px;

}

.os-icon{

width:44px;
height:44px;

font-size:28px;

}

.os-info h3{

font-size:18px;

margin-bottom:2px;

}

.os-info p{

font-size:13px;

white-space:normal;

}

.os-status{

width:100%;

justify-content:center;

padding:12px;

}

.download-btn{

width:100%;

padding:16px;

font-size:16px;

justify-content:center;

}

.download-note{

text-align:center;

font-size:13px;

line-height:1.6;

}

}

/* ===== PROOF ===== */

.proof{
border-top:
1px solid rgba(93,242,207,.10);
}

.proof{
padding:100px 0;
overflow:hidden;
position:relative;
}

.proof-head{
display:flex;
justify-content:space-between;
gap:40px;
align-items:flex-end;
margin-bottom:40px;
}

.proof-head > div{
max-width:760px;
}

.section-tag{
display:inline-block;
padding:8px 14px;

background:#072d28;

border:1px solid rgba(93,242,207,.18);

border-radius:999px;

font-size:12px;

font-weight:800;

letter-spacing:1px;

color:#5df2cf;

margin-bottom:18px;
}

.proof h2{
font-size:46px;
line-height:1.15;
margin-bottom:16px;
}

.accent{
color:#7ff9dc;
}

.proof-head p{
max-width:430px;

color:#aab7c2;

line-height:1.8;

font-size:16px;
}

/* STATS */

.proof-stats{

display:grid;

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

gap:18px;

margin-bottom:40px;

}

.proof-stat{

background:#081522;

padding:26px;

border-radius:22px;

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

}

.proof-stat-num{

display:block;

font-size:28px;

font-weight:800;

margin-bottom:8px;

}

.proof-stat-num em{

font-style:normal;

color:#5df2cf;

}

.proof-stat-label{

color:#9fb0bc;

font-size:14px;

line-height:1.7;

}

/* MARQUEE */

.marquee{
overflow:hidden;
}

.marquee-track{

display:flex;

gap:22px;

width:max-content;

animation:
proofSlide
28s linear infinite;

}

@keyframes proofSlide{

from{
transform:translateX(0);
}

to{
transform:translateX(-50%);
}

}

.proof-card{

width:320px;

flex-shrink:0;

background:#081522;

border-radius:22px;

overflow:hidden;

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

}

.proof-card img{

width:100%;

display:block;

}

.proof-card-meta{

display:flex;

justify-content:space-between;

padding:18px;

}

.proof-card-meta span{

color:#5df2cf;

}

/* FOOT */

.proof-foot{

display:flex;

gap:14px;

align-items:flex-start;

margin-top:36px;

padding:24px;

background:#081522;

border-radius:20px;

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

}

.proof-foot-icon{

width:24px;

flex-shrink:0;

color:#5df2cf;

}

.proof-foot p{

color:#9fb0bc;

line-height:1.8;

}

/* CTA */

.cta-wrap{

display:flex;

flex-direction:column;

align-items:center;

margin-top:42px;

}

.cta-btn{

display:flex;

align-items:center;

gap:14px;

padding:20px 32px;

background:#5df2cf;

color:#021013;

font-weight:800;

text-decoration:none;

border-radius:18px;

}

.cta-btn svg{

width:20px;

}

.cta-note{

margin-top:14px;

color:#93a8b6;

}

.cta-note b{
color:#ffd767;
}

/* MOBILE */

@media(max-width:768px){

.proof{
padding:70px 0;
}

.proof-head{

flex-direction:column;

align-items:flex-start;

}

.proof h2{
font-size:32px;
}

.proof-stats{

grid-template-columns:1fr;

}

.proof-card{

width:260px;

}

.proof-foot{

flex-direction:column;

}

.cta-btn{

width:100%;

justify-content:center;

}

}

/* ===== KENAPA SEKARANG ===== */

.why-now{
padding:110px 0;
border-top:1px solid rgba(93,242,207,.08);
}

.why-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:50px;
margin-bottom:50px;
}

.why-title{
max-width:760px;
}

.why-tag{
display:inline-block;
padding:8px 14px;
border-radius:999px;
background:#072d28;
border:1px solid rgba(93,242,207,.18);
color:#5df2cf;
font-size:12px;
font-weight:800;
letter-spacing:1px;
margin-bottom:20px;
}

.why-title h2{
    font-size:46px;
    line-height:1.15;
    font-weight:700;
}

.why-desc{
max-width:320px;
font-size:17px;
line-height:1.8;
color:#9fb0bc;
}

.why-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.why-card{
position:relative;
background:#081522;
padding:36px;
border-radius:26px;
border:1px solid rgba(255,255,255,.08);
transition:.3s;
}

.why-card:hover{
transform:translateY(-4px);
border-color:rgba(93,242,207,.25);
box-shadow:0 0 40px rgba(93,242,207,.08);
}

.why-number{
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:800;
margin-bottom:28px;
}

.why-number.pink{
background:#ff4f8b;
color:#fff;
}

.why-number.purple{
background:#8b7cff;
color:#fff;
}

.why-number.yellow{
background:#e7b93c;
color:#021013;
}

.why-card h3{
font-size:28px;
margin-bottom:16px;
line-height:1.3;
}

.why-card p{
font-size:16px;
line-height:1.9;
color:#aab7c2;
}

.why-cta{
display:flex;
flex-direction:column;
align-items:center;
margin-top:50px;
}

.why-btn{
display:flex;
align-items:center;
gap:14px;
padding:20px 34px;
background:#5df2cf;
color:#021013;
font-weight:800;
text-decoration:none;
border-radius:18px;
font-size:18px;
}

.why-btn span{
font-size:22px;
}

.why-note{
margin-top:14px;
color:#93a8b6;
}

.why-note b{
color:#ffd767;
}

/* MOBILE */

@media(max-width:900px){

.why-head{
flex-direction:column;
}

.why-title h2{
    font-size:46px;
    line-height:1.15;
    margin-bottom:0;
}

.why-grid{
grid-template-columns:1fr;
}hy

}

@media(max-width:600px){

.why-now{
padding:70px 0;
}

.why-title h2{
font-size:32px;
}

.why-card{
padding:26px;
}

.why-card h3{
font-size:22px;
}

.why-btn{
width:100%;
justify-content:center;
}

}

/* ===== HITUNG CUAN ===== */

.income{
padding:110px 0;
border-top:1px solid rgba(93,242,207,.08);
}

.income-head{
display:flex;
justify-content:space-between;
gap:50px;
align-items:flex-end;
margin-bottom:45px;
}

.income-head > div{
max-width:760px;
}

.income-head h2{
font-size:46px;
line-height:1.15;
}

.income-head p{
max-width:380px;
color:#9fb0bc;
line-height:1.8;
}

.income-box{
display:grid;
grid-template-columns:1.2fr .9fr;
gap:24px;
background:#081522;
padding:26px;
border-radius:28px;
border:1px solid rgba(255,255,255,.08);
}

.income-label{
display:inline-flex;
padding:10px 18px;
border-radius:999px;
background:#0b1b2c;
border:1px solid rgba(255,255,255,.08);
font-size:13px;
margin-bottom:18px;
color:#b7c7d1;
}

.income-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.field{
background:#0b1b2c;
border-radius:18px;
padding:16px;
border:1px solid rgba(255,255,255,.08);
}

.field label{
display:block;
font-size:13px;
margin-bottom:10px;
color:#9fb0bc;
}

.field input{
width:100%;
background:none;
border:none;
outline:none;
font-size:30px;
font-weight:800;
color:#fff;
}

.income-result{
background:#e7b93c;
border-radius:24px;
padding:28px;
color:#021013;
display:flex;
flex-direction:column;
justify-content:center;
}

.income-result span{
font-size:12px;
font-weight:800;
letter-spacing:1px;
}

.income-result h3{
font-size:58px;
margin:12px 0;
line-height:1;
}

.income-result p{
font-size:14px;
opacity:.8;
}

.income-result hr{
margin:20px 0;
border:none;
border-top:1px solid rgba(0,0,0,.15);
}

.income-result small{
line-height:1.8;
}

.income-cta{
display:flex;
flex-direction:column;
align-items:center;
margin-top:40px;
}

/* MOBILE */

@media(max-width:900px){

.income-head{
flex-direction:column;
align-items:flex-start;
}

.income-box{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.income{
padding:70px 0;
}

.income-head h2{
font-size:32px;
}

.income-grid{
grid-template-columns:1fr;
}

.income-result h3{
font-size:42px;
}

}

/* ===== WORKFLOW ===== */

.workflow{
padding:110px 0;
border-top:1px solid rgba(93,242,207,.08);
}

.workflow-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:50px;
margin-bottom:45px;
}

.workflow-head h2{
font-size:46px;
line-height:1.15;
max-width:650px;
}

.workflow-head p{
max-width:360px;
line-height:1.8;
color:#9fb0bc;
}

.workflow-box{

display:grid;
grid-template-columns:1.15fr .95fr;
gap:36px;

background:#081522;

padding:28px;

border-radius:28px;

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

}

.workflow-image img{
width:100%;
display:block;
border-radius:18px;
}

.workflow-tag{

display:inline-flex;

padding:8px 14px;

border-radius:999px;

background:#072d28;

border:1px solid rgba(93,242,207,.18);

color:#5df2cf;

font-size:12px;

font-weight:800;

letter-spacing:1px;

margin-bottom:22px;

}

.workflow-content h3{

font-size:32px;

line-height:1.15;

margin-bottom:22px;

}

.workflow-content p{

color:#b7c7d1;

line-height:1.9;

margin-bottom:24px;

}

.workflow-list{
display:flex;
flex-direction:column;
gap:10px;
}

.workflow-item{

display:flex;
align-items:center;
gap:14px;

padding:14px 16px;

background:#0b1b2c;

border-radius:14px;

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

font-size:15px;

}

.workflow-item span{

width:30px;
height:30px;

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

border-radius:50%;

background:rgba(93,242,207,.08);

border:1px solid rgba(93,242,207,.20);

color:#5df2cf;

font-size:11px;
font-weight:800;

flex-shrink:0;

}

/* HOVER */

.workflow-item:hover{

border-color:rgba(93,242,207,.25);

transform:translateX(4px);

transition:.25s;

}

/* MOBILE */

@media(max-width:900px){

.workflow-head{
flex-direction:column;
}

.workflow-box{
grid-template-columns:1fr;
}

.workflow-content h3{
font-size:34px;
}

}

@media(max-width:768px){

.workflow{
padding:70px 0;
}

.workflow-head h2{
font-size:32px;
}

.workflow-content h3{
font-size:28px;
}

.workflow-box{
padding:20px;
}

.workflow-item{
font-size:14px;
}

}

/* ===== WORKFLOW FEATURE GRID ===== */

.feature-grid{

margin-top:60px;

display:grid;

grid-template-columns:
repeat(3,minmax(0,1fr));

gap:18px;

}

.feature-card{

position:relative;

padding:28px;

border-radius:24px;

background:#081522;

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

overflow:hidden;

transition:.25s;

}

.feature-card:hover{

transform:translateY(-4px);

border-color:rgba(93,242,207,.25);

}

/* warna tema gelap */

.feature-card:nth-child(1){

background:
linear-gradient(
135deg,
#102238,
#0b1830
);

}

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

background:
linear-gradient(
135deg,
#0d2221,
#0a1820
);

}

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

background:
linear-gradient(
135deg,
#171d38,
#10192b
);

}

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

background:
linear-gradient(
135deg,
#231f18,
#141a22
);

}

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

background:
linear-gradient(
135deg,
#26200d,
#171d24
);

}

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

background:
linear-gradient(
135deg,
#14171d,
#0c151f
);

}

.feature-icon{

width:44px;
height:44px;

display:flex;

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

border-radius:14px;

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

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

font-size:18px;

margin-bottom:22px;

color:#5df2cf;

}

.feature-badge{

position:absolute;

top:18px;
right:18px;

padding:6px 10px;

border-radius:999px;

font-size:11px;

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

color:#d9e5ef;

}

.feature-card h4{

font-size:28px;

margin-bottom:14px;

}

.feature-card p{

font-size:15px;

line-height:1.8;

color:#bfd0db;

}

.feature-cta{

margin-top:42px;

display:flex;

flex-direction:column;

align-items:center;

}

.feature-btn{

display:flex;

align-items:center;

gap:14px;

padding:18px 30px;

background:#5df2cf;

color:#021013;

text-decoration:none;

font-weight:800;

border-radius:18px;

}

.feature-btn span{

font-size:20px;

}

.feature-note{

margin-top:16px;

color:#93a8b6;

font-size:14px;

}

/* MOBILE */

@media(max-width:900px){

.feature-grid{

grid-template-columns:1fr;

}

.feature-card{

padding:22px;

}

.feature-card h4{

font-size:22px;

}

}

/* SECTION */

.flow{
padding:120px 0;
background:#030c16;
}

.flow-head{
display:flex;
justify-content:space-between;
gap:80px;
margin-bottom:50px;
}

.flow-tag{
display:inline-block;
padding:8px 14px;
background:#101b26;
border-radius:30px;
font-size:12px;
color:#5df2cf;
}

.flow-head h2{
font-size:64px;
line-height:1.05;
max-width:700px;
}

.flow-head p{
max-width:340px;
color:#96a7b7;
}


/* BOX */

.flow-box{

background:#081522;

border-radius:30px;

padding:34px;

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

}


.flow-steps{

display:grid;

grid-template-columns:
1fr auto 1fr auto 1fr;

gap:30px;

}


.flow-card{

background:#0c1b2b;

border-radius:24px;

padding:36px;

height:250px;

display:flex;

flex-direction:column;

justify-content:flex-end;

position:relative;

overflow:hidden;

}


.flow-arrow{

font-size:42px;

color:#5df2cf;

display:flex;

align-items:center;

animation:
arrowBlink 6s infinite;

}


@keyframes arrowBlink{

0%,20%{
opacity:.2;
}

35%{
opacity:1;
}

100%{
opacity:.2;
}

}


/* LINK */

.yt-input{

width:220px;

max-width:100%;

height:56px;

display:flex;

align-items:center;

gap:12px;

padding:0 14px;

background:#fff;

border-radius:16px;

overflow:hidden;

white-space:nowrap;

}

.yt-icon{
color:#000;
font-weight:800;
}

#typedLink{

color:#222;

font-size:13px;

overflow:hidden;

text-overflow:ellipsis;

}


/* SELECT */

.clip-select{

display:flex;

gap:10px;

}

.clip-select button{

width:54px;

height:54px;

border:none;

background:#fff;

border-radius:14px;

font-size:22px;

font-weight:800;

color:#666;

transition:.4s;

}

.clip-select .active{

color:#000;

box-shadow:
0 0 0 2px #fff,
0 0 20px rgba(255,255,255,.5);

transform:scale(1.08);

}


/* RESULT */

.clip-result{

display:flex;

gap:14px;

margin-bottom:25px;

}

.mini-clip{

width:62px;

height:94px;

border-radius:14px;

background:#132538;

opacity:.2;

position:relative;

transform:
translateY(30px);

transition:
all .6s;

}

.mini-clip.show{

opacity:1;

transform:
translateY(0);

}

.mini-clip.show::after{

content:"✓";

position:absolute;

right:-8px;

top:-8px;

width:24px;

height:24px;

background:#5df2cf;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#000;

font-weight:800;

}

/* PROGRESS */

.progress{

margin-top:40px;

height:6px;

background:#152433;

border-radius:20px;

position:relative;

overflow:hidden;

}

.progress-fill{

width:100%;

height:100%;

background:#5df2cf;

transform-origin:left;

animation:
fillProgress 8s linear infinite;

}

.progress-dot{

position:absolute;

top:50%;

left:0;

width:18px;

height:18px;

background:#5df2cf;

border-radius:50%;

transform:
translateY(-50%);

box-shadow:
0 0 18px rgba(93,242,207,.8);

animation:
moveDot 8s linear infinite;

}

@keyframes fillProgress{

from{
transform:scaleX(0);
}

to{
transform:scaleX(1);
}

}

@keyframes moveDot{

from{
left:0;
}

to{
left:100%;
}

}