:root{
--fb-blue:#1877F2;
--fb-blue-hover:#166FE5;
--fb-bg:#F0F2F5;
--fb-card:#FFFFFF;
--fb-border:#DADDE1;
--fb-text:#050505;
--fb-muted:#65676B;
--fb-soft:#E7F3FF;
--fb-green:#42B72A;
--fb-green-hover:#36A420;
--fb-red:#E41E3F;
--radius:12px;
--shadow:0 1px 2px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
body{
margin:0;
background:var(--fb-bg);
color:var(--fb-text);
font-family:'Cairo',sans-serif;
}
a{text-decoration:none;color:inherit}
.page-wrap{
max-width:1120px;
margin:0 auto;
padding:14px 12px 40px;
}
.fb-card{
background:var(--fb-card);
border:1px solid var(--fb-border);
border-radius:var(--radius);
box-shadow:var(--shadow);
}
.hero-layout{
display:grid;
grid-template-columns:1fr 1.25fr;
gap:14px;
align-items:stretch;
margin:14px 0;
}
.video-card,
.hero-card,
.form-box{
background:#fff;
border:1px solid var(--fb-border);
border-radius:var(--radius);
box-shadow:var(--shadow);
}
.video-card{padding:12px}
.video-header{
display:flex;
align-items:center;
gap:8px;
color:var(--fb-blue);
font-weight:800;
margin-bottom:10px;
}
.video-embed{
position:relative;
padding-top:56.25%;
border-radius:10px;
overflow:hidden;
background:#000;
}
.video-embed iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
}
.hero-card{
padding:22px;
display:flex;
flex-direction:column;
justify-content:center;
gap:12px;
}
.hero-chip{
width:max-content;
max-width:100%;
display:inline-flex;
align-items:center;
gap:7px;
background:var(--fb-soft);
color:var(--fb-blue);
padding:7px 12px;
border-radius:999px;
font-size:13px;
font-weight:800;
}
.hero-title{
margin:0;
font-size:34px;
line-height:1.25;
font-weight:900;
color:var(--fb-text);
}
.hero-title span{color:var(--fb-blue)}
.hero-subtitle{
margin:0;
color:#333;
font-size:15.5px;
line-height:1.9;
}
.feature-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:8px;
}
.feature-badge{
background:#F7F8FA;
border:1px solid var(--fb-border);
border-radius:10px;
padding:10px 8px;
font-size:13px;
font-weight:800;
color:var(--fb-text);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:6px;
min-height:45px;
}
.feature-badge i{color:var(--fb-blue)}
.payment-trigger{cursor:pointer}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-fb,
.btn-green,
.btn-light-fb{
border:none;
border-radius:8px;
min-height:42px;
padding:10px 15px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
font-weight:800;
font-family:inherit;
cursor:pointer;
transition:.15s ease;
}
.btn-fb{
background:var(--fb-blue);
color:#fff !important;
}
.btn-fb:hover{background:var(--fb-blue-hover);color:#fff}
.btn-green{
background:var(--fb-green);
color:#fff !important;
}
.btn-green:hover{background:var(--fb-green-hover);color:#fff}
.btn-light-fb{
background:#E4E6EB;
color:#050505 !important;
}
.btn-light-fb:hover{background:#D8DADF;color:#050505}
.form-box{
max-width:950px;
margin:14px auto 0;
padding:18px;
}
.form-title{
margin:0 0 14px;
font-size:22px;
font-weight:900;
text-align:center;
}
.form-label{
color:var(--fb-text);
font-weight:800;
font-size:14px;
margin-bottom:6px;
}
.form-control,
.form-select{
background:#F5F6F7;
border:1px solid #CCD0D5;
border-radius:8px;
min-height:44px;
font-size:15px;
}
.form-control:focus,
.form-select:focus{
border-color:var(--fb-blue);
box-shadow:0 0 0 2px rgba(24,119,242,.15);
background:#fff;
}
.form-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:12px;
}
.full-row{grid-column:1/-1}
.alert-success{
border-radius:10px;
border:1px solid #B7E4C7;
background:#E9F7EF;
color:#0F5132;
font-weight:800;
}
.voice-whatsapp{
background:#F5F6F7;
padding:12px;
border-radius:12px;
border:1px solid var(--fb-border);
position:relative;
}
.record-btn{
background:var(--fb-green);
color:#fff;
padding:13px;
border-radius:999px;
text-align:center;
font-size:16px;
font-weight:900;
user-select:none;
cursor:pointer;
}
.recording-box{
display:none;
align-items:center;
gap:10px;
margin-top:10px;
padding:10px;
background:#fff;
border-radius:10px;
border:1px solid var(--fb-border);
position:relative;
}
.recording-box .dot{
width:12px;
height:12px;
background:var(--fb-red);
border-radius:50%;
animation:pulse 1s infinite;
}
@keyframes pulse{
0%{transform:scale(1);opacity:1}
100%{transform:scale(1.7);opacity:0}
}
.slide-cancel{
display:none;
margin-top:8px;
text-align:center;
color:var(--fb-muted);
font-size:14px;
}
.slide-line{
width:100%;
height:4px;
background:#CCD0D5;
margin-top:8px;
border-radius:5px;
overflow:hidden;
display:none;
}
.slide-progress{
width:100%;
height:100%;
background:var(--fb-green);
transition:width .1s linear;
}
.mic-move{
position:absolute;
top:-54px;
right:50%;
transform:translateX(50%);
font-size:42px;
opacity:0;
transition:all .2s ease-out;
pointer-events:none;
}
.mic-active{opacity:1 !important}
.mic-cancel{opacity:.3 !important;transform:translateX(-80px) rotate(-30deg)}
@keyframes micShake{
0%{transform:translateX(-80px) rotate(-25deg)}
50%{transform:translateX(-95px) rotate(-30deg)}
100%{transform:translateX(-80px) rotate(-25deg)}
}
.mic-shake{animation:micShake .23s ease-in-out 2}
.payment-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
padding:16px;
}
.payment-modal-content{
position:relative;
background:#fff;
border:1px solid var(--fb-border);
border-radius:14px;
padding:20px;
width:100%;
max-width:430px;
box-shadow:0 12px 30px rgba(0,0,0,.20);
}
.modal-close{
position:absolute;
top:10px;
left:10px;
width:34px;
height:34px;
border:0;
border-radius:50%;
background:#E4E6EB;
color:#050505;
cursor:pointer;
}
.modal-title{
display:flex;
align-items:center;
gap:8px;
font-size:18px;
font-weight:900;
margin:0 0 14px;
}
.payment-box{
display:flex;
gap:12px;
align-items:center;
padding:13px;
border:1px solid var(--fb-border);
border-radius:12px;
background:#F5F6F7;
margin-bottom:10px;
}
.payment-box > i{
font-size:24px;
color:var(--fb-blue);
}
.payment-sub{
font-size:13px;
color:var(--fb-muted);
}
.bank-number{
font-weight:900;
font-size:16px;
letter-spacing:1px;
}
.modal-note{
margin:10px 0 0;
font-size:14px;
color:var(--fb-muted);
line-height:1.7;
}
@media(max-width:900px){
.hero-layout{grid-template-columns:1fr}
.hero-card{order:1}
.video-card{order:2}
.feature-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media(max-width:640px){
.page-wrap{padding:10px 8px 32px}
.hero-card,.form-box{padding:14px}
.hero-title{font-size:28px}
.hero-subtitle{font-size:14.5px}
.form-grid{grid-template-columns:1fr}
.btn-fb,.btn-green,.btn-light-fb{width:100%}
.feature-badge{font-size:12px;padding:9px 6px}
}