:root{
--bg:#f5f8fa;
--surface:#ffffff;
--surface-soft:#edf3f6;
--text:#0b2233;
--muted:#688091;
--border:#dce7ec;

--navy:#081b2c;
--purple:#0f3d5e;
--purple2:#00a6c7;
--pink:#18a67e;
--blue:#00a6c7;
--green:#18a67e;
--red:#e25555;

--shadow:0 28px 70px rgba(25,31,64,.10);
--shadow-heavy:0 40px 100px rgba(25,31,64,.16);
}

[data-theme="dark"]{
--bg:#07131f;
--surface:#0d2233;
--surface-soft:#102a3d;
--text:#f4fbff;
--muted:#9db2bf;
--border:#1b3a4c;

--shadow:0 28px 70px rgba(0,0,0,.35);
--shadow-heavy:0 45px 110px rgba(0,0,0,.48);
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:"Cairo",sans-serif;
background:var(--bg);
color:var(--text);
transition:background .3s ease,color .3s ease;
overflow-x:hidden;
}

a{
color:inherit;
text-decoration:none;
}

button,
input{
font-family:inherit;
}

.shell{
width:min(1500px,calc(100% - 52px));
margin:auto;
}

.page-noise{
position:fixed;
inset:0;
pointer-events:none;
opacity:.022;
z-index:9999;
background-image:
radial-gradient(#000 0.7px,transparent .7px);
background-size:6px 6px;
}


/* HEADER */

.header{
position:sticky;
top:0;
z-index:1000;
background:color-mix(in srgb,var(--surface) 90%,transparent);
backdrop-filter:blur(20px);
border-bottom:1px solid var(--border);
}

.nav{
height:82px;
display:flex;
align-items:center;
gap:34px;
}

.logo{
display:flex;
align-items:center;
gap:11px;
direction:ltr;
margin-left:auto;
}

.logo-mark{
width:38px;
height:38px;
border-radius:12px;
background:
linear-gradient(145deg,#0f3d5e,#00a6c7);
display:flex;
align-items:flex-end;
justify-content:center;
gap:3px;
padding:9px;
box-shadow:0 9px 22px rgba(109,74,255,.28);
}

.logo-mark span{
width:4px;
border-radius:5px;
background:#fff;
}

.logo-mark span:nth-child(1){height:10px}
.logo-mark span:nth-child(2){height:18px}
.logo-mark span:nth-child(3){height:14px}

.logo strong{
font-family:"Cairo",Arial,sans-serif;
font-size:22px;
letter-spacing:-1px;
display:block;
line-height:1;
}

.logo strong span{
color:var(--purple);
}

.logo small{
display:block;
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
letter-spacing:.8px;
color:var(--muted);
margin-top:6px;
}

.menu{
display:flex;
align-items:center;
gap:27px;
}

.menu a{
font-size:12px;
font-weight:700;
color:var(--muted);
position:relative;
transition:.2s;
}

.menu a:hover,
.menu a.active{
color:var(--purple);
}

.menu a.active:after{
content:"";
position:absolute;
right:20%;
left:20%;
bottom:-14px;
height:2px;
border-radius:20px;
background:var(--purple);
}

.nav-actions{
margin-right:auto;
display:flex;
align-items:center;
gap:12px;
}

.theme-btn{
border:1px solid var(--border);
background:var(--surface);
height:40px;
min-width:68px;
padding:0 13px;
border-radius:50px;
color:var(--text);
display:flex;
justify-content:center;
align-items:center;
gap:8px;
cursor:pointer;
}

.sun{color:#f59e0b}

.login-link{
font-size:12px;
font-weight:700;
}

.btn{
border:0;
border-radius:12px;
min-height:46px;
padding:0 24px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
font-weight:800;
font-size:13px;
transition:.25s ease;
}

.btn:hover{
transform:translateY(-3px);
}

.primary{
color:#fff;
background:linear-gradient(135deg,#0f3d5e,#00a6c7 58%,#18a67e);
box-shadow:0 15px 35px rgba(109,74,255,.24);
}

.ghost{
background:var(--surface);
border:1px solid var(--border);
color:var(--text);
}

.small-btn{
min-height:40px;
padding:0 19px;
font-size:11px;
}


/* HERO */

.hero{
position:relative;
overflow:hidden;
padding:88px 0 72px;
}

.hero-grid-bg{
position:absolute;
inset:0;
opacity:.36;
background-image:
linear-gradient(var(--border) 1px,transparent 1px),
linear-gradient(90deg,var(--border) 1px,transparent 1px);
background-size:80px 80px;
mask-image:linear-gradient(to bottom,black,transparent 85%);
}

.hero-glow{
position:absolute;
border-radius:50%;
filter:blur(70px);
pointer-events:none;
}

.hero-glow-one{
width:420px;
height:420px;
background:rgba(109,74,255,.14);
top:-160px;
right:15%;
}

.hero-glow-two{
width:360px;
height:360px;
background:rgba(236,72,153,.10);
bottom:-190px;
left:8%;
}

.hero-layout{
position:relative;
display:grid;
grid-template-columns:.88fr 1.12fr;
align-items:center;
gap:65px;
}

.hero-content{
padding:20px 0;
}

.hero-badge{
display:inline-flex;
align-items:center;
gap:9px;
padding:8px 14px;
border-radius:100px;
font-size:11px;
font-weight:700;
color:var(--purple);
background:rgba(109,74,255,.08);
border:1px solid rgba(109,74,255,.13);
}

.badge-dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 0 5px rgba(22,184,147,.10);
}

.hero h1{
font-size:67px;
line-height:1.28;
letter-spacing:-3px;
margin:24px 0 18px;
}

.gradient-text{
font-family:"Cairo",Arial,sans-serif;
background:linear-gradient(135deg,#0f3d5e,#00a6c7 58%,#18a67e);
-webkit-background-clip:text;
color:transparent;
}

.hero-subline{
font-weight:700;
}

.hero-intro{
font-size:16px;
line-height:2;
color:var(--muted);
max-width:700px;
}

.hero-intro strong{
color:var(--text);
direction:ltr;
display:inline-block;
}

.hero-actions{
display:flex;
gap:13px;
margin-top:30px;
}

.hero-btn{
min-height:54px;
padding:0 30px;
}

.hero-trust{
display:flex;
gap:30px;
margin-top:35px;
}

.hero-trust > div{
display:flex;
align-items:flex-start;
gap:9px;
}

.hero-trust i{
width:25px;
height:25px;
border-radius:50%;
background:rgba(22,184,147,.11);
color:var(--green);
display:flex;
align-items:center;
justify-content:center;
font-style:normal;
font-weight:800;
}

.hero-trust span{
display:block;
}

.hero-trust strong{
display:block;
font-size:10px;
}

.hero-trust small{
display:block;
font-size:8px;
color:var(--muted);
margin-top:2px;
}


/* TERMINAL */

.terminal-wrap{
position:relative;
direction:ltr;
}

.terminal{
background:#0b1122;
border:1px solid #27314d;
border-radius:28px;
padding:22px;
box-shadow:
0 50px 100px rgba(19,25,57,.25),
0 0 0 7px rgba(255,255,255,.35);
color:#fff;
overflow:hidden;
}

[data-theme="dark"] .terminal{
box-shadow:0 50px 110px rgba(0,0,0,.55);
}

.terminal-top{
display:flex;
justify-content:space-between;
align-items:center;
padding-bottom:17px;
border-bottom:1px solid #222e49;
}

.terminal-mini{
font-family:"Cairo",Arial,sans-serif;
font-size:8px;
color:#8c9bb8;
letter-spacing:1px;
display:block;
}

.terminal-top strong{
display:block;
font-family:"Cairo",Arial,sans-serif;
font-size:14px;
margin-top:5px;
}

.terminal-status{
display:flex;
align-items:center;
gap:7px;
font-family:"Cairo",Arial,sans-serif;
font-size:8px;
color:#6fe3bd;
}

.terminal-status span{
width:8px;
height:8px;
border-radius:50%;
background:#35d6a3;
box-shadow:0 0 15px #35d6a3;
}

.market-row{
display:grid;
grid-template-columns:repeat(4,1fr);
border-bottom:1px solid #222e49;
}

.market-row div{
padding:15px 12px;
border-right:1px solid #222e49;
}

.market-row div:last-child{
border-right:0;
}

.market-row small{
color:#7584a0;
font-family:"Cairo",Arial,sans-serif;
font-size:8px;
display:block;
}

.market-row strong{
font-family:"Cairo",Arial,sans-serif;
font-size:14px;
display:block;
margin-top:4px;
}

.positive{
color:#35d6a3!important;
}

.chart-area{
height:350px;
position:relative;
overflow:hidden;
background:linear-gradient(180deg,#0c1429,#090f1d);
}

.chart-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(#1e2943 1px,transparent 1px),
linear-gradient(90deg,#1e2943 1px,transparent 1px);
background-size:65px 55px;
opacity:.55;
}

.price-scale{
position:absolute;
right:8px;
top:15px;
bottom:20px;
display:flex;
flex-direction:column;
justify-content:space-between;
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
color:#586884;
}

.trend-svg{
position:absolute;
inset:0 35px 0 10px;
width:calc(100% - 50px);
height:100%;
z-index:4;
filter:drop-shadow(0 0 9px rgba(139,92,246,.35));
}

.candles{
position:absolute;
inset:0 38px 0 10px;
z-index:3;
}

.candle{
position:absolute;
width:11px;
border-radius:2px;
}

.candle i{
position:absolute;
width:1px;
height:150%;
left:50%;
top:-25%;
background:currentColor;
}

.candle.up{
background:#22c995;
color:#22c995;
}

.candle.down{
background:#f35d75;
color:#f35d75;
}

.analysis-note{
position:absolute;
z-index:8;
background:rgba(13,22,42,.92);
border:1px solid #293650;
border-radius:10px;
padding:8px 11px;
box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.analysis-note span{
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
color:#8d77ff;
}

.analysis-note strong{
font-family:"Cairo",Arial,sans-serif;
display:block;
font-size:8px;
margin:2px 0;
}

.analysis-note small{
font-size:7px;
color:#8290a9;
direction:rtl;
display:block;
}

.note-a{
left:16%;
bottom:18%;
}

.note-b{
left:49%;
top:30%;
}

.note-c{
right:12%;
top:13%;
}

.terminal-bottom{
display:flex;
gap:25px;
align-items:center;
padding-top:18px;
}

.progress-mini{
display:grid;
grid-template-columns:auto 180px auto;
gap:10px;
align-items:center;
font-family:"Cairo",Arial,sans-serif;
font-size:8px;
color:#8290a9;
}

.progress-mini > div{
height:6px;
background:#202c47;
border-radius:20px;
overflow:hidden;
}

.progress-mini i{
height:100%;
display:block;
background:linear-gradient(90deg,#00a6c7,#18a67e);
}

.progress-mini strong{
font-size:9px;
color:#fff;
}

.terminal-module{
margin-left:auto;
text-align:right;
}

.terminal-module span{
display:block;
font-size:7px;
color:#70809d;
}

.terminal-module strong{
font-family:"Cairo",Arial,sans-serif;
font-size:10px;
}

.floating-chip{
position:absolute;
z-index:30;
padding:11px 14px;
border-radius:12px;
background:var(--surface);
border:1px solid var(--border);
box-shadow:var(--shadow);
font-family:"Cairo",Arial,sans-serif;
font-size:9px;
direction:ltr;
}

.chip-one{
top:-25px;
left:-35px;
}

.chip-two{
bottom:35px;
right:-35px;
}

.chip-two strong{
font-size:16px;
color:var(--purple);
margin-right:5px;
}

.dot-green{
display:inline-block;
width:7px;
height:7px;
border-radius:50%;
background:#28c997;
margin-right:7px;
}


/* TRUST STRIP */

.trust-strip{
padding:0 0 35px;
}

.trust-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
background:var(--surface);
border:1px solid var(--border);
border-radius:18px;
box-shadow:var(--shadow);
}

.trust-grid div{
padding:21px;
text-align:center;
border-left:1px solid var(--border);
}

.trust-grid div:last-child{
border-left:0;
}

.trust-grid strong{
display:block;
font-family:"Cairo",Arial,sans-serif;
font-size:19px;
color:var(--purple);
}

.trust-grid span{
display:block;
font-size:9px;
color:var(--muted);
margin-top:4px;
}


/* COMMON */

.section{
padding:110px 0;
}

.section-title{
margin-bottom:52px;
}

.centered{
text-align:center;
max-width:760px;
margin-left:auto;
margin-right:auto;
}

.section-kicker{
font-family:"Cairo",Arial,sans-serif;
font-size:9px;
letter-spacing:2px;
font-weight:800;
color:var(--purple);
}

.section-title h2{
font-size:40px;
letter-spacing:-1.5px;
margin:9px 0;
}

.section-title p{
color:var(--muted);
font-size:13px;
line-height:1.9;
}


/* ROADMAP */

.roadmap-section{
background:var(--surface);
}

.roadmap{
position:relative;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:24px;
}

.road-line{
position:absolute;
top:31px;
right:10%;
left:10%;
height:1px;
border-top:1px dashed #b9bfd1;
}

.road-item{
position:relative;
z-index:2;
text-align:center;
}

.road-icon{
width:63px;
height:63px;
margin:0 auto 20px;
border-radius:50%;
background:var(--surface);
border:1px solid var(--border);
display:flex;
align-items:center;
justify-content:center;
font-family:"Cairo",Arial,sans-serif;
font-size:10px;
font-weight:800;
color:var(--purple);
box-shadow:0 10px 25px rgba(24,31,67,.08);
}

.road-item.active .road-icon{
background:linear-gradient(135deg,#0f3d5e,#00a6c7 58%,#18a67e);
color:#fff;
border:0;
box-shadow:0 15px 30px rgba(109,74,255,.25);
}

.road-card{
padding:24px 17px;
border-radius:16px;
transition:.25s;
}

.road-item:hover .road-card{
background:var(--surface-soft);
transform:translateY(-5px);
}

.road-card span{
font-family:"Cairo",Arial,sans-serif;
font-size:8px;
font-weight:800;
color:var(--purple);
letter-spacing:1px;
}

.road-card h3{
font-size:20px;
margin:7px 0;
}

.road-card p{
color:var(--muted);
font-size:10px;
line-height:1.8;
}


/* LEVELS */

.levels-section{
background:
radial-gradient(circle at 90% 5%,rgba(109,74,255,.08),transparent 24%),
var(--bg);
}

.levels-layout{
display:grid;
grid-template-columns:1fr 1fr .82fr;
gap:22px;
}

.course-card,
.platform-card{
border-radius:26px;
padding:31px;
position:relative;
overflow:hidden;
}

.course-card{
background:var(--surface);
border:1px solid var(--border);
box-shadow:var(--shadow);
transition:.25s;
}

.course-card:hover{
transform:translateY(-7px);
box-shadow:var(--shadow-heavy);
}

.course-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
}

.course-level{
width:70px;
height:70px;
border-radius:19px;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
gap:4px;
font-family:"Cairo",Arial,sans-serif;
box-shadow:0 15px 28px rgba(0,0,0,.15);
}

.course-level span{
font-size:10px;
}

.course-level strong{
font-size:27px;
}

.purple-level{
background:linear-gradient(135deg,#0f3d5e,#00a6c7);
}

.blue-level{
background:linear-gradient(135deg,#0b5d7a,#18a67e);
}

.recommended{
padding:6px 11px;
border-radius:30px;
background:rgba(109,74,255,.09);
color:var(--purple);
font-size:8px;
font-weight:800;
}

.course-card h3{
direction:ltr;
text-align:right;
font-family:"Cairo",Arial,sans-serif;
font-size:23px;
margin:22px 0 9px;
}

.course-card > p{
color:var(--muted);
font-size:11px;
line-height:1.9;
min-height:58px;
}

.course-features{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin:25px 0;
}

.course-features div{
font-size:9px;
color:var(--muted);
background:var(--surface-soft);
border:1px solid var(--border);
border-radius:9px;
padding:10px;
}

.course-features span{
font-family:"Cairo",Arial,sans-serif;
color:var(--purple);
font-size:7px;
margin-left:6px;
font-weight:800;
}

.course-footer{
border-top:1px solid var(--border);
padding-top:18px;
display:flex;
justify-content:space-between;
align-items:center;
}

.course-footer small{
display:block;
font-size:7px;
color:var(--muted);
}

.course-footer strong{
font-family:"Cairo",Arial,sans-serif;
font-size:10px;
}

.circle-arrow{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
background:var(--purple);
}

.blue-arrow{
background:var(--blue);
}

.platform-card{
color:#fff;
background:
radial-gradient(circle at 20% 20%,rgba(255,255,255,.12),transparent 23%),
linear-gradient(145deg,#071b2b,#0f3d5e 58%,#087f86);
box-shadow:0 30px 70px rgba(25,31,64,.24);
}

.platform-lines{
position:absolute;
inset:0;
opacity:.12;
background-image:
linear-gradient(#fff 1px,transparent 1px),
linear-gradient(90deg,#fff 1px,transparent 1px);
background-size:42px 42px;
}

.platform-card > *{
position:relative;
}

.white-kicker{
color:#8fe5ed;
}

.platform-card h3{
font-size:31px;
line-height:1.5;
margin:17px 0;
}

.platform-card p{
font-size:11px;
line-height:1.9;
color:#c8cce0;
}

.platform-pills{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:32px;
direction:ltr;
}

.platform-pills span{
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
padding:8px 10px;
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.06);
border-radius:50px;
}


/* LAB */

.lab-section{
background:var(--surface);
}

.lab-grid{
display:grid;
grid-template-columns:.72fr 1.28fr;
gap:80px;
align-items:center;
}

.lab-copy h2{
font-size:45px;
line-height:1.5;
letter-spacing:-2px;
margin:12px 0;
}

.lab-copy h2 span{
color:var(--purple);
}

.lab-copy > p{
font-size:13px;
color:var(--muted);
line-height:2;
}

.lab-list{
margin-top:30px;
}

.lab-list > div{
display:flex;
gap:14px;
align-items:center;
padding:12px 0;
}

.lab-list i{
font-family:"Cairo",Arial,sans-serif;
font-style:normal;
font-size:8px;
width:32px;
height:32px;
border-radius:9px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(109,74,255,.09);
color:var(--purple);
font-weight:800;
}

.lab-list strong,
.lab-list small{
display:block;
}

.lab-list strong{
font-family:"Cairo",Arial,sans-serif;
font-size:10px;
}

.lab-list small{
font-size:9px;
color:var(--muted);
margin-top:3px;
}

.lab-board{
border:1px solid var(--border);
background:var(--surface);
border-radius:26px;
padding:23px;
box-shadow:var(--shadow-heavy);
}

.board-header{
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid var(--border);
padding-bottom:16px;
direction:ltr;
}

.board-header small{
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
color:var(--muted);
display:block;
}

.board-header strong{
font-family:"Cairo",Arial,sans-serif;
font-size:13px;
display:block;
margin-top:4px;
}

.board-tabs{
display:flex;
gap:5px;
padding:4px;
border-radius:10px;
background:var(--surface-soft);
}

.board-tabs span{
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
padding:7px 10px;
border-radius:7px;
}

.selected-tab{
background:var(--surface);
box-shadow:0 3px 10px rgba(20,27,60,.08);
}

.board-chart{
height:350px;
position:relative;
overflow:hidden;
margin-top:15px;
border-radius:15px;
background:
linear-gradient(var(--border) 1px,transparent 1px),
linear-gradient(90deg,var(--border) 1px,transparent 1px);
background-size:65px 55px;
}

.board-chart svg{
position:absolute;
inset:0;
width:100%;
height:100%;
color:var(--purple);
filter:drop-shadow(0 4px 7px rgba(109,74,255,.18));
}

.horizontal{
position:absolute;
right:4%;
left:4%;
border-top:1px dashed;
z-index:5;
}

.horizontal span{
position:absolute;
right:5px;
top:-22px;
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
padding:3px 7px;
border-radius:5px;
}

.resistance{
top:28%;
border-color:#e75e7e;
}

.resistance span{
background:rgba(231,94,126,.10);
color:#dc4167;
}

.support{
bottom:23%;
border-color:#25b993;
}

.support span{
background:rgba(37,185,147,.10);
color:#169c7b;
}

.breakout-label{
position:absolute;
top:15%;
left:17%;
z-index:7;
padding:7px 10px;
border-radius:9px;
background:var(--surface);
box-shadow:var(--shadow);
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
}

.breakout-label strong{
color:var(--green);
margin-left:5px;
}

.board-bottom{
display:flex;
align-items:center;
gap:20px;
padding-top:17px;
direction:ltr;
}

.board-bottom > div{
flex:1;
}

.board-bottom span{
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
color:var(--muted);
}

.lesson-progress{
height:5px;
border-radius:20px;
overflow:hidden;
background:var(--surface-soft);
margin-top:6px;
}

.lesson-progress i{
display:block;
height:100%;
background:linear-gradient(90deg,var(--purple),var(--pink));
}

.board-bottom button{
border:0;
border-radius:9px;
padding:8px 16px;
background:var(--purple);
color:#fff;
font-weight:700;
font-size:9px;
}


/* DASHBOARD */

.dashboard-section{
background:
linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--purple) 4%,var(--bg)));
}

.dashboard-shell{
display:grid;
grid-template-columns:64px 1fr;
direction:ltr;
border-radius:28px;
overflow:hidden;
background:var(--surface);
border:1px solid var(--border);
box-shadow:var(--shadow-heavy);
max-width:1250px;
margin:auto;
}

.dash-sidebar{
background:#0d1530;
padding:20px 12px;
display:flex;
flex-direction:column;
align-items:center;
}

.dash-brand{
font-family:"Cairo",Arial,sans-serif;
font-size:12px;
font-weight:800;
color:#fff;
}

.dash-brand span{
color:#00a6c7;
}

.dash-links{
display:flex;
flex-direction:column;
gap:16px;
margin-top:50px;
}

.dash-links span{
width:34px;
height:34px;
border-radius:9px;
display:flex;
align-items:center;
justify-content:center;
color:#65708e;
cursor:pointer;
}

.active-dash{
background:#00a6c7!important;
color:#fff!important;
}

.dash-avatar{
margin-top:auto;
width:31px;
height:31px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-family:"Cairo",Arial,sans-serif;
font-size:8px;
font-weight:800;
color:#fff;
background:linear-gradient(135deg,#00a6c7,#18a67e);
}

.dash-main{
padding:27px;
direction:rtl;
}

.dash-header{
display:flex;
justify-content:space-between;
align-items:center;
}

.dash-header small{
color:var(--muted);
font-size:9px;
}

.dash-header h3{
font-size:18px;
margin:3px 0;
}

.dash-date{
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
color:var(--muted);
text-align:center;
padding:8px 13px;
background:var(--surface-soft);
border-radius:10px;
}

.dash-date strong{
display:block;
font-size:16px;
color:var(--purple);
}

.dash-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin:22px 0;
}

.dash-stats > div{
padding:16px;
border-radius:13px;
background:var(--surface-soft);
border:1px solid var(--border);
}

.dash-stats span,
.dash-stats small{
display:block;
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
color:var(--muted);
}

.dash-stats strong{
font-family:"Cairo",Arial,sans-serif;
display:block;
font-size:20px;
margin:6px 0;
}

.dash-progress{
height:5px;
background:var(--border);
border-radius:10px;
overflow:hidden;
}

.dash-progress i{
display:block;
height:100%;
background:linear-gradient(90deg,var(--purple),var(--pink));
}

.dash-content{
display:grid;
grid-template-columns:1.4fr .7fr .8fr;
gap:12px;
}

.performance-panel,
.focus-panel,
.continue-panel{
border:1px solid var(--border);
border-radius:15px;
padding:18px;
background:var(--surface);
}

.panel-head{
display:flex;
justify-content:space-between;
direction:ltr;
}

.panel-head h4{
font-family:"Cairo",Arial,sans-serif;
font-size:10px;
margin:0;
}

.panel-head span{
font-size:7px;
color:var(--muted);
}

.performance-row{
direction:ltr;
display:grid;
grid-template-columns:110px 1fr 35px;
gap:10px;
align-items:center;
margin:15px 0;
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
}

.performance-row div{
height:6px;
background:var(--surface-soft);
border-radius:20px;
overflow:hidden;
}

.performance-row i{
display:block;
height:100%;
background:linear-gradient(90deg,#00a6c7,#19b7ca);
}

.performance-row strong{
font-size:8px;
}

.performance-row.weak i{
background:linear-gradient(90deg,#18a67e,#f17475);
}

.focus-panel{
background:linear-gradient(145deg,rgba(236,79,158,.06),var(--surface));
}

.focus-label,
.continue-panel > span{
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
color:var(--pink);
font-weight:800;
}

.focus-score{
display:flex;
align-items:flex-end;
gap:7px;
margin-top:17px;
direction:ltr;
}

.focus-score strong{
font-family:"Cairo",Arial,sans-serif;
font-size:31px;
color:var(--pink);
}

.focus-score span{
font-family:"Cairo",Arial,sans-serif;
font-size:9px;
margin-bottom:6px;
}

.focus-panel p{
font-size:8px;
line-height:1.8;
color:var(--muted);
}

.focus-panel button{
border:0;
background:none;
color:var(--pink);
font-size:8px;
font-weight:800;
padding:0;
}

.continue-panel{
background:
linear-gradient(145deg,rgba(109,74,255,.08),var(--surface));
}

.continue-panel > strong{
display:block;
font-family:"Cairo",Arial,sans-serif;
font-size:11px;
line-height:1.5;
margin-top:16px;
direction:ltr;
text-align:left;
}

.continue-panel small{
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
color:var(--muted);
direction:ltr;
display:block;
margin-top:5px;
}

.continue-bottom{
margin-top:27px;
display:flex;
align-items:center;
gap:10px;
direction:ltr;
}

.continue-bottom > div{
flex:1;
height:5px;
border-radius:20px;
background:var(--surface-soft);
overflow:hidden;
}

.continue-bottom i{
display:block;
height:100%;
background:var(--purple);
}

.continue-bottom button{
border:0;
border-radius:7px;
background:var(--purple);
color:#fff;
font-size:7px;
padding:7px 10px;
}


/* EXAM */

.exam-section{
background:var(--surface);
}

.exam-layout{
display:grid;
grid-template-columns:.68fr 1.32fr;
align-items:center;
gap:70px;
}

.exam-copy h2{
font-size:43px;
line-height:1.55;
margin:12px 0;
letter-spacing:-1.5px;
}

.exam-copy p{
color:var(--muted);
font-size:12px;
line-height:2;
}

.exam-features{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin:25px 0 30px;
direction:ltr;
}

.exam-features span{
font-family:"Cairo",Arial,sans-serif;
font-size:8px;
color:var(--muted);
}

.exam-window{
border-radius:23px;
overflow:hidden;
border:1px solid var(--border);
background:var(--surface);
box-shadow:var(--shadow-heavy);
direction:ltr;
}

.exam-window-top{
height:73px;
background:#101832;
color:#fff;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 22px;
}

.exam-window-top strong,
.exam-window-top span{
display:block;
font-family:"Cairo",Arial,sans-serif;
}

.exam-window-top strong{
font-size:12px;
}

.exam-window-top span{
font-size:7px;
color:#8f9cb7;
margin-top:3px;
}

.timer{
text-align:right;
}

.timer small{
font-family:"Cairo",Arial,sans-serif;
font-size:6px;
color:#8897b7;
display:block;
}

.timer strong{
font-family:"Cairo",Arial,sans-serif;
font-size:15px;
color:#5fe0b7;
}

.exam-body{
display:grid;
grid-template-columns:1fr 235px;
min-height:410px;
}

.question-side{
padding:24px;
direction:rtl;
}

.q-meta{
display:flex;
justify-content:space-between;
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
color:var(--muted);
}

.question-side h3{
font-size:15px;
line-height:1.8;
margin:19px 0;
}

.question-side label{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border:1px solid var(--border);
border-radius:9px;
margin:8px 0;
font-size:9px;
cursor:pointer;
}

.question-side label span{
width:22px;
height:22px;
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
background:var(--surface-soft);
}

.question-side input{
display:none;
}

.question-side label.chosen{
border-color:rgba(109,74,255,.45);
background:rgba(109,74,255,.05);
}

.question-side label.chosen span{
background:var(--purple);
color:#fff;
}

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

.question-actions button{
border:1px solid var(--border);
background:var(--surface);
color:var(--text);
border-radius:8px;
padding:8px 13px;
font-size:8px;
}

.question-actions .exam-next{
border-color:var(--purple);
background:var(--purple);
color:#fff;
}

.navigator{
border-left:1px solid var(--border);
padding:20px 17px;
background:var(--surface-soft);
}

.nav-title{
display:flex;
justify-content:space-between;
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
}

.nav-title span{
color:var(--muted);
}

.question-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:5px;
margin-top:18px;
}

.question-grid span{
height:27px;
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
font-family:"Cairo",Arial,sans-serif;
font-size:7px;
background:var(--surface);
border:1px solid var(--border);
}

.question-grid .answered{
background:rgba(22,184,147,.08);
border-color:rgba(22,184,147,.18);
color:#139675;
}

.question-grid .review{
background:rgba(236,79,158,.08);
border-color:rgba(236,79,158,.18);
color:#d74289;
}

.question-grid .current{
background:var(--purple);
border-color:var(--purple);
color:#fff;
}

.nav-legend{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:20px;
font-family:"Cairo",Arial,sans-serif;
font-size:6px;
color:var(--muted);
}

.nav-legend span{
display:flex;
align-items:center;
gap:4px;
}

.nav-legend i{
width:6px;
height:6px;
border-radius:50%;
}

.answered-dot{background:var(--green)}
.review-dot{background:var(--pink)}
.current-dot{background:var(--purple)}


/* CTA */

.final-cta{
padding:25px 0 95px;
background:var(--surface);
}

.final-box{
position:relative;
overflow:hidden;
min-height:220px;
border-radius:28px;
padding:48px;
display:flex;
justify-content:space-between;
align-items:center;
background:
radial-gradient(circle at 15% 20%,rgba(255,255,255,.16),transparent 23%),
linear-gradient(135deg,#081b2c,#0f3d5e 50%,#00a6c7);
color:#fff;
box-shadow:0 35px 80px rgba(109,74,255,.28);
}

.final-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
background-size:50px 50px;
}

.final-box > *{
position:relative;
}

.final-box > div:nth-child(2) span{
font-family:"Cairo",Arial,sans-serif;
font-size:9px;
letter-spacing:2px;
opacity:.7;
}

.final-box h2{
font-size:36px;
margin:7px 0;
}

.final-box p{
font-size:12px;
opacity:.78;
}

.final-button{
min-width:170px;
height:54px;
border-radius:13px;
background:#fff;
color:#4d31ca;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
font-weight:800;
font-size:12px;
transition:.2s;
}

.final-button:hover{
transform:translateY(-3px);
}


/* FOOTER */

.footer{
background:#0c1328;
color:#fff;
padding-top:60px;
}

.footer-grid{
display:grid;
grid-template-columns:1.5fr .8fr .8fr 1fr;
gap:55px;
padding-bottom:45px;
}

.footer-logo{
margin:0;
width:max-content;
}

.footer-grid > div > p{
font-size:9px;
line-height:1.9;
color:#8491ac;
max-width:300px;
}

.footer h4{
font-size:11px;
margin-top:0;
}

.footer-grid > div > a:not(.logo){
display:block;
font-size:9px;
color:#8995ae;
margin:9px 0;
}

.footer-mission{
font-size:10px!important;
}

.footer-bottom{
border-top:1px solid #1d2943;
padding:20px 0;
display:flex;
justify-content:space-between;
font-size:8px;
color:#7f8ba5;
}

.footer-bottom a{
color:#43c7d9;
font-weight:700;
}


/* ANIMATION */

.reveal{
opacity:0;
transform:translateY(25px);
transition:opacity .7s ease,transform .7s ease;
}

.reveal.visible{
opacity:1;
transform:none;
}


/* RESPONSIVE */

@media(max-width:1150px){

.menu{
display:none;
}

.hero-layout,
.lab-grid,
.exam-layout{
grid-template-columns:1fr;
}

.hero-content{
text-align:center;
}

.hero-intro{
margin-left:auto;
margin-right:auto;
}

.hero-actions,
.hero-trust{
justify-content:center;
}

.terminal-wrap{
max-width:850px;
margin:auto;
width:100%;
}

.levels-layout{
grid-template-columns:1fr 1fr;
}

.platform-card{
grid-column:1/-1;
}

.dash-content{
grid-template-columns:1fr 1fr;
}

.performance-panel{
grid-column:1/-1;
}

}


@media(max-width:780px){

.shell{
width:calc(100% - 26px);
}

.nav{
height:70px;
}

.login-link,
.small-btn{
display:none;
}

.hero{
padding-top:55px;
}

.hero h1{
font-size:43px;
letter-spacing:-1.8px;
}

.hero-intro{
font-size:13px;
}

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

.hero-btn{
width:100%;
}

.hero-trust{
display:grid;
grid-template-columns:1fr;
gap:13px;
text-align:right;
}

.terminal{
padding:13px;
border-radius:20px;
}

.floating-chip{
display:none;
}

.market-row{
grid-template-columns:1fr 1fr;
}

.market-row div{
border-bottom:1px solid #222e49;
}

.chart-area{
height:270px;
}

.analysis-note{
transform:scale(.82);
}

.terminal-bottom{
display:block;
}

.progress-mini{
grid-template-columns:auto 1fr auto;
}

.terminal-module{
margin-top:13px;
}

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

.trust-grid div{
border-bottom:1px solid var(--border);
}

.section{
padding:75px 0;
}

.section-title h2{
font-size:31px;
}

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

.road-line{
display:none;
}

.road-item{
display:grid;
grid-template-columns:60px 1fr;
text-align:right;
gap:14px;
}

.road-icon{
margin:0;
}

.road-card{
padding-top:3px;
}

.levels-layout{
grid-template-columns:1fr;
}

.platform-card{
grid-column:auto;
}

.lab-copy h2,
.exam-copy h2{
font-size:34px;
}

.board-chart{
height:275px;
}

.dashboard-shell{
grid-template-columns:1fr;
}

.dash-sidebar{
display:none;
}

.dash-main{
padding:15px;
}

.dash-stats{
grid-template-columns:1fr 1fr;
}

.dash-content{
grid-template-columns:1fr;
}

.performance-panel{
grid-column:auto;
}

.exam-body{
grid-template-columns:1fr;
}

.navigator{
display:none;
}

.final-box{
padding:30px;
display:block;
text-align:center;
}

.final-box h2{
font-size:27px;
}

.final-button{
margin:25px auto 0;
}

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

.footer-bottom{
display:block;
text-align:center;
line-height:2;
}

}


@media(max-width:500px){

.hero h1{
font-size:36px;
}

.hero-subline{
font-size:31px;
}

.course-features{
grid-template-columns:1fr;
}

.dash-stats{
grid-template-columns:1fr;
}

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

}

/* ==================================================
   CFTECOURSES V2.3 — COMFORTABLE TYPOGRAPHY
   Better Arabic readability without changing layout
   ================================================== */

/* Main navigation */
.menu a{
    font-size:14px;
}

/* Login */
.login-link{
    font-size:14px;
}

.small-btn{
    font-size:13px;
}

/* Hero */
.hero-badge{
    font-size:13px;
}

.hero-intro{
    font-size:18px;
    line-height:2;
}

.hero-trust strong{
    font-size:12px;
}

.hero-trust small{
    font-size:10px;
    line-height:1.6;
}

/* Statistics strip */
.trust-grid span{
    font-size:11px;
}

/* Section headings / descriptions */
.section-kicker{
    font-size:11px;
}

.section-title p{
    font-size:16px;
    line-height:2;
}

/* Learning roadmap */
.road-card span{
    font-size:10px;
}

.road-card p{
    font-size:13px;
    line-height:1.9;
}

/* Level cards */
.recommended{
    font-size:10px;
}

.course-card > p{
    font-size:14px;
    line-height:2;
}

.course-features div{
    font-size:12px;
    line-height:1.7;
}

.course-features span{
    font-size:9px;
}

.course-footer small{
    font-size:9px;
}

.course-footer strong{
    font-size:12px;
}

/* Why CFTeCourses */
.platform-card p{
    font-size:14px;
    line-height:2;
}

.platform-pills span{
    font-size:9px;
}

/* Chart Lab */
.lab-copy > p{
    font-size:16px;
    line-height:2;
}

.lab-list strong{
    font-size:12px;
}

.lab-list small{
    font-size:11px;
    line-height:1.7;
}

/* Dashboard */
.dash-header small{
    font-size:11px;
}

.dash-header h3{
    font-size:20px;
}

.dash-stats span,
.dash-stats small{
    font-size:9px;
}

.panel-head h4{
    font-size:12px;
}

.panel-head span{
    font-size:9px;
}

.performance-row{
    font-size:9px;
}

.performance-row strong{
    font-size:10px;
}

.focus-label,
.continue-panel > span{
    font-size:9px;
}

.focus-score span{
    font-size:11px;
}

.focus-panel p{
    font-size:11px;
    line-height:1.8;
}

.focus-panel button{
    font-size:10px;
}

/* Exam */
.exam-copy p{
    font-size:15px;
    line-height:2;
}

.exam-features span{
    font-size:10px;
}

.q-meta{
    font-size:9px;
}

.question-side h3{
    font-size:17px;
    line-height:1.9;
}

.question-side label{
    font-size:12px;
    line-height:1.7;
}

.question-actions button{
    font-size:10px;
}

/* Footer */
.footer-grid > div > p{
    font-size:11px;
    line-height:2;
}

.footer h4{
    font-size:13px;
}

.footer-grid > div > a:not(.logo){
    font-size:11px;
}

.footer-mission{
    font-size:12px!important;
}

.footer-bottom{
    font-size:10px;
}

/* Mobile readability */
@media(max-width:780px){

    .hero-intro{
        font-size:16px;
    }

    .section-title p{
        font-size:14px;
    }

    .course-card > p,
    .platform-card p{
        font-size:13px;
    }

    .lab-copy > p,
    .exam-copy p{
        font-size:14px;
    }

    .question-side label{
        font-size:11px;
    }

    .footer-bottom{
        font-size:10px;
    }
}


/* ==================================================
   CFTECOURSES V2.4 — TYPOGRAPHY CLARITY
   Larger + stronger + higher contrast
   ================================================== */

:root{
    --muted:#50697a;
}

[data-theme="dark"]{
    --muted:#b1c2cd;
}

/* Arabic text rendering */
body{
    font-weight:500;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* Navigation */
.menu a{
    font-size:15px;
    font-weight:700;
}

.login-link{
    font-size:14px;
    font-weight:700;
}

/* Hero */
.hero-badge{
    font-size:14px;
    font-weight:700;
}

.hero-intro{
    font-size:19px;
    line-height:2.05;
    font-weight:500;
    color:var(--muted);
}

.hero-intro strong{
    font-weight:800;
}

.hero-trust strong{
    font-size:13px;
    font-weight:700;
}

.hero-trust small{
    font-size:11px;
    font-weight:500;
    color:var(--muted);
}

/* Stats */
.trust-grid span{
    font-size:12px;
    font-weight:600;
}

/* Section descriptions */
.section-title p{
    font-size:17px;
    font-weight:500;
    color:var(--muted);
    line-height:2;
}

/* Roadmap */
.road-card p{
    font-size:14px;
    font-weight:500;
    color:var(--muted);
}

.road-card span{
    font-size:11px;
    font-weight:800;
}

/* Course cards */
.course-card > p{
    font-size:15px;
    font-weight:500;
    color:var(--muted);
}

.course-features div{
    font-size:13px;
    font-weight:600;
    color:var(--text);
}

.course-features span{
    font-size:10px;
    font-weight:800;
}

/* Platform */
.platform-card p{
    font-size:15px;
    font-weight:500;
    color:#d6e3ea;
}

/* Lab */
.lab-copy > p{
    font-size:17px;
    font-weight:500;
    color:var(--muted);
}

.lab-list strong{
    font-size:13px;
    font-weight:800;
}

.lab-list small{
    font-size:12px;
    font-weight:500;
    color:var(--muted);
}

/* Dashboard */
.dash-header small{
    font-size:12px;
    font-weight:600;
}

.dash-stats span,
.dash-stats small{
    font-size:10px;
    font-weight:600;
}

.performance-row{
    font-size:10px;
    font-weight:600;
}

.performance-row strong{
    font-size:11px;
}

/* Exam */
.exam-copy p{
    font-size:16px;
    font-weight:500;
    color:var(--muted);
}

.exam-features span{
    font-size:11px;
    font-weight:700;
}

.question-side h3{
    font-size:18px;
    font-weight:700;
}

.question-side label{
    font-size:13px;
    font-weight:600;
}

/* Footer */
.footer-grid > div > p{
    font-size:12px;
    font-weight:500;
    color:#a9b7c7;
}

.footer-grid > div > a:not(.logo){
    font-size:12px;
    color:#a9b7c7;
    font-weight:500;
}

.footer-bottom{
    font-size:11px;
    color:#9eacbd;
}

/* Mobile */
@media(max-width:780px){

    .hero-intro{
        font-size:17px;
    }

    .section-title p{
        font-size:15px;
    }

    .road-card p{
        font-size:14px;
    }

    .course-card > p,
    .platform-card p{
        font-size:14px;
    }

    .course-features div{
        font-size:13px;
    }

    .lab-copy > p,
    .exam-copy p{
        font-size:15px;
    }

    .question-side label{
        font-size:13px;
    }
}


/* =========================================================
   CFTECOURSES — HOMEPAGE CERTIFICATIONS V1
   ========================================================= */

.home-certifications{
    position:relative;
    padding:95px 0;
    overflow:hidden;
}

.home-certifications::before{
    content:"";
    position:absolute;
    top:20%;
    left:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(0,166,199,.06);
    filter:blur(20px);
    pointer-events:none;
}

.home-certifications-head{
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:50px;
    margin-bottom:42px;
}

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

.home-certifications-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:15px;
    color:#00a6c7;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
}

.home-certifications-eyebrow::before{
    content:"";
    width:28px;
    height:2px;
    border-radius:10px;
    background:#18a67e;
}

.home-certifications h2{
    margin:0;
    color:var(--text, #081b2c);
    font-size:clamp(36px,4vw,55px);
    line-height:1.25;
    letter-spacing:-.025em;
}

.home-certifications h2 em{
    color:#00a6c7;
    font-style:normal;
}

.home-certifications-head p{
    max-width:720px;
    margin:20px 0 0;
    color:var(--muted, #50697a);
    font-size:16px;
    font-weight:500;
    line-height:2;
}

.home-certifications-all{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:180px;
    min-height:50px;
    padding:0 20px;
    border:1px solid rgba(0,166,199,.22);
    border-radius:14px;
    background:rgba(0,166,199,.06);
    color:#0f3d5e;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    transition:.25s ease;
}

.home-certifications-all span{
    font-size:18px;
}

.home-certifications-all:hover{
    transform:translateY(-2px);
    border-color:#00a6c7;
    background:rgba(0,166,199,.1);
}


/* Cards */

.home-certifications-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.home-cert-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:370px;
    padding:23px;
    overflow:hidden;
    border:1px solid rgba(15,61,94,.11);
    border-radius:22px;
    background:var(--card, #fff);
    color:inherit;
    text-decoration:none;
    box-shadow:0 14px 45px rgba(8,27,44,.045);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.home-cert-card::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    background:linear-gradient(
        90deg,
        #00a6c7,
        #18a67e
    );
    opacity:.85;
}

.home-cert-card:hover{
    transform:translateY(-7px);
    border-color:rgba(0,166,199,.32);
    box-shadow:0 24px 60px rgba(8,27,44,.09);
}

.home-cert-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.home-cert-symbol{
    display:flex;
    align-items:center;
    justify-content:center;
    width:68px;
    height:68px;
    border-radius:18px;
    background:
        linear-gradient(
            145deg,
            rgba(15,61,94,.1),
            rgba(0,166,199,.08)
        );
    color:#0f3d5e;
    font-size:15px;
    font-weight:900;
    letter-spacing:-.02em;
}

.home-cert-category{
    padding:7px 9px;
    border:1px solid rgba(24,166,126,.16);
    border-radius:999px;
    background:rgba(24,166,126,.07);
    color:#168365;
    font-size:9px;
    font-weight:800;
}

.home-cert-card-body{
    flex:1;
    padding-top:24px;
}

.home-cert-card-body h3{
    margin:0;
    color:var(--text, #081b2c);
    font-size:30px;
    line-height:1;
}

.home-cert-card-body strong{
    display:block;
    min-height:36px;
    margin-top:8px;
    color:#00a6c7;
    font-size:10px;
    font-weight:800;
    line-height:1.6;
}

.home-cert-card-body p{
    margin:18px 0 0;
    color:var(--muted, #50697a);
    font-size:12px;
    font-weight:500;
    line-height:1.95;
}

.home-cert-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:25px;
    padding-top:17px;
    border-top:1px solid rgba(15,61,94,.08);
}

.home-cert-card-footer span{
    color:var(--muted, #50697a);
    font-size:9px;
    font-weight:700;
}

.home-cert-card-footer b{
    color:#0f3d5e;
    font-size:10px;
    font-weight:800;
}


/* Bottom trust */

.home-certifications-bottom{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:
        minmax(130px,.7fr)
        minmax(130px,.7fr)
        minmax(190px,1fr)
        minmax(230px,1.1fr);
    margin-top:22px;
    overflow:hidden;
    border:1px solid rgba(15,61,94,.1);
    border-radius:19px;
    background:var(--card, #fff);
}

.home-certifications-bottom > div,
.home-certifications-bottom-link{
    min-height:90px;
    padding:19px 22px;
}

.home-certifications-bottom > div{
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-left:1px solid rgba(15,61,94,.08);
}

.home-certifications-bottom span{
    color:#00a6c7;
    font-size:21px;
    font-weight:900;
}

.home-certifications-bottom p{
    margin:5px 0 0;
    color:var(--muted, #50697a);
    font-size:9px;
    font-weight:600;
}

.home-certifications-bottom-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:linear-gradient(
        135deg,
        #0f3d5e,
        #081b2c
    );
    color:#fff;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    transition:.25s ease;
}

.home-certifications-bottom-link b{
    font-size:20px;
    color:#18a67e;
}

.home-certifications-bottom-link:hover{
    filter:brightness(1.07);
}


/* Main nav certification link */

.cfte-cert-nav-link{
    position:relative;
}

.cfte-cert-nav-link::after{
    content:"";
    position:absolute;
    right:0;
    bottom:-7px;
    width:0;
    height:2px;
    border-radius:999px;
    background:#18a67e;
    transition:width .25s ease;
}

.cfte-cert-nav-link:hover::after{
    width:100%;
}


/* Dark mode */

[data-theme="dark"] .home-certifications h2{
    color:#f5f8fa;
}

[data-theme="dark"] .home-certifications-all{
    color:#d8edf4;
    border-color:rgba(0,166,199,.25);
}

[data-theme="dark"] .home-cert-card,
[data-theme="dark"] .home-certifications-bottom{
    border-color:rgba(255,255,255,.075);
    background:#0d2233;
    box-shadow:none;
}

[data-theme="dark"] .home-cert-card-body h3{
    color:#f5f8fa;
}

[data-theme="dark"] .home-cert-symbol{
    color:#e3f7fb;
    background:
        linear-gradient(
            145deg,
            rgba(0,166,199,.15),
            rgba(24,166,126,.08)
        );
}

[data-theme="dark"] .home-cert-card-footer{
    border-color:rgba(255,255,255,.07);
}

[data-theme="dark"] .home-cert-card-footer b{
    color:#d8edf4;
}

[data-theme="dark"] .home-certifications-bottom > div{
    border-color:rgba(255,255,255,.07);
}


/* Responsive */

@media(max-width:1050px){

    .home-certifications-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .home-certifications-bottom{
        grid-template-columns:repeat(2,1fr);
    }

    .home-certifications-bottom > div{
        border-bottom:1px solid rgba(15,61,94,.08);
    }

}

@media(max-width:720px){

    .home-certifications{
        padding:70px 0;
    }

    .home-certifications-head{
        align-items:flex-start;
        flex-direction:column;
        gap:25px;
    }

    .home-certifications h2{
        font-size:35px;
    }

    .home-certifications-head p{
        font-size:14px;
    }

    .home-certifications-all{
        width:100%;
    }

    .home-certifications-grid{
        grid-template-columns:1fr;
    }

    .home-cert-card{
        min-height:330px;
    }

    .home-certifications-bottom{
        grid-template-columns:1fr;
    }

    .home-certifications-bottom > div{
        border-left:0;
        border-bottom:1px solid rgba(15,61,94,.08);
    }

}


/* =========================================================
   CFTECOURSES — PROFESSIONAL FOOTER + CONTACT V1
   ========================================================= */

.cfte-pro-footer{
    position:relative;
    padding:72px 0 0;
    overflow:hidden;
    background:#081b2c;
    color:#fff;
}

.cfte-pro-footer::before{
    content:"";
    position:absolute;
    top:-220px;
    left:-150px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:rgba(0,166,199,.09);
    filter:blur(30px);
    pointer-events:none;
}

.cfte-pro-footer-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.5fr .7fr .7fr 1fr;
    gap:55px;
    padding-bottom:55px;
}

.cfte-footer-logo{
    display:inline-flex;
    align-items:center;
    gap:13px;
    color:#fff;
    text-decoration:none;
}

.cfte-footer-logo > span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:14px;
    background:
        linear-gradient(
            145deg,
            #0f3d5e,
            #00a6c7
        );
    color:#fff;
    font-size:15px;
    font-weight:900;
}

.cfte-footer-logo div{
    display:flex;
    flex-direction:column;
}

.cfte-footer-logo strong{
    font-size:18px;
    line-height:1.2;
}

.cfte-footer-logo small{
    margin-top:4px;
    color:#7fb8c9;
    font-size:8px;
    font-weight:700;
    letter-spacing:.04em;
}

.cfte-footer-brand p{
    max-width:390px;
    margin:22px 0 0;
    color:#9eb3c0;
    font-size:12px;
    font-weight:500;
    line-height:2;
}

.cfte-footer-column,
.cfte-footer-contact{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.cfte-footer-column > strong,
.cfte-footer-contact > strong{
    margin-bottom:19px;
    color:#fff;
    font-size:13px;
    font-weight:800;
}

.cfte-footer-column a{
    margin-bottom:12px;
    color:#9eb3c0;
    text-decoration:none;
    font-size:11px;
    font-weight:600;
    transition:.2s ease;
}

.cfte-footer-column a:hover{
    color:#18a67e;
    transform:translateX(-2px);
}

.cfte-footer-contact p{
    margin:0 0 13px;
    color:#9eb3c0;
    font-size:11px;
    line-height:1.8;
}

.cfte-footer-email{
    color:#55d8ef;
    text-decoration:none;
    font-family:Arial,sans-serif;
    direction:ltr;
    font-size:13px;
    font-weight:700;
}

.cfte-footer-contact-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:17px;
    padding:10px 13px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:10px;
    background:rgba(255,255,255,.035);
    color:#fff;
    text-decoration:none;
    font-size:10px;
    font-weight:700;
}

.cfte-footer-contact-link span{
    color:#18a67e;
    font-size:15px;
}

.cfte-pro-footer-bottom{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    min-height:74px;
    border-top:1px solid rgba(255,255,255,.075);
}

.cfte-pro-footer-bottom p{
    margin:0;
    color:#758e9d;
    font-size:9px;
    font-weight:600;
}

.cfte-pro-footer-bottom a{
    color:#18a67e;
    text-decoration:none;
    font-weight:800;
}


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

.contact-page{
    min-height:100vh;
    background:var(--bg,#f5f8fa);
    color:var(--text,#081b2c);
}

.contact-header{
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid rgba(15,61,94,.08);
    background:rgba(245,248,250,.91);
    backdrop-filter:blur(16px);
}

[data-theme="dark"] .contact-header{
    background:rgba(7,19,31,.92);
    border-color:rgba(255,255,255,.06);
}

.contact-header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:82px;
    gap:30px;
}

.contact-brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.contact-brand-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:13px;
    background:
        linear-gradient(
            145deg,
            #0f3d5e,
            #00a6c7
        );
    color:#fff;
    font-size:13px;
    font-weight:900;
}

.contact-brand > span:last-child{
    display:flex;
    flex-direction:column;
}

.contact-brand strong{
    color:var(--text,#081b2c);
    font-size:17px;
}

.contact-brand small{
    margin-top:3px;
    color:var(--muted,#50697a);
    font-size:7px;
}

.contact-nav{
    display:flex;
    align-items:center;
    gap:28px;
}

.contact-nav a{
    position:relative;
    color:var(--muted,#50697a);
    text-decoration:none;
    font-size:12px;
    font-weight:700;
}

.contact-nav a.active{
    color:#00a6c7;
}

.contact-theme-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border:1px solid rgba(15,61,94,.1);
    border-radius:12px;
    background:transparent;
    color:var(--text,#081b2c);
    cursor:pointer;
}

.contact-hero{
    padding:92px 0 82px;
}

.contact-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
    align-items:center;
    gap:70px;
}

.contact-eyebrow{
    color:#00a6c7;
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
}

.contact-hero h1{
    max-width:750px;
    margin:16px 0 20px;
    color:var(--text,#081b2c);
    font-size:clamp(48px,6vw,76px);
    line-height:1.12;
    letter-spacing:-.035em;
}

.contact-hero h1 em{
    color:#18a67e;
    font-style:normal;
}

.contact-hero-copy > p{
    max-width:700px;
    color:var(--muted,#50697a);
    font-size:17px;
    font-weight:500;
    line-height:2;
}

.contact-main-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-height:54px;
    margin-top:24px;
    padding:0 24px;
    border-radius:14px;
    background:#0f3d5e;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
}

.contact-main-button span{
    color:#18a67e;
    font-size:19px;
}

.contact-card{
    position:relative;
    padding:34px;
    overflow:hidden;
    border:1px solid rgba(15,61,94,.1);
    border-radius:26px;
    background:var(--card,#fff);
    box-shadow:0 22px 65px rgba(8,27,44,.07);
}

.contact-card::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:4px;
    background:linear-gradient(
        90deg,
        #00a6c7,
        #18a67e
    );
}

.contact-card-kicker{
    color:var(--muted,#50697a);
    font-size:10px;
    font-weight:700;
}

.contact-mail-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:68px;
    height:68px;
    margin-top:24px;
    border-radius:19px;
    background:rgba(0,166,199,.09);
    color:#00a6c7;
    font:900 24px Arial,sans-serif;
}

.contact-card h2{
    direction:ltr;
    margin:22px 0 12px;
    color:var(--text,#081b2c);
    font:800 23px Arial,sans-serif;
    text-align:right;
}

.contact-card p{
    color:var(--muted,#50697a);
    font-size:12px;
    line-height:1.9;
}

.contact-card > a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
    color:#0f3d5e;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
}

.contact-card > a span{
    color:#18a67e;
    font-size:17px;
}

.contact-info-section{
    padding:0 0 95px;
}

.contact-info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.contact-info-box{
    padding:27px;
    border:1px solid rgba(15,61,94,.09);
    border-radius:20px;
    background:var(--card,#fff);
}

.contact-info-box > span{
    color:#00a6c7;
    font-size:10px;
    font-weight:900;
}

.contact-info-box strong{
    display:block;
    margin-top:15px;
    color:var(--text,#081b2c);
    font-size:16px;
}

.contact-info-box p{
    margin:10px 0 0;
    color:var(--muted,#50697a);
    font-size:11px;
    line-height:1.9;
}

.contact-note{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    margin-top:22px;
    padding:34px;
    border-radius:22px;
    background:#0f3d5e;
    color:#fff;
}

.contact-note > div{
    max-width:760px;
}

.contact-note-label{
    color:#55d8ef;
    font-size:9px;
    font-weight:800;
}

.contact-note h2{
    margin:9px 0;
    font-size:23px;
}

.contact-note p{
    margin:0;
    color:#bfd0da;
    font-size:11px;
    line-height:1.9;
}

.contact-note > a{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:13px 17px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:rgba(255,255,255,.06);
    color:#fff;
    text-decoration:none;
    font-size:10px;
    font-weight:800;
}


/* DARK */

[data-theme="dark"] .contact-page{
    background:#07131f;
}

[data-theme="dark"] .contact-brand strong,
[data-theme="dark"] .contact-hero h1,
[data-theme="dark"] .contact-card h2,
[data-theme="dark"] .contact-info-box strong{
    color:#f5f8fa;
}

[data-theme="dark"] .contact-card,
[data-theme="dark"] .contact-info-box{
    border-color:rgba(255,255,255,.07);
    background:#0d2233;
    box-shadow:none;
}

[data-theme="dark"] .contact-theme-toggle{
    border-color:rgba(255,255,255,.08);
    color:#fff;
}


/* RESPONSIVE */

@media(max-width:950px){

    .cfte-pro-footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .contact-hero-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

}

@media(max-width:700px){

    .contact-nav{
        display:none;
    }

    .contact-header-inner{
        min-height:70px;
    }

    .contact-hero{
        padding:60px 0;
    }

    .contact-hero h1{
        font-size:44px;
    }

    .contact-hero-copy > p{
        font-size:14px;
    }

    .contact-info-grid{
        grid-template-columns:1fr;
    }

    .contact-note{
        align-items:flex-start;
        flex-direction:column;
    }

    .cfte-pro-footer{
        padding-top:55px;
    }

    .cfte-pro-footer-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .cfte-pro-footer-bottom{
        align-items:flex-start;
        flex-direction:column;
        justify-content:center;
        padding:22px 0;
    }

}


/* =========================================================
   CFTECOURSES — FOOTER + CONTACT WIDTH FIX V1
   ========================================================= */

.cfte-pro-footer .wrap,
.contact-page .wrap{
    width:min(1180px, calc(100% - 48px));
    margin-inline:auto;
}

.cfte-pro-footer-grid{
    grid-template-columns:minmax(280px,1.35fr) minmax(150px,.6fr) minmax(150px,.6fr) minmax(240px,.9fr);
    gap:38px;
}

.cfte-footer-brand{
    max-width:380px;
}

.cfte-footer-contact{
    max-width:300px;
}

.cfte-footer-email{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.cfte-pro-footer-bottom{
    padding-inline:0;
}

.contact-hero-grid{
    grid-template-columns:minmax(0,1.1fr) minmax(320px,420px);
    gap:48px;
}

.contact-hero-copy{
    min-width:0;
}

.contact-hero-copy > p{
    max-width:650px;
}

.contact-card{
    min-width:0;
}

.contact-card h2{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.contact-info-grid{
    gap:16px;
}

.contact-info-box{
    min-width:0;
}

.contact-note{
    width:100%;
    max-width:100%;
    padding:30px 32px;
    box-sizing:border-box;
}

.contact-note > div{
    min-width:0;
}

.contact-note h2,
.contact-note p{
    max-width:100%;
}

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

img,
svg,
video,
canvas{
    max-width:100%;
}

*{
    box-sizing:border-box;
}

@media(max-width:1100px){

    .cfte-pro-footer-grid{
        grid-template-columns:1.2fr .7fr .7fr;
    }

    .cfte-footer-contact{
        grid-column:1 / -1;
        max-width:none;
        padding-top:8px;
    }

}

@media(max-width:850px){

    .cfte-pro-footer .wrap,
    .contact-page .wrap{
        width:min(100% - 34px, 760px);
    }

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

    .contact-card{
        max-width:620px;
    }

}

@media(max-width:700px){

    .cfte-pro-footer .wrap,
    .contact-page .wrap{
        width:calc(100% - 28px);
    }

    .cfte-pro-footer-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .cfte-footer-contact{
        grid-column:auto;
    }

    .cfte-footer-brand,
    .cfte-footer-contact{
        max-width:none;
    }

    .cfte-pro-footer-bottom{
        width:calc(100% - 28px);
    }

    .contact-note{
        padding:24px 20px;
    }

    .contact-card{
        padding:26px 22px;
    }

}


/* =========================================================
   CFTECOURSES — GLOBAL CAIRO TYPOGRAPHY V1
   ========================================================= */

html,
body,
button,
input,
select,
textarea{
    font-family:"Cairo",Arial,sans-serif !important;
}

body{
    font-size:18px;
    line-height:1.9;
    font-weight:500;
}


/* Main paragraph reading size */

p{
    font-size:18px;
    line-height:2;
}


/* Navigation */

nav a,
.site-nav a,
.main-nav a,
.cfte-pillar-nav a{
    font-size:15px !important;
    font-weight:700;
}


/* Hero / intro text */

.hero p,
.hero-copy p,
.hero-intro,
.contact-hero p,
.cfte-pillar-lead{
    font-size:19px !important;
    line-height:2 !important;
}


/* Main section headings */

h1{
    font-family:"Cairo",Arial,sans-serif !important;
    font-weight:800;
}

h2{
    font-family:"Cairo",Arial,sans-serif !important;
    font-weight:800;
    line-height:1.45;
}

h3,
h4{
    font-family:"Cairo",Arial,sans-serif !important;
    font-weight:700;
}


/* Cards */

.card p,
.feature-card p,
.cert-card p,
.level-card p,
.contact-card p,
.platform-card p{
    font-size:16px !important;
    line-height:1.9 !important;
}


/* Small descriptions / metadata */

small,
.meta,
.card-meta,
.eyebrow,
.kicker,
.label,
.badge{
    line-height:1.7;
}


/* Buttons */

button,
.btn,
.button,
a.btn,
a.button{
    font-size:14px;
    font-weight:700;
}


/* Footer */

.cfte-pro-footer{
    font-family:"Cairo",Arial,sans-serif !important;
}

.cfte-pro-footer p{
    font-size:15px !important;
    line-height:1.9 !important;
}

.cfte-pro-footer a{
    font-size:14px;
    line-height:1.8;
}

.cfte-pro-footer strong{
    font-size:15px;
}


/* Contact */

.contact-page{
    font-family:"Cairo",Arial,sans-serif !important;
}

.contact-page p{
    font-size:18px !important;
    line-height:2 !important;
}

.contact-page .contact-card p,
.contact-page .contact-info-box p{
    font-size:16px !important;
}


/* Mobile */

@media(max-width:760px){

    body{
        font-size:17px;
    }

    p{
        font-size:17px;
    }

    .hero p,
    .hero-copy p,
    .hero-intro,
    .contact-hero p,
    .cfte-pillar-lead{
        font-size:17px !important;
    }

    .card p,
    .feature-card p,
    .cert-card p,
    .contact-card p,
    .platform-card p{
        font-size:15px !important;
    }

}



/* =========================================================
   CFTECOURSES — HOME CERTIFICATIONS DIMENSIONS V2
   Scope: homepage certifications section only
   ========================================================= */


/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.home-certifications{
    width:100% !important;
    max-width:100% !important;

    padding:64px 32px !important;

    overflow:hidden !important;
    box-sizing:border-box !important;
}

.home-certifications *,
.home-certifications *::before,
.home-certifications *::after{
    box-sizing:border-box !important;
}


/* ---------------------------------------------------------
   REAL CONTENT WIDTH
   --------------------------------------------------------- */

.home-certifications-head,
.home-certifications-grid,
.home-certifications-bottom{
    width:100% !important;
    max-width:1200px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* ---------------------------------------------------------
   HEADING AREA
   --------------------------------------------------------- */

.home-certifications-head{
    display:grid !important;

    grid-template-columns:minmax(0,1fr) auto !important;

    align-items:end !important;

    gap:40px !important;

    margin-bottom:28px !important;
}

.home-certifications-head > div{
    min-width:0 !important;
    max-width:760px !important;
}

.home-certifications-eyebrow{
    margin-bottom:8px !important;

    font-family:"Cairo",Arial,sans-serif !important;
    font-size:11px !important;
    line-height:1.6 !important;
}

.home-certifications h2{
    max-width:720px !important;

    margin-top:0 !important;
    margin-bottom:12px !important;

    font-family:"Cairo",Arial,sans-serif !important;
    font-size:clamp(32px,3.1vw,44px) !important;
    line-height:1.45 !important;
    font-weight:800 !important;
}

.home-certifications-head p{
    max-width:720px !important;

    margin:0 !important;

    font-family:"Cairo",Arial,sans-serif !important;
    font-size:16px !important;
    line-height:2 !important;
    font-weight:500 !important;
}


/* ---------------------------------------------------------
   VIEW ALL BUTTON
   --------------------------------------------------------- */

.home-certifications-all{
    flex-shrink:0 !important;

    min-height:46px !important;

    padding:10px 17px !important;

    white-space:nowrap !important;

    font-family:"Cairo",Arial,sans-serif !important;
    font-size:12px !important;
}


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

.home-certifications-grid{
    display:grid !important;

    grid-template-columns:repeat(4,minmax(0,1fr)) !important;

    gap:18px !important;

    align-items:stretch !important;
}


/* =========================================================
   CARD
   ========================================================= */

.home-cert-card{
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    min-height:315px !important;

    padding:22px 20px !important;

    overflow:hidden !important;
}

.home-cert-card-top{
    display:flex !important;

    width:100% !important;

    justify-content:space-between !important;
    align-items:flex-start !important;

    gap:10px !important;
}


/* ---------------------------------------------------------
   SYMBOL + CATEGORY
   --------------------------------------------------------- */

.home-cert-symbol{
    flex:0 0 auto !important;

    font-size:12px !important;

    white-space:nowrap !important;
}

.home-cert-category{
    min-width:0 !important;
    max-width:100% !important;

    font-family:"Cairo",Arial,sans-serif !important;
    font-size:10px !important;
    line-height:1.6 !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;
}


/* ---------------------------------------------------------
   CARD BODY
   --------------------------------------------------------- */

.home-cert-card-body{
    width:100% !important;
    min-width:0 !important;

    margin-top:17px !important;
}

.home-cert-card-body h3{
    width:100% !important;

    margin:0 0 4px !important;

    font-family:"Cairo",Arial,sans-serif !important;
    font-size:27px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
}

.home-cert-card-body strong{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    font-family:"Cairo",Arial,sans-serif !important;
    font-size:10px !important;
    line-height:1.6 !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;
}

.home-cert-card-body p{
    width:100% !important;
    max-width:100% !important;

    margin-top:12px !important;

    font-family:"Cairo",Arial,sans-serif !important;
    font-size:14px !important;
    line-height:1.9 !important;
    font-weight:500 !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
}


/* ---------------------------------------------------------
   CARD FOOTER
   --------------------------------------------------------- */

.home-cert-card-footer{
    display:flex !important;

    width:100% !important;
    min-width:0 !important;

    margin-top:auto !important;
    padding-top:17px !important;

    justify-content:space-between !important;
    align-items:center !important;

    gap:10px !important;
}

.home-cert-card-footer span{
    min-width:0 !important;

    font-family:"Cairo",Arial,sans-serif !important;
    font-size:10px !important;
    line-height:1.6 !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;
}

.home-cert-card-footer b{
    flex:0 0 auto !important;
}


/* =========================================================
   BOTTOM CTA
   ========================================================= */

.home-certifications-bottom{
    margin-top:22px !important;

    padding:23px 26px !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;

    gap:30px !important;

    align-items:center !important;
}

.home-certifications-bottom > div{
    min-width:0 !important;
}

.home-certifications-bottom span{
    font-family:"Cairo",Arial,sans-serif !important;
    font-size:11px !important;
}

.home-certifications-bottom p{
    max-width:700px !important;

    margin-top:5px !important;
    margin-bottom:0 !important;

    font-family:"Cairo",Arial,sans-serif !important;
    font-size:14px !important;
    line-height:1.9 !important;
}

.home-certifications-bottom-link{
    flex-shrink:0 !important;

    white-space:nowrap !important;

    font-family:"Cairo",Arial,sans-serif !important;
    font-size:12px !important;
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media(max-width:1180px){

    .home-certifications{
        padding-left:24px !important;
        padding-right:24px !important;
    }

    .home-certifications-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .home-cert-card{
        min-height:290px !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:820px){

    .home-certifications{
        padding:50px 18px !important;
    }

    .home-certifications-head{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .home-certifications-all{
        width:max-content !important;
        max-width:100% !important;
    }

    .home-certifications-bottom{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .home-certifications-bottom-link{
        width:max-content !important;
        max-width:100% !important;
    }

}


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

@media(max-width:620px){

    .home-certifications{
        padding:44px 14px !important;
    }

    .home-certifications h2{
        font-size:30px !important;
    }

    .home-certifications-head p{
        font-size:15px !important;
    }

    .home-certifications-grid{
        grid-template-columns:1fr !important;

        gap:14px !important;
    }

    .home-cert-card{
        min-height:0 !important;

        padding:21px 18px !important;
    }

    .home-cert-card-body h3{
        font-size:25px !important;
    }

    .home-cert-card-body p{
        font-size:14px !important;
    }

    .home-certifications-bottom{
        padding:21px 18px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media(max-width:400px){

    .home-certifications{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .home-certifications h2{
        font-size:27px !important;
    }

}



/* =========================================================
   CFTECOURSES — HOME VERTICAL ALIGNMENT V1
   One consistent content axis across homepage
   ========================================================= */

body.home-page,
body{
    overflow-x:hidden;
}


/* ---------------------------------------------------------
   MASTER HOMEPAGE CONTENT WIDTH
   --------------------------------------------------------- */

.hero .shell,
.trust-strip .shell,
.roadmap-section .shell,
.levels-section .shell,
.lab-section .shell,
.dashboard-section .shell,
.exam-section .shell,
.final-cta .shell,

.hero .wrap,
.trust-strip .wrap,
.roadmap-section .wrap,
.levels-section .wrap,
.lab-section .wrap,
.dashboard-section .wrap,
.exam-section .wrap,
.final-cta .wrap,

.home-certifications-head,
.home-certifications-grid,
.home-certifications-bottom,

.cfte-pro-footer .wrap{
    width:calc(100% - 64px) !important;
    max-width:1200px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}


/* ---------------------------------------------------------
   REMOVE RANDOM SIDE OFFSETS
   --------------------------------------------------------- */

.hero .shell,
.trust-strip .shell,
.roadmap-section .shell,
.levels-section .shell,
.lab-section .shell,
.dashboard-section .shell,
.exam-section .shell,
.final-cta .shell,

.hero .wrap,
.trust-strip .wrap,
.roadmap-section .wrap,
.levels-section .wrap,
.lab-section .wrap,
.dashboard-section .wrap,
.exam-section .wrap,
.final-cta .wrap{
    padding-left:0 !important;
    padding-right:0 !important;
}


/* ---------------------------------------------------------
   SECTION HEADINGS — SAME START AXIS
   --------------------------------------------------------- */

.section .section-kicker,
.section .section-title,
.roadmap-section .section-kicker,
.roadmap-section .section-title,
.levels-section .section-kicker,
.levels-section .section-title,
.lab-section .section-kicker,
.lab-section .section-title,
.dashboard-section .section-kicker,
.dashboard-section .section-title,
.exam-section .section-kicker,
.exam-section .section-title{
    max-width:100% !important;
}


/* ---------------------------------------------------------
   GRID SAFETY
   --------------------------------------------------------- */

.hero-grid,
.trust-grid,
.lab-grid,
.final-grid,
.roadmap-grid,
.levels-grid,
.dashboard-grid,
.exam-grid,
.question-grid,
.chart-grid{
    width:100% !important;
    max-width:100% !important;
}

.hero-grid > *,
.trust-grid > *,
.lab-grid > *,
.final-grid > *,
.roadmap-grid > *,
.levels-grid > *,
.dashboard-grid > *,
.exam-grid > *,
.question-grid > *,
.chart-grid > *{
    min-width:0 !important;
}


/* ---------------------------------------------------------
   PROFESSIONAL CERTIFICATIONS
   --------------------------------------------------------- */

.home-certifications{
    padding-left:0 !important;
    padding-right:0 !important;
}

.home-certifications-head,
.home-certifications-grid,
.home-certifications-bottom{
    width:calc(100% - 64px) !important;
    max-width:1200px !important;
}


/* ---------------------------------------------------------
   FOOTER SAME AXIS
   --------------------------------------------------------- */

.cfte-pro-footer .wrap{
    width:calc(100% - 64px) !important;
    max-width:1200px !important;
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media(max-width:1180px){

    .hero .shell,
    .trust-strip .shell,
    .roadmap-section .shell,
    .levels-section .shell,
    .lab-section .shell,
    .dashboard-section .shell,
    .exam-section .shell,
    .final-cta .shell,

    .hero .wrap,
    .trust-strip .wrap,
    .roadmap-section .wrap,
    .levels-section .wrap,
    .lab-section .wrap,
    .dashboard-section .wrap,
    .exam-section .wrap,
    .final-cta .wrap,

    .home-certifications-head,
    .home-certifications-grid,
    .home-certifications-bottom,

    .cfte-pro-footer .wrap{
        width:calc(100% - 48px) !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:820px){

    .hero .shell,
    .trust-strip .shell,
    .roadmap-section .shell,
    .levels-section .shell,
    .lab-section .shell,
    .dashboard-section .shell,
    .exam-section .shell,
    .final-cta .shell,

    .hero .wrap,
    .trust-strip .wrap,
    .roadmap-section .wrap,
    .levels-section .wrap,
    .lab-section .wrap,
    .dashboard-section .wrap,
    .exam-section .wrap,
    .final-cta .wrap,

    .home-certifications-head,
    .home-certifications-grid,
    .home-certifications-bottom,

    .cfte-pro-footer .wrap{
        width:calc(100% - 34px) !important;
    }

}


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

@media(max-width:520px){

    .hero .shell,
    .trust-strip .shell,
    .roadmap-section .shell,
    .levels-section .shell,
    .lab-section .shell,
    .dashboard-section .shell,
    .exam-section .shell,
    .final-cta .shell,

    .hero .wrap,
    .trust-strip .wrap,
    .roadmap-section .wrap,
    .levels-section .wrap,
    .lab-section .wrap,
    .dashboard-section .wrap,
    .exam-section .wrap,
    .final-cta .wrap,

    .home-certifications-head,
    .home-certifications-grid,
    .home-certifications-bottom,

    .cfte-pro-footer .wrap{
        width:calc(100% - 24px) !important;
    }

}



/* =========================================================
   CFTECOURSES — HOME SIDE MARGIN HALF V2
   Same alignment — 50% smaller side margins
   ========================================================= */


/* DESKTOP */

.hero .shell,
.trust-strip .shell,
.roadmap-section .shell,
.levels-section .shell,
.lab-section .shell,
.dashboard-section .shell,
.exam-section .shell,
.final-cta .shell,

.hero .wrap,
.trust-strip .wrap,
.roadmap-section .wrap,
.levels-section .wrap,
.lab-section .wrap,
.dashboard-section .wrap,
.exam-section .wrap,
.final-cta .wrap,

.home-certifications-head,
.home-certifications-grid,
.home-certifications-bottom,

.cfte-pro-footer .wrap{
    width:calc(100% - 32px) !important;
    max-width:1320px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* Keep homepage certifications outer section flush */

.home-certifications{
    padding-left:0 !important;
    padding-right:0 !important;
}


/* ---------------------------------------------------------
   LAPTOP
   Previous 48px total -> now 24px total
   --------------------------------------------------------- */

@media(max-width:1180px){

    .hero .shell,
    .trust-strip .shell,
    .roadmap-section .shell,
    .levels-section .shell,
    .lab-section .shell,
    .dashboard-section .shell,
    .exam-section .shell,
    .final-cta .shell,

    .hero .wrap,
    .trust-strip .wrap,
    .roadmap-section .wrap,
    .levels-section .wrap,
    .lab-section .wrap,
    .dashboard-section .wrap,
    .exam-section .wrap,
    .final-cta .wrap,

    .home-certifications-head,
    .home-certifications-grid,
    .home-certifications-bottom,

    .cfte-pro-footer .wrap{
        width:calc(100% - 24px) !important;
    }

}


/* ---------------------------------------------------------
   TABLET
   Previous 34px total -> now 18px total
   --------------------------------------------------------- */

@media(max-width:820px){

    .hero .shell,
    .trust-strip .shell,
    .roadmap-section .shell,
    .levels-section .shell,
    .lab-section .shell,
    .dashboard-section .shell,
    .exam-section .shell,
    .final-cta .shell,

    .hero .wrap,
    .trust-strip .wrap,
    .roadmap-section .wrap,
    .levels-section .wrap,
    .lab-section .wrap,
    .dashboard-section .wrap,
    .exam-section .wrap,
    .final-cta .wrap,

    .home-certifications-head,
    .home-certifications-grid,
    .home-certifications-bottom,

    .cfte-pro-footer .wrap{
        width:calc(100% - 18px) !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
   Keep a safe minimum margin
   --------------------------------------------------------- */

@media(max-width:520px){

    .hero .shell,
    .trust-strip .shell,
    .roadmap-section .shell,
    .levels-section .shell,
    .lab-section .shell,
    .dashboard-section .shell,
    .exam-section .shell,
    .final-cta .shell,

    .hero .wrap,
    .trust-strip .wrap,
    .roadmap-section .wrap,
    .levels-section .wrap,
    .lab-section .wrap,
    .dashboard-section .wrap,
    .exam-section .wrap,
    .final-cta .wrap,

    .home-certifications-head,
    .home-certifications-grid,
    .home-certifications-bottom,

    .cfte-pro-footer .wrap{
        width:calc(100% - 16px) !important;
    }

}



/* =========================================================
   CFTECOURSES — HOME SIDE MARGIN HALF V3
   Desktop: 8px each side
   ========================================================= */

.hero .shell,
.trust-strip .shell,
.roadmap-section .shell,
.levels-section .shell,
.lab-section .shell,
.dashboard-section .shell,
.exam-section .shell,
.final-cta .shell,

.hero .wrap,
.trust-strip .wrap,
.roadmap-section .wrap,
.levels-section .wrap,
.lab-section .wrap,
.dashboard-section .wrap,
.exam-section .wrap,
.final-cta .wrap,

.home-certifications-head,
.home-certifications-grid,
.home-certifications-bottom,

.cfte-pro-footer .wrap{
    width:calc(100% - 16px) !important;
    max-width:1400px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* Certifications outer section */

.home-certifications{
    padding-left:0 !important;
    padding-right:0 !important;
}


/* Laptop */

@media(max-width:1180px){

    .hero .shell,
    .trust-strip .shell,
    .roadmap-section .shell,
    .levels-section .shell,
    .lab-section .shell,
    .dashboard-section .shell,
    .exam-section .shell,
    .final-cta .shell,

    .hero .wrap,
    .trust-strip .wrap,
    .roadmap-section .wrap,
    .levels-section .wrap,
    .lab-section .wrap,
    .dashboard-section .wrap,
    .exam-section .wrap,
    .final-cta .wrap,

    .home-certifications-head,
    .home-certifications-grid,
    .home-certifications-bottom,

    .cfte-pro-footer .wrap{
        width:calc(100% - 12px) !important;
    }

}


/* Tablet / Mobile — keep safe edge */

@media(max-width:820px){

    .hero .shell,
    .trust-strip .shell,
    .roadmap-section .shell,
    .levels-section .shell,
    .lab-section .shell,
    .dashboard-section .shell,
    .exam-section .shell,
    .final-cta .shell,

    .hero .wrap,
    .trust-strip .wrap,
    .roadmap-section .wrap,
    .levels-section .wrap,
    .lab-section .wrap,
    .dashboard-section .wrap,
    .exam-section .wrap,
    .final-cta .wrap,

    .home-certifications-head,
    .home-certifications-grid,
    .home-certifications-bottom,

    .cfte-pro-footer .wrap{
        width:calc(100% - 16px) !important;
    }

}



/* =========================================================
   CFTECOURSES — LEARNING FLOW V1
   ========================================================= */

.cfte-learning-flow{
    position:relative;
    padding:76px 0 82px;
    overflow:hidden;
}

.cfte-learning-flow::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    left:-180px;
    top:40px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(0,166,199,.09) 0%,
        rgba(0,166,199,0) 70%
    );
    pointer-events:none;
}

.cfte-learning-flow .wrap{
    position:relative;
    z-index:1;
}

.cfte-learning-flow-head{
    max-width:760px;
    margin:0 auto 38px;
    text-align:center;
}

.cfte-learning-flow-kicker{
    display:inline-block;
    margin-bottom:11px;
    color:#00A6C7;
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
}

.cfte-learning-flow-head h2{
    margin:0;
    color:var(--text, #081B2C);
    font-size:clamp(31px,3.5vw,44px);
    line-height:1.5;
    font-weight:800;
}

.cfte-learning-flow-head h2 span{
    color:#00A6C7;
}

.cfte-learning-flow-head > p{
    max-width:680px;
    margin:15px auto 0;
    font-size:17px;
    line-height:2;
    color:var(--muted, #617181);
}

.cfte-learning-flow-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.cfte-learning-step{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:315px;
    padding:25px 22px 22px;
    border:1px solid rgba(15,61,94,.10);
    border-radius:20px;
    background:var(--card, #fff);
    box-shadow:0 14px 35px rgba(8,27,44,.055);
    overflow:hidden;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.cfte-learning-step:hover{
    transform:translateY(-4px);
    border-color:rgba(0,166,199,.30);
    box-shadow:0 20px 45px rgba(8,27,44,.09);
}

.cfte-learning-step-number{
    position:absolute;
    left:18px;
    top:15px;
    color:rgba(15,61,94,.08);
    font-family:"Cairo",Arial,sans-serif;
    font-size:43px;
    line-height:1;
    font-weight:800;
}

.cfte-learning-step-icon{
    display:grid;
    place-items:center;
    width:50px;
    height:50px;
    margin-bottom:20px;
    border-radius:15px;
    background:rgba(0,166,199,.08);
    font-size:23px;
}

.cfte-learning-step h3{
    margin:0 0 10px;
    color:var(--text, #081B2C);
    font-size:22px;
    line-height:1.5;
    font-weight:800;
}

.cfte-learning-step p{
    margin:0 0 18px;
    color:var(--muted, #617181);
    font-size:14px;
    line-height:1.95;
}

.cfte-learning-step a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:auto;
    color:#0F3D5E;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
}

.cfte-learning-step a b{
    color:#00A6C7;
    transition:transform .2s ease;
}

.cfte-learning-step a:hover b{
    transform:translateX(-4px);
}

.cfte-learning-flow-note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:26px auto 0;
    padding:13px 20px;
    max-width:max-content;
    border:1px solid rgba(24,166,126,.14);
    border-radius:999px;
    background:rgba(24,166,126,.055);
}

.cfte-learning-flow-dot{
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
    background:#18A67E;
    box-shadow:0 0 0 5px rgba(24,166,126,.10);
}

.cfte-learning-flow-note p{
    margin:0;
    color:var(--muted, #617181);
    font-size:13px;
    line-height:1.8;
}

.cfte-learning-flow-note strong{
    color:var(--text, #081B2C);
}


/* Dark mode */

html[data-theme="dark"] .cfte-learning-step{
    border-color:rgba(255,255,255,.08);
    background:#0D2233;
    box-shadow:none;
}

html[data-theme="dark"] .cfte-learning-step h3,
html[data-theme="dark"] .cfte-learning-flow-head h2,
html[data-theme="dark"] .cfte-learning-flow-note strong{
    color:#f4f8fb;
}

html[data-theme="dark"] .cfte-learning-step p,
html[data-theme="dark"] .cfte-learning-flow-head > p,
html[data-theme="dark"] .cfte-learning-flow-note p{
    color:#a9bac7;
}

html[data-theme="dark"] .cfte-learning-step a{
    color:#7ddcf0;
}

html[data-theme="dark"] .cfte-learning-step-number{
    color:rgba(255,255,255,.045);
}


/* Tablet */

@media(max-width:1000px){

    .cfte-learning-flow-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .cfte-learning-step{
        min-height:280px;
    }

}


/* Mobile */

@media(max-width:620px){

    .cfte-learning-flow{
        padding:58px 0 62px;
    }

    .cfte-learning-flow-head{
        margin-bottom:28px;
        text-align:right;
    }

    .cfte-learning-flow-head h2{
        font-size:29px;
    }

    .cfte-learning-flow-head > p{
        font-size:16px;
    }

    .cfte-learning-flow-grid{
        grid-template-columns:1fr;
    }

    .cfte-learning-step{
        min-height:0;
        padding:22px 20px;
    }

    .cfte-learning-step p{
        font-size:15px;
    }

    .cfte-learning-flow-note{
        align-items:flex-start;
        max-width:100%;
        border-radius:16px;
    }

}



/* =========================================================
   CFTECOURSES — LEARNING FLOW ALIGNMENT V2
   Fix alignment + remove empty gap
   ========================================================= */

/* Section itself: less vertical waste */
.cfte-learning-flow{
    padding-top:58px !important;
    padding-bottom:18px !important;
}


/* Match the visual width of the CTA below */
.cfte-learning-flow .wrap{
    width:min(1120px, calc(100% - 48px)) !important;
    max-width:1120px !important;
    margin-inline:auto !important;
    padding-inline:0 !important;
}


/* Heading aligned with the same content width */
.cfte-learning-flow-head{
    width:100% !important;
    max-width:760px !important;
    margin:0 auto 32px !important;
}


/* Cards must stay inside same visual line */
.cfte-learning-flow-grid{
    width:100% !important;
    max-width:1120px !important;
    margin-inline:auto !important;
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:16px !important;
}


/* Slightly tighter cards */
.cfte-learning-step{
    min-width:0 !important;
    min-height:292px !important;
    padding:24px 21px 20px !important;
}


/* Better readable text */
.cfte-learning-step h3{
    font-size:22px !important;
    line-height:1.5 !important;
}

.cfte-learning-step p{
    font-size:15px !important;
    line-height:1.95 !important;
}


/* Journey note aligns with cards */
.cfte-learning-flow-note{
    width:max-content !important;
    max-width:100% !important;
    margin:20px auto 0 !important;
}


/* IMPORTANT:
   Remove the big empty zone between this section and
   the immediately following CTA section.
*/
.cfte-learning-flow + section{
    margin-top:0 !important;
    padding-top:20px !important;
}


/* Also prevent extra bottom spacing from inner wrappers */
.cfte-learning-flow .wrap{
    margin-bottom:0 !important;
}

.cfte-learning-flow-grid{
    margin-bottom:0 !important;
}

.cfte-learning-flow-note{
    margin-bottom:0 !important;
}


/* Laptop */
@media(max-width:1180px){

    .cfte-learning-flow .wrap{
        width:calc(100% - 56px) !important;
        max-width:none !important;
    }

}


/* Tablet */
@media(max-width:950px){

    .cfte-learning-flow-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .cfte-learning-step{
        min-height:260px !important;
    }

}


/* Mobile */
@media(max-width:620px){

    .cfte-learning-flow{
        padding-top:46px !important;
        padding-bottom:12px !important;
    }

    .cfte-learning-flow .wrap{
        width:calc(100% - 28px) !important;
    }

    .cfte-learning-flow-grid{
        grid-template-columns:1fr !important;
    }

    .cfte-learning-flow + section{
        padding-top:12px !important;
    }

    .cfte-learning-flow-note{
        width:100% !important;
    }

}



/* =========================================================
   CFTECOURSES — LEARNING FLOW ALIGNMENT V3
   Match homepage main content width
   ========================================================= */


/* Main section width — align with sections above/below */
body .cfte-learning-flow .wrap{
    width:min(1280px, calc(100% - 48px)) !important;
    max-width:1280px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
}


/* Heading remains centered, but cards use FULL section width */
body .cfte-learning-flow-head{
    width:100% !important;
    max-width:820px !important;
    margin:0 auto 34px !important;
}


/* Full-width cards */
body .cfte-learning-flow-grid{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;

    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:18px !important;
}


/* Give cards enough visual presence */
body .cfte-learning-step{
    width:100% !important;
    min-width:0 !important;
    min-height:300px !important;
    padding:26px 24px 22px !important;
}


/* Readability */
body .cfte-learning-step h3{
    font-size:23px !important;
}

body .cfte-learning-step p{
    font-size:15px !important;
    line-height:2 !important;
}


/* Keep journey note centered */
body .cfte-learning-flow-note{
    margin:22px auto 0 !important;
}


/* Reduce the remaining vertical gap before CTA */
body .cfte-learning-flow{
    padding-bottom:8px !important;
}

body .cfte-learning-flow + section{
    margin-top:0 !important;
    padding-top:8px !important;
}


/* Laptop */
@media(max-width:1320px){

    body .cfte-learning-flow .wrap{
        width:calc(100% - 64px) !important;
        max-width:none !important;
    }

}


/* Tablet */
@media(max-width:950px){

    body .cfte-learning-flow .wrap{
        width:calc(100% - 40px) !important;
    }

    body .cfte-learning-flow-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

}


/* Mobile */
@media(max-width:620px){

    body .cfte-learning-flow .wrap{
        width:calc(100% - 28px) !important;
    }

    body .cfte-learning-flow-grid{
        grid-template-columns:1fr !important;
    }

    body .cfte-learning-flow{
        padding-bottom:5px !important;
    }

    body .cfte-learning-flow + section{
        padding-top:5px !important;
    }

}


/* =========================================================
   CFTECOURSES — HOME BOTTOM GAP FIX V1
   ========================================================= */

/* Keep learning flow tight */
body .cfte-learning-flow{
    margin-bottom:0 !important;
    padding-bottom:6px !important;
}

/* Tighten the CTA block itself */
body .cfte-learning-flow + section{
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:6px !important;
    padding-bottom:18px !important;
}

/* Remove large spacing after CTA */
body .cfte-learning-flow + section + section{
    margin-top:0 !important;
    padding-top:28px !important;
}

/* Prevent inner wrappers from creating extra gap */
body .cfte-learning-flow + section .wrap,
body .cfte-learning-flow + section .container{
    margin-bottom:0 !important;
}

/* Laptop */
@media(max-width:900px){

    body .cfte-learning-flow + section{
        padding-bottom:14px !important;
    }

    body .cfte-learning-flow + section + section{
        padding-top:22px !important;
    }

}

/* Mobile */
@media(max-width:620px){

    body .cfte-learning-flow{
        padding-bottom:4px !important;
    }

    body .cfte-learning-flow + section{
        padding-top:4px !important;
        padding-bottom:10px !important;
    }

    body .cfte-learning-flow + section + section{
        padding-top:18px !important;
    }

}





/* Old experimental CTA visual versions removed after final rebuild. */

/* =========================================================
   CFTECOURSES CTA — CLEAN REBUILD
   ========================================================= */

.cfte-final-cta-clean{
    padding:8px 0 22px !important;
}

.cfte-final-cta-clean .shell{
    width:min(1280px,calc(100% - 48px)) !important;
    margin:0 auto !important;
}

.cfte-final-cta-box{
    position:relative !important;
    overflow:hidden !important;

    min-height:300px !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    align-items:center !important;

    padding:42px 60px !important;

    border-radius:28px !important;

    background:
        radial-gradient(circle at 12% 50%,rgba(0,166,199,.34),transparent 42%),
        linear-gradient(115deg,#06345d 0%,#07517e 52%,#0794ad 100%) !important;

    box-shadow:0 18px 45px rgba(8,27,44,.14) !important;
}


/* TEXT */

.cfte-final-cta-content{
    position:relative !important;
    z-index:5 !important;

    text-align:right !important;
}

.cfte-final-cta-brand{
    display:block !important;

    margin-bottom:8px !important;

    color:rgba(255,255,255,.68) !important;

    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:.12em !important;
}

.cfte-final-cta-content h2{
    margin:0 !important;

    max-width:430px !important;

    color:#fff !important;

    font-family:"Cairo",sans-serif !important;
    font-size:40px !important;
    font-weight:800 !important;
    line-height:1.35 !important;
}

.cfte-final-cta-content p{
    margin:10px 0 20px !important;

    color:rgba(255,255,255,.78) !important;

    font-family:"Cairo",sans-serif !important;
    font-size:15px !important;
}

.cfte-final-cta-button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;

    padding:12px 22px !important;

    border-radius:11px !important;

    background:#fff !important;
    color:#0f3d5e !important;

    font-family:"Cairo",sans-serif !important;
    font-weight:800 !important;

    text-decoration:none !important;

    box-shadow:0 8px 20px rgba(0,0,0,.12) !important;
}


/* =========================================================
   SIMPLE CANDLESTICK SYMBOL
   Centered in the empty half
   ========================================================= */

.cfte-final-candles{
    position:relative !important;

    justify-self:center !important;
    align-self:center !important;

    width:320px !important;
    height:145px !important;

    opacity:.72 !important;
}


/* candle body */

.cfte-final-candles .cc{
    position:absolute !important;

    display:block !important;

    width:14px !important;

    border-radius:3px !important;

    background:#83e7d4 !important;
    color:#83e7d4 !important;

    box-shadow:0 0 14px rgba(131,231,212,.18) !important;
}


/* wick */

.cfte-final-candles .cc::before{
    content:"" !important;

    position:absolute !important;

    left:50% !important;
    top:-15px !important;

    width:2px !important;
    height:calc(100% + 30px) !important;

    transform:translateX(-50%) !important;

    background:currentColor !important;

    border-radius:2px !important;
}


/* red candles */

.cfte-final-candles .red{
    background:#ef8c92 !important;
    color:#ef8c92 !important;
}


/* formation */

.cfte-final-candles .c1{
    left:20px !important;
    bottom:28px !important;
    height:30px !important;
}

.cfte-final-candles .c2{
    left:65px !important;
    bottom:43px !important;
    height:47px !important;
}

.cfte-final-candles .c3{
    left:110px !important;
    bottom:38px !important;
    height:25px !important;
}

.cfte-final-candles .c4{
    left:155px !important;
    bottom:57px !important;
    height:58px !important;
}

.cfte-final-candles .c5{
    left:200px !important;
    bottom:51px !important;
    height:29px !important;
}

.cfte-final-candles .c6{
    left:245px !important;
    bottom:68px !important;
    height:48px !important;
}

.cfte-final-candles .c7{
    left:290px !important;
    bottom:82px !important;
    height:37px !important;
}


/* RESPONSIVE */

@media(max-width:1000px){

    .cfte-final-cta-box{
        padding:36px 40px !important;
    }

    .cfte-final-cta-content h2{
        font-size:34px !important;
    }

    .cfte-final-candles{
        transform:scale(.88) !important;
    }
}

@media(max-width:760px){

    .cfte-final-cta-box{
        grid-template-columns:1fr !important;
        min-height:auto !important;
        padding:32px 26px !important;
    }

    .cfte-final-cta-content{
        text-align:center !important;
    }

    .cfte-final-cta-content h2{
        margin-inline:auto !important;
        font-size:29px !important;
    }

    .cfte-final-candles{
        display:none !important;
    }
}



/* =========================================================
   CFTECOURSES — HOMEPAGE STICKY HEADER V1
   ========================================================= */

body > .header{
    position:sticky;
    top:0;
    z-index:9999;

    background:rgba(247,248,252,.92);

    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(15,61,94,.08);

    box-shadow:
        0 8px 28px rgba(8,27,44,.06);

    transition:
        background .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


/* Dark mode */

[data-theme="dark"] body > .header{
    background:rgba(7,19,31,.92);

    border-bottom-color:
        rgba(255,255,255,.07);

    box-shadow:
        0 8px 30px rgba(0,0,0,.22);
}


/* Safari / iPhone safe area */

@supports (
    padding-top:env(safe-area-inset-top)
){
    body > .header{
        padding-top:
            env(safe-area-inset-top);
    }
}


/* Mobile */

@media(max-width:850px){

    body > .header{
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
    }

}


/* =========================================================
   CFTECOURSES — HOMEPAGE FIXED HEADER V2
   Always-visible navigation
   ========================================================= */

body > .header{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:0 !important;
    width:100% !important;

    z-index:99999 !important;

    background:rgba(247,248,252,.94) !important;

    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);

    border-bottom:
        1px solid rgba(15,61,94,.09);

    box-shadow:
        0 8px 28px rgba(8,27,44,.07);
}


/* Header height compensation */

body{
    padding-top:82px;
}


/* Anchor navigation must not hide behind header */

html{
    scroll-padding-top:105px;
}


/* Dark mode */

[data-theme="dark"] body > .header{
    background:
        rgba(7,19,31,.95) !important;

    border-bottom-color:
        rgba(255,255,255,.07);

    box-shadow:
        0 8px 30px rgba(0,0,0,.24);
}


/* Mobile */

@media(max-width:850px){

    body{
        padding-top:72px;
    }

    html{
        scroll-padding-top:90px;
    }

    body > .header{
        -webkit-backdrop-filter:blur(18px);
        backdrop-filter:blur(18px);
    }

}


/* =========================================================
   CFTECOURSES — ACTIVE NAV VISUAL V2
   ========================================================= */

.menu a{
    padding:9px 10px;
    border-radius:10px;
    transition:
        color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}


.menu a:hover{
    color:#00a6c7;
    background:rgba(0,166,199,.055);
}


.menu a.active{
    color:#00a6c7 !important;

    background:
        linear-gradient(
            135deg,
            rgba(0,166,199,.10),
            rgba(24,166,126,.07)
        );

    box-shadow:
        0 0 0 1px rgba(0,166,199,.08),
        0 6px 22px rgba(0,166,199,.09);

    text-shadow:
        0 0 14px rgba(0,166,199,.18);
}


.menu a.active::after{
    content:"";
    position:absolute;

    right:18%;
    left:18%;

    bottom:-7px;

    height:3px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #00a6c7,
            #18a67e
        );

    box-shadow:
        0 0 8px rgba(0,166,199,.45),
        0 0 16px rgba(24,166,126,.22);
}


[data-theme="dark"] .menu a.active{
    color:#55d8ef !important;

    background:
        linear-gradient(
            135deg,
            rgba(0,166,199,.16),
            rgba(24,166,126,.10)
        );

    box-shadow:
        0 0 0 1px rgba(85,216,239,.12),
        0 6px 24px rgba(0,166,199,.11);

    text-shadow:
        0 0 16px rgba(85,216,239,.32);
}


/* =========================================================
   CFTECOURSES — HEADER NAV SINGLE LINE FIX V1
   Keep desktop navigation labels on one line
   ========================================================= */

@media (min-width: 1101px){

    body > .header .nav{
        gap:18px;
    }

    body > .header .menu{
        flex-wrap:nowrap;
        gap:18px;
    }

    body > .header .menu a{
        white-space:nowrap;
        flex-shrink:0;
    }

    body > .header .nav-actions{
        flex-shrink:0;
        white-space:nowrap;
    }

}


/* Slight tightening on medium desktop widths */

@media (min-width:1101px) and (max-width:1350px){

    body > .header .menu{
        gap:12px;
    }

    body > .header .menu a{
        font-size:13px;
    }

    body > .header .nav{
        width:min(1280px, calc(100% - 28px));
    }

}

/* =========================================================
   CFTECOURSES — GLOBAL CAIRO FONT V2
   Whole website typography normalization
   ========================================================= */

html,
body,
button,
input,
textarea,
select,
option,
table,
th,
td,
a,
span,
div,
section,
article,
aside,
header,
footer,
nav,
main,
label,
small,
strong,
b,
em,
i,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
blockquote,
figcaption,
summary,
details{
    font-family:"Cairo",Arial,sans-serif !important;
}


/* Form controls */
input,
textarea,
select,
button{
    font-family:"Cairo",Arial,sans-serif !important;
}


/* Headings */
h1,
h2,
h3,
h4,
h5,
h6{
    font-family:"Cairo",Arial,sans-serif !important;
}


/* Buttons / CTAs / navigation */
button,
.btn,
.button,
a[class*="btn"],
a[class*="button"],
nav a{
    font-family:"Cairo",Arial,sans-serif !important;
}


/* Tables */
table,
th,
td{
    font-family:"Cairo",Arial,sans-serif !important;
}


/* Preserve monospace only for real code */
code,
pre,
kbd,
samp{
    font-family:monospace !important;
}


/* =========================================================
   CFTECOURSES — GLOBAL CAIRO FINAL V3
   ========================================================= */

:root{
    --font-main:"Cairo",Arial,sans-serif;
}

html,
body{
    font-family:var(--font-main) !important;
}

body *{
    font-family:inherit;
}

button,
input,
textarea,
select,
option{
    font-family:var(--font-main) !important;
}

/* Technical/code content intentionally remains monospace */
code,
pre,
kbd,
samp{
    font-family:monospace !important;
}


/* =========================================================
   CFTECOURSES — GLOBAL TYPOGRAPHY SIZE V4
   Larger readable typography across the whole website
   ========================================================= */

html{
    font-size:18px !important;
}

body{
    font-size:18px !important;
    line-height:1.9 !important;
}


/* Main reading content */

p,
li,
dd,
td,
blockquote{
    font-size:1rem;
    line-height:1.95;
}


/* Educational/article content slightly larger */

article p,
article li,
.certificate-content p,
.certificate-content li,
.cfte-content p,
.cfte-content li{
    font-size:1.055rem;
    line-height:2;
}


/* Main headings */

h1{
    font-size:clamp(2.15rem,4vw,3.35rem) !important;
    line-height:1.35 !important;
}

h2{
    font-size:clamp(1.55rem,2.6vw,2.15rem) !important;
    line-height:1.45 !important;
}

h3{
    font-size:clamp(1.22rem,2vw,1.55rem) !important;
    line-height:1.55 !important;
}

h4{
    font-size:1.12rem !important;
    line-height:1.6 !important;
}


/* Navigation */

nav a,
.header a,
.cert-header a{
    font-size:.94rem !important;
}


/* Buttons and CTAs */

button,
.btn,
.button,
a[class*="btn"],
a[class*="button"]{
    font-size:.94rem !important;
    line-height:1.5 !important;
}


/* Forms */

input,
textarea,
select{
    font-size:1rem !important;
}


/* Tables */

table,
th,
td{
    font-size:.94rem !important;
}


/* Labels / secondary information */

label,
small{
    line-height:1.7;
}


/* Certificate cards */

.cert-card p,
.compare-cert-card p{
    font-size:.94rem !important;
    line-height:1.85 !important;
}


/* Footer */

footer,
footer p,
.cert-footer,
.cert-footer p{
    font-size:.88rem !important;
}


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

@media(max-width:760px){

    html{
        font-size:16.5px !important;
    }

    body{
        font-size:16.5px !important;
    }

    p,
    li,
    dd,
    td{
        line-height:1.9;
    }

    article p,
    article li,
    .certificate-content p,
    .certificate-content li,
    .cfte-content p,
    .cfte-content li{
        font-size:1rem;
    }

    h1{
        font-size:2rem !important;
    }

    h2{
        font-size:1.55rem !important;
    }

    h3{
        font-size:1.25rem !important;
    }

    nav a,
    .header a,
    .cert-header a{
        font-size:.9rem !important;
    }

}



/* ==========================================================
   CFTECOURSES — GLOBAL MOBILE NAV V1
   ========================================================== */

.cfte-mobile-menu-toggle{
    display:none;
}

.cfte-mobile-overlay,
.cfte-mobile-drawer{
    display:none;
}


@media (max-width:900px){

    body.cfte-mobile-menu-open{
        overflow:hidden !important;
    }

    .cfte-mobile-menu-toggle{
        width:46px;
        height:46px;
        flex:0 0 46px;

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

        gap:5px;

        padding:0;
        margin:0;

        border:1px solid var(--border,rgba(15,61,94,.12));
        border-radius:14px;

        background:var(--surface,#fff);
        color:var(--text,#081b2c);

        cursor:pointer;
        position:relative;
        z-index:10002;

        box-shadow:0 6px 18px rgba(8,27,44,.06);
    }

    .cfte-mobile-menu-toggle span{
        display:block;
        width:20px;
        height:2px;

        border-radius:10px;
        background:currentColor;

        transition:
            transform .25s ease,
            opacity .2s ease;
    }

    .cfte-mobile-menu-toggle.is-open span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .cfte-mobile-menu-toggle.is-open span:nth-child(2){
        opacity:0;
    }

    .cfte-mobile-menu-toggle.is-open span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }


    .cfte-mobile-overlay{
        display:block;

        position:fixed;
        inset:0;

        z-index:10000;

        background:rgba(4,15,25,.46);
        backdrop-filter:blur(4px);
        -webkit-backdrop-filter:blur(4px);

        opacity:0;
        visibility:hidden;

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }

    body.cfte-mobile-menu-open .cfte-mobile-overlay{
        opacity:1;
        visibility:visible;
    }


    .cfte-mobile-drawer{
        display:flex;
        flex-direction:column;

        position:fixed;

        top:0;
        right:0;
        bottom:0;

        width:min(88vw,390px);

        z-index:10001;

        padding:
            max(22px,env(safe-area-inset-top))
            20px
            max(24px,env(safe-area-inset-bottom));

        background:var(--surface,#fff);
        color:var(--text,#081b2c);

        border-left:
            1px solid var(--border,rgba(15,61,94,.12));

        box-shadow:
            -24px 0 60px rgba(8,27,44,.18);

        transform:translateX(105%);

        transition:transform .3s cubic-bezier(.2,.8,.2,1);

        overflow-y:auto;
        overscroll-behavior:contain;
    }

    body.cfte-mobile-menu-open .cfte-mobile-drawer{
        transform:translateX(0);
    }


    .cfte-mobile-drawer-head{
        display:flex;
        align-items:center;
        justify-content:space-between;

        gap:18px;

        padding-bottom:20px;
        margin-bottom:12px;

        border-bottom:
            1px solid var(--border,rgba(15,61,94,.10));
    }


    .cfte-mobile-brand{
        display:flex;
        flex-direction:column;

        text-decoration:none;
        color:inherit;

        direction:ltr;
        text-align:left;
    }

    .cfte-mobile-brand strong{
        font-size:22px;
        line-height:1.15;
        font-weight:900;
        letter-spacing:-.6px;
    }

    .cfte-mobile-brand strong span{
        color:#00a6c7;
    }

    .cfte-mobile-brand small{
        margin-top:5px;

        color:var(--muted,#667784);

        font-size:10px;
        font-weight:600;
        letter-spacing:.7px;
    }


    .cfte-mobile-close{
        width:42px;
        height:42px;

        flex:0 0 42px;

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

        border:1px solid var(--border,rgba(15,61,94,.12));
        border-radius:13px;

        background:var(--surface-soft,#f5f8fa);
        color:inherit;

        font-family:Arial,sans-serif !important;
        font-size:28px;
        font-weight:300;
        line-height:1;

        cursor:pointer;
    }


    .cfte-mobile-links{
        display:flex;
        flex-direction:column;

        padding:4px 0 20px;
    }

    .cfte-mobile-links a{
        min-height:55px;

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

        gap:15px;

        padding:12px 5px;

        border-bottom:
            1px solid var(--border,rgba(15,61,94,.08));

        color:inherit;
        text-decoration:none;

        font-size:15px;
        font-weight:700;
    }

    .cfte-mobile-links a b{
        color:#00a6c7;

        font-family:Arial,sans-serif !important;
        font-size:18px;
        font-weight:400;
    }


    .cfte-mobile-cta{
        margin-top:auto;
        padding-top:18px;
    }

    .cfte-mobile-cta a{
        min-height:56px;

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

        gap:12px;

        padding:12px 18px;

        border-radius:16px;

        background:
            linear-gradient(
                135deg,
                #0f3d5e,
                #00a6c7 58%,
                #18a67e
            );

        color:#fff;
        text-decoration:none;

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

        box-shadow:
            0 14px 32px rgba(0,166,199,.20);
    }


    /* Homepage */

    .header .menu{
        display:none !important;
    }

    .header .nav{
        gap:10px !important;
    }

    .header .logo{
        margin-left:auto !important;
    }

    .header .nav-actions{
        margin-right:0 !important;
        gap:8px !important;
    }


    /* Certifications directory */

    .cert-header .cert-nav > nav{
        display:none !important;
    }

    .cert-header .cert-nav{
        gap:10px !important;
    }

    .cert-header .cert-theme-toggle{
        margin-right:auto;
    }


    /* CFTe pillar */

    .cfte-pillar-header .cfte-pillar-nav{
        display:none !important;
    }

    .cfte-pillar-header-inner{
        gap:10px !important;
    }

    .cfte-pillar-theme{
        margin-right:auto;
    }

}


@media (max-width:480px){

    .cfte-mobile-drawer{
        width:92vw;
    }

    .cfte-mobile-menu-toggle{
        width:43px;
        height:43px;
        flex-basis:43px;
        border-radius:13px;
    }

    .cfte-mobile-links a{
        min-height:52px;
        font-size:14px;
    }

}


/* ==========================================================
   CFTECOURSES — BRIGHT PREMIUM HOMEPAGE HERO V1
   ========================================================== */

.hero-premium-v2{
    position:relative;
    overflow:hidden;
    padding:92px 0 96px;
    isolation:isolate;
    background:
        radial-gradient(circle at 88% 18%,rgba(73,203,188,.14),transparent 27%),
        radial-gradient(circle at 12% 75%,rgba(104,103,255,.10),transparent 30%),
        linear-gradient(135deg,#fbfdff 0%,#f7fbff 45%,#fbfaff 100%);
}

[data-theme="dark"] .hero-premium-v2{
    background:
        radial-gradient(circle at 88% 18%,rgba(73,203,188,.10),transparent 27%),
        radial-gradient(circle at 12% 75%,rgba(104,103,255,.12),transparent 30%),
        linear-gradient(135deg,#0b1220,#101827);
}

.hp-grid{
    position:absolute;
    inset:0;
    z-index:-3;
    opacity:.38;
    background-image:
        linear-gradient(rgba(72,95,130,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(72,95,130,.055) 1px,transparent 1px);
    background-size:54px 54px;
    mask-image:linear-gradient(to bottom,black,transparent 94%);
}

.hp-orb{
    position:absolute;
    border-radius:999px;
    filter:blur(4px);
    z-index:-2;
    pointer-events:none;
}

.hp-orb-one{
    width:330px;
    height:330px;
    right:-120px;
    top:-90px;
    background:linear-gradient(135deg,rgba(35,200,177,.14),rgba(63,137,255,.05));
}

.hp-orb-two{
    width:260px;
    height:260px;
    left:-110px;
    bottom:-90px;
    background:linear-gradient(135deg,rgba(115,90,255,.10),rgba(236,72,153,.07));
}

.hp-orb-three{
    width:95px;
    height:95px;
    right:47%;
    bottom:10%;
    background:rgba(253,190,80,.10);
}

.hp-layout{
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    gap:82px;
    align-items:center;
    position:relative;
}

.hp-copy{
    position:relative;
    z-index:3;
}

.hp-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:35px;
    padding:6px 14px;
    border-radius:999px;
    border:1px solid rgba(14,165,164,.18);
    background:rgba(255,255,255,.75);
    box-shadow:0 8px 28px rgba(36,72,110,.06);
    color:#087f80;
    font-size:11px;
    font-weight:800;
    backdrop-filter:blur(12px);
}

[data-theme="dark"] .hp-eyebrow{
    background:rgba(15,24,40,.78);
}

.hp-eyebrow-icon{
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:linear-gradient(135deg,#16b897,#00a6c7);
    color:#fff;
    font-size:10px;
}

.hero-premium-v2 h1{
    margin:22px 0 18px;
    font-family:"Cairo",Arial,sans-serif;
    font-size:64px;
    line-height:1.3;
    letter-spacing:-2.8px;
    font-weight:900;
    color:var(--text);
}

.hp-title-gradient{
    display:inline-block;
    background:linear-gradient(125deg,#5748e8 5%,#00a6c7 52%,#16a67e 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    position:relative;
}

.hp-title-gradient:after{
    content:"";
    position:absolute;
    height:8px;
    left:2px;
    right:2px;
    bottom:4px;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(87,72,232,.12),rgba(0,166,199,.12));
    z-index:-1;
}

.hp-lead{
    max-width:650px;
    margin:0;
    color:var(--muted);
    font-size:16px;
    line-height:2.05;
}

.hp-lead strong{
    color:var(--text);
    font-weight:800;
}

.hp-actions{
    display:flex;
    align-items:stretch;
    gap:12px;
    margin-top:29px;
}

.hp-primary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    min-width:235px;
    min-height:61px;
    padding:9px 18px 9px 13px;
    border-radius:17px;
    background:linear-gradient(135deg,#5748e8,#187fb9 55%,#0ba68d);
    color:#fff;
    box-shadow:0 18px 40px rgba(57,86,196,.22);
    transition:.25s ease;
}

.hp-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 48px rgba(57,86,196,.28);
}

.hp-primary span{
    display:block;
}

.hp-primary small{
    display:block;
    margin-bottom:1px;
    color:rgba(255,255,255,.73);
    font-size:8px;
    font-weight:600;
}

.hp-primary span{
    font-size:14px;
    font-weight:900;
}

.hp-primary b{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(255,255,255,.16);
    font-size:18px;
}

.hp-secondary{
    min-height:61px;
    padding:0 21px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:17px;
    border:1px solid rgba(94,109,134,.18);
    background:rgba(255,255,255,.67);
    color:var(--text);
    font-size:11px;
    font-weight:800;
    backdrop-filter:blur(12px);
    transition:.25s ease;
}

[data-theme="dark"] .hp-secondary{
    background:rgba(20,30,48,.72);
}

.hp-secondary:hover{
    transform:translateY(-2px);
    border-color:rgba(87,72,232,.30);
}

.hp-proof{
    display:flex;
    align-items:flex-start;
    gap:25px;
    margin-top:34px;
}

.hp-proof > div{
    display:flex;
    align-items:flex-start;
    gap:8px;
}

.hp-check{
    width:24px;
    height:24px;
    flex:0 0 24px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:rgba(15,166,141,.09);
    color:#0a9b83;
    font-size:11px;
    font-weight:900;
}

.hp-proof p{
    margin:0;
}

.hp-proof strong{
    display:block;
    color:var(--text);
    font-size:9px;
    line-height:1.4;
}

.hp-proof small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:7px;
}


/* VISUAL */

.hp-visual{
    position:relative;
    min-height:585px;
    display:flex;
    align-items:center;
    justify-content:center;
    direction:ltr;
}

.hp-learning-card{
    position:relative;
    width:min(100%,570px);
    padding:24px;
    border:1px solid rgba(111,127,157,.14);
    border-radius:30px;
    background:rgba(255,255,255,.88);
    box-shadow:
        0 35px 80px rgba(39,61,96,.13),
        0 8px 25px rgba(39,61,96,.06);
    backdrop-filter:blur(20px);
    direction:rtl;
    z-index:4;
}

[data-theme="dark"] .hp-learning-card{
    background:rgba(16,25,41,.91);
    border-color:rgba(255,255,255,.08);
    box-shadow:0 35px 90px rgba(0,0,0,.35);
}

.hp-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2px 3px 19px;
    border-bottom:1px solid var(--border);
}

.hp-card-head span{
    display:block;
    color:var(--muted);
    font-size:8px;
    font-weight:700;
    direction:ltr;
}

.hp-card-head h2{
    margin:3px 0 0;
    color:var(--text);
    font-family:"Cairo",Arial,sans-serif;
    font-size:22px;
    line-height:1.4;
}

.hp-level-badge{
    padding:8px 12px;
    border-radius:10px;
    background:linear-gradient(135deg,rgba(87,72,232,.09),rgba(0,166,199,.10));
    color:#5748e8;
    font-size:8px;
    font-weight:900;
    direction:ltr;
}

.hp-journey{
    display:grid;
    gap:9px;
    padding:17px 0;
}

.hp-step{
    position:relative;
    display:grid;
    grid-template-columns:46px 1fr 28px;
    align-items:center;
    gap:12px;
    min-height:84px;
    padding:11px 13px;
    border:1px solid rgba(103,119,148,.11);
    border-radius:17px;
    background:rgba(248,250,254,.72);
    color:inherit;
    transition:.23s ease;
}

[data-theme="dark"] .hp-step{
    background:rgba(255,255,255,.025);
}

a.hp-step:hover{
    transform:translateX(-4px);
    border-color:rgba(87,72,232,.22);
    background:rgba(255,255,255,.96);
    box-shadow:0 12px 28px rgba(40,61,96,.07);
}

[data-theme="dark"] a.hp-step:hover{
    background:rgba(255,255,255,.05);
}

.hp-step-active{
    border-color:rgba(15,166,141,.19);
    background:linear-gradient(90deg,rgba(15,166,141,.055),rgba(0,166,199,.025));
}

.hp-step-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:#fff;
    border:1px solid rgba(93,111,143,.12);
    box-shadow:0 7px 18px rgba(39,61,96,.06);
}

[data-theme="dark"] .hp-step-icon{
    background:#172235;
}

.hp-step-icon b{
    font-family:"Cairo",Arial,sans-serif;
    font-size:10px;
    color:#53627a;
}

.hp-step-active .hp-step-icon{
    background:linear-gradient(135deg,#16b897,#00a6c7);
    border:0;
}

.hp-step-active .hp-step-icon b{
    color:#fff;
}

.hp-step small{
    display:block;
    margin-bottom:1px;
    color:#0a9b83;
    font-size:7px;
    font-weight:800;
}

.hp-step strong{
    display:block;
    color:var(--text);
    font-size:11px;
    font-weight:900;
}

.hp-step p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:8px;
    line-height:1.6;
}

.hp-step > i{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:rgba(87,72,232,.06);
    color:#5748e8;
    font-style:normal;
    font-size:11px;
}

.hp-step-future{
    opacity:.74;
}

.hp-soon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 7px;
    border-radius:8px;
    background:rgba(245,158,11,.09);
    color:#b87508;
    font-size:7px;
    font-weight:900;
}

.hp-card-footer{
    display:flex;
    align-items:center;
    gap:9px;
    padding:15px 4px 1px;
    border-top:1px solid var(--border);
    direction:ltr;
}

.hp-footer-label{
    display:flex;
    align-items:center;
    gap:5px;
    color:#68778d;
    font-family:"Cairo",Arial,sans-serif;
    font-size:7px;
    font-weight:900;
}

.hp-footer-label span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#13aa90;
}

.hp-footer-line{
    height:1px;
    flex:1;
    background:linear-gradient(90deg,rgba(19,170,144,.4),rgba(87,72,232,.22));
}


/* FLOATING CARDS */

.hp-float{
    position:absolute;
    z-index:7;
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 13px;
    border:1px solid rgba(101,118,149,.13);
    border-radius:15px;
    background:rgba(255,255,255,.92);
    box-shadow:0 17px 38px rgba(39,61,96,.12);
    backdrop-filter:blur(14px);
    direction:ltr;
    animation:hpFloat 5s ease-in-out infinite;
}

[data-theme="dark"] .hp-float{
    background:rgba(20,30,48,.94);
}

.hp-float > span{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:linear-gradient(135deg,#5748e8,#00a6c7);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.hp-float strong{
    display:block;
    color:var(--text);
    font-family:"Cairo",Arial,sans-serif;
    font-size:9px;
}

.hp-float small{
    display:block;
    margin-top:1px;
    color:var(--muted);
    font-size:6px;
}

.hp-float-ar{
    left:-35px;
    top:79px;
}

.hp-float-focus{
    right:-28px;
    bottom:70px;
    animation-delay:-2.5s;
}

.hp-float-focus > span{
    background:linear-gradient(135deg,#ffb84d,#f47b69);
}

.hp-decoration{
    position:absolute;
    color:#6e62ec;
    opacity:.25;
    font-size:22px;
    z-index:2;
}

.hp-decoration-one{
    right:3%;
    top:2%;
}

.hp-decoration-two{
    left:6%;
    bottom:3%;
    font-size:15px;
    color:#0ca98d;
}

@keyframes hpFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
}


/* TABLET */

@media(max-width:1150px){

    .hero-premium-v2{
        padding:70px 0 85px;
    }

    .hp-layout{
        grid-template-columns:1fr;
        gap:48px;
    }

    .hp-copy{
        text-align:center;
        max-width:790px;
        margin:auto;
    }

    .hp-lead{
        margin-left:auto;
        margin-right:auto;
    }

    .hp-actions,
    .hp-proof{
        justify-content:center;
    }

    .hp-visual{
        width:min(100%,720px);
        margin:auto;
        min-height:570px;
    }

}


/* MOBILE */

@media(max-width:780px){

    .hero-premium-v2{
        padding:50px 0 58px;
    }

    .hp-layout{
        gap:35px;
    }

    .hp-eyebrow{
        font-size:9px;
        padding:6px 11px;
    }

    .hero-premium-v2 h1{
        font-size:42px;
        line-height:1.35;
        letter-spacing:-1.5px;
        margin-top:18px;
    }

    .hp-lead{
        font-size:13px;
        line-height:1.95;
    }

    .hp-actions{
        flex-direction:column;
    }

    .hp-primary,
    .hp-secondary{
        width:100%;
    }

    .hp-proof{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        text-align:right;
        width:100%;
    }

    .hp-proof > div{
        padding:8px 10px;
        border-radius:12px;
        background:rgba(255,255,255,.45);
    }

    [data-theme="dark"] .hp-proof > div{
        background:rgba(255,255,255,.025);
    }

    .hp-visual{
        min-height:auto;
        display:block;
    }

    .hp-learning-card{
        width:100%;
        padding:16px;
        border-radius:23px;
    }

    .hp-card-head h2{
        font-size:18px;
    }

    .hp-level-badge{
        padding:6px 8px;
        font-size:7px;
    }

    .hp-step{
        grid-template-columns:39px 1fr 25px;
        gap:9px;
        min-height:76px;
        padding:9px;
        border-radius:14px;
    }

    .hp-step-icon{
        width:37px;
        height:37px;
        border-radius:11px;
    }

    .hp-step p{
        font-size:7px;
    }

    .hp-float{
        display:none;
    }

    .hp-card-footer{
        gap:5px;
    }

    .hp-footer-label{
        font-size:6px;
    }

}


/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce){
    .hp-float{
        animation:none;
    }

    .hp-primary,
    .hp-secondary,
    .hp-step{
        transition:none;
    }
}



/* ==========================================================
   CFTECOURSES — MOBILE GLOBAL HEADER V2
   One global identity across desktop + mobile
   ========================================================== */

.cfte-mobile-menu-toggle{
    display:none;
}


@media(max-width:1150px){

    body > .header .nav{
        height:72px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:12px !important;
    }

    body > .header .menu{
        display:none !important;
    }

    body > .header .logo{
        margin-left:auto !important;
        margin-right:0 !important;
        flex:0 1 auto;
    }

    body > .header .nav-actions{
        margin-right:0 !important;
        margin-left:0 !important;
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
        flex:0 0 auto;
    }

    body > .header .login-link,
    body > .header .small-btn{
        display:none !important;
    }

    .cfte-mobile-menu-toggle{
        width:46px;
        height:46px;
        flex:0 0 46px;

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

        gap:5px;

        padding:0;

        border:
            1px solid var(--border,rgba(15,61,94,.12));

        border-radius:14px;

        background:
            var(--surface-soft,#f5f8fa);

        color:var(--text,#081b2c);

        cursor:pointer;

        transition:
            transform .2s ease,
            border-color .2s ease,
            background .2s ease;
    }

    .cfte-mobile-menu-toggle:hover{
        border-color:rgba(0,166,199,.35);
    }

    .cfte-mobile-menu-toggle span{
        display:block;

        width:19px;
        height:2px;

        border-radius:999px;

        background:currentColor;

        transition:
            transform .25s ease,
            opacity .2s ease;
    }

    body.cfte-mobile-menu-open
    .cfte-mobile-menu-toggle span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    body.cfte-mobile-menu-open
    .cfte-mobile-menu-toggle span:nth-child(2){
        opacity:0;
    }

    body.cfte-mobile-menu-open
    .cfte-mobile-menu-toggle span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    body.cfte-mobile-menu-open{
        overflow:hidden;
    }

}


@media(max-width:780px){

    body > .header .nav{
        height:68px !important;
    }

    body > .header .logo-mark{
        width:34px !important;
        height:34px !important;
        flex:0 0 34px;
    }

    body > .header .logo strong{
        font-size:19px !important;
    }

    body > .header .logo small{
        font-size:6px !important;
        letter-spacing:.35px;
    }

    body > .header .theme-btn{
        width:42px !important;
        height:42px !important;
        flex:0 0 42px;
    }

    .cfte-mobile-menu-toggle{
        width:42px;
        height:42px;
        flex-basis:42px;
        border-radius:13px;
    }

}


@media(max-width:390px){

    body > .header .logo{
        gap:7px !important;
    }

    body > .header .logo strong{
        font-size:17px !important;
    }

    body > .header .logo small{
        display:none;
    }

    body > .header .nav-actions{
        gap:6px !important;
    }

}



/* ==========================================================
   CFTECOURSES — MOBILE NAV DESKTOP PARITY V1
   Same information architecture as desktop navigation
   ========================================================== */

@media(max-width:900px){

    .cfte-mobile-links a{
        position:relative;
        transition:
            background .2s ease,
            color .2s ease,
            padding .2s ease;
    }

    .cfte-mobile-links a:hover{
        color:#00a6c7;
        padding-right:10px;
    }

    .cfte-mobile-links a.active{
        margin:4px 0;
        padding-right:12px;
        padding-left:10px;

        border-bottom-color:transparent;
        border-radius:13px;

        background:
            linear-gradient(
                135deg,
                rgba(0,166,199,.08),
                rgba(24,166,126,.06)
            );

        color:#087f80;
    }

    .cfte-mobile-links a.active:before{
        content:"";

        position:absolute;

        right:0;
        top:12px;
        bottom:12px;

        width:3px;

        border-radius:999px;

        background:
            linear-gradient(
                to bottom,
                #00a6c7,
                #18a67e
            );
    }

    [data-theme="dark"] .cfte-mobile-links a.active{
        background:
            linear-gradient(
                135deg,
                rgba(0,166,199,.13),
                rgba(24,166,126,.08)
            );

        color:#4ed5d1;
    }

}


/* Hamburger is the mobile equivalent of desktop menu */
@media(min-width:901px){

    .cfte-mobile-menu-toggle{
        display:none !important;
    }

}