:root{
 --primary:#059AC2;
 --dark:#0A2233;
 --soft:#f6fbff;
 --blue:#2f3df5;
 --green:#22c55e;
 --light:#ffffff;
}

*{box-sizing:border-box;}

body{
 margin:0;
 font-family:'Tajawal',sans-serif;
 background:#fff;
 color:#222;
}

/* container */
.container{
 width:90%;
 max-width:1200px;
 margin:auto;
}

/* ===== HEADER ===== */

.header-lateral{
 background:#fff;
 border-bottom:1px solid #eee;
 position:sticky;
 top:0;
 z-index:50;
}

.header-lateral-wrap{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:12px 0;
}

.logo-lateral{
 font-size:22px;
 font-weight:700;
 color:var(--primary);
}

/* nav */
.nav-lateral{
 display:flex;
 gap:25px;
}

.nav-lateral a{
 text-decoration:none;
 color:#333;
 font-weight:600;
 font-size:15px;
}

/* actions */
.header-actions{
 display:flex;
 align-items:center;
 gap:10px;
}

.btn-login{
 background:#fff;
 border:2px solid var(--primary);
 color:var(--primary);
 padding:6px 14px;
 border-radius:20px;
 font-weight:600;
 cursor:pointer;
}

.btn-start{
 background:var(--green);
 color:#fff;
 padding:7px 18px;
 border-radius:20px;
 text-decoration:none;
 font-weight:600;
}

/* lang */
.lang-switch{
 display:flex;
 gap:5px;
}

.lang-switch button{
 background:#f1f5f9;
 border:none;
 padding:4px 8px;
 border-radius:12px;
 font-size:12px;
 font-weight:600;
 cursor:pointer;
}

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

.hero-lateral{
 padding:80px 0;
 background:#fff;
}

.hero-lateral-wrap{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:40px;
 align-items:center;
}

.hero-lateral-text h1{
 font-size:42px;
 color:#111;
 margin-bottom:15px;
}

.hero-lateral-text p{
 font-size:17px;
 color:#555;
 line-height:1.7;
 margin-bottom:25px;
}

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

.btn-demo{
 background:#3b82f6;
 color:#fff;
 padding:10px 20px;
 border-radius:25px;
 text-decoration:none;
 font-weight:600;
}

/* hero mockup + slider */

.hero-lateral-mockup{
 background:#fff;
 border-radius:12px;
 box-shadow:0 15px 35px rgba(0,0,0,.08);
 overflow:hidden;
}

.browser-bar{
 background:#3b82f6;
 padding:8px;
 display:flex;
 gap:5px;
}

.browser-bar span{
 width:8px;
 height:8px;
 border-radius:50%;
 background:#fff;
 opacity:.6;
}

.browser-content{
 padding:25px;
 text-align:center;
}

.mock-stat{
 font-size:34px;
 font-weight:bold;
 color:var(--primary);
}

.mock-label{
 font-size:14px;
 color:#666;
}

/* slider */
.hero-slider{
 position:relative;
 height:120px;
}

.hero-slide{
 position:absolute;
 inset:0;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 opacity:0;
 transition:opacity .6s ease;
}

.hero-slide.active{opacity:1;}


/* ===== FEATURES ANGLED ===== */

.features-lateral-angled{
 position:relative;
 padding:120px 0;
 color:#fff;
 text-align:center;
 overflow:hidden;
}

.features-angle-bg{
 position:absolute;
 inset:-60px 0 0 0;
 background:var(--blue);
 transform:skewY(-3deg);
 z-index:1;
}

.features-lateral-inner{
 position:relative;
 z-index:2;
}

.features-lateral-inner h2{
 font-size:36px;
 margin-bottom:10px;
}

.features-lateral-inner p{
 font-size:14px;
 opacity:.9;
 max-width:700px;
 margin:0 auto 50px;
}

.features-lateral-grid-6{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:40px;
}

.feature-lateral-item{
 text-align:center;
}

.feature-icon-line{
 font-size:40px;
 margin-bottom:15px;
}

.feature-lateral-item h3{
 font-size:16px;
 margin-bottom:6px;
}

.feature-lateral-item span{
 font-size:13px;
 opacity:.85;
 display:block;
}


/* ===== HOW IT WORKS ===== */

.how-lateral{
 padding:90px 0;
 text-align:center;
 background:#fff;
}

.how-lateral h2{
 font-size:32px;
 margin-bottom:10px;
}

.how-lateral p{
 font-size:14px;
 color:#666;
 margin-bottom:30px;
}

.how-lateral-steps{
 display:flex;
 justify-content:center;
 gap:60px;
 margin-bottom:30px;
}

.how-lateral-step{
 display:flex;
 flex-direction:column;
 align-items:center;
 font-size:13px;
 color:#aaa;
 font-weight:600;
}

.how-lateral-step.active{
 color:#3b82f6;
}

.how-lateral-step.active::after{
 content:'';
 width:40px;
 height:3px;
 background:#3b82f6;
 margin-top:8px;
 border-radius:2px;
}

.how-step-icon{
 font-size:26px;
 margin-bottom:6px;
}

/* how mockup */

.how-lateral-mockup{
 max-width:720px;
 margin:0 auto;
 background:#fff;
 border-radius:14px;
 box-shadow:0 15px 40px rgba(0,0,0,.08);
 overflow:hidden;
}

.how-mock-content{
 position:relative;
 height:230px;
}

/* steps animation */

.mock-step{
 position:absolute;
 inset:0;
 opacity:0;
 transition:opacity .6s ease;
}

.mock-step.active{opacity:1;}

/* step 1 */
.step-1 .mock-circle{
 width:60px;height:60px;border-radius:50%;
 background:#22c55e;
 position:absolute;left:40px;top:50px;
}
.step-1 .mock-card-big{
 width:220px;height:90px;border-radius:10px;
 background:#f1f5f9;
 position:absolute;left:130px;top:40px;
}
.step-1 .mock-graph{
 width:160px;height:70px;border-radius:8px;
 border:3px solid #3b82f6;
 position:absolute;right:40px;bottom:50px;
}

/* step 2 */
.step-2 .mock-rect{
 width:260px;height:120px;border-radius:12px;
 background:#e0f2fe;
 position:absolute;left:80px;top:50px;
}
.step-2 .mock-line{
 width:180px;height:8px;border-radius:4px;
 background:#3b82f6;
 position:absolute;left:110px;top:80px;
}
.step-2 .mock-line.short{
 width:120px;top:100px;
}

/* step 3 */
.step-3 .mock-shield{
 width:90px;height:110px;border-radius:0 0 45px 45px;
 background:#22c55e;
 position:absolute;left:150px;top:40px;
}
.step-3 .mock-lock{
 width:50px;height:50px;border-radius:10px;
 background:#fff;
 border:3px solid #22c55e;
 position:absolute;left:170px;top:80px;
}


/* ===== CONTACT ===== */

.section.contact{
 padding:80px 0;
 text-align:center;
 background:#f8fafc;
}

.section.contact h2{
 font-size:30px;
 margin-bottom:20px;
}


/* ===== FOOTER ===== */

.footer{
 background:#081722;
 color:#fff;
 padding:15px;
 text-align:center;
 font-size:13px;
}


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

@media(max-width:900px){

.nav-lateral{display:none;}

.hero-lateral-wrap{
 grid-template-columns:1fr;
 text-align:center;
}

.hero-buttons{
 justify-content:center;
}

.features-lateral-grid-6{
 grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}

.how-lateral-steps{
 gap:25px;
}

}