@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#F7F9FC;
  --bg2:#F7F9FC;
  --card:#FFFFFF;
  --card2:#FFFFFF;

  --green:#155EEF;
  --green2:#155EEF;
  --blue:#155EEF;
  --blue-dark:#0B1F3A;

  --success:#12B76A;
  --warning:#F79009;
  --dz-green:#006233;

  --white:#FFFFFF;
  --text:#0B1F3A;
  --muted:#667085;
  --line:#E4E7EC;

  --orange:#F79009;
  --max:1160px;
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Cairo",sans-serif;
  background:var(--bg);
  color:var(--white);
  line-height:1.7;
  overflow-x:hidden;
}

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

.container{
  width:min(var(--max),calc(100% - 32px));
  margin:auto;
}

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

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(6,27,20,.82);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}

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

.brand{
  display:flex;
  align-items:center;
  gap:11px;
}

.brand-icon{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(145deg,#13d394,#079d6c);
  box-shadow:0 8px 25px rgba(16,201,139,.18);
  font-size:20px;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.brand-text strong{
  font-size:18px;
  font-weight:900;
}

.brand-text small{
  margin-top:4px;
  color:var(--green2);
  font-size:9px;
  letter-spacing:2px;
  font-weight:800;
}

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

.nav-links a{
  color:#9ab1a7;
  font-size:12px;
  font-weight:700;
  padding:9px 13px;
  border-radius:9px;
  transition:.25s;
}

.nav-links a:hover,
.nav-links a.active{
  color:#fff;
  background:rgba(16,201,139,.09);
}

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

.hero{
  position:relative;
  overflow:hidden;
  min-height:720px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(16,201,139,.17),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      var(--bg) 0%,
      #071f17 55%,
      var(--bg2) 100%
    );
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.045;
  background-image:
    linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(to bottom,#000,transparent 85%);
}

.hero::after{
  content:"";
  position:absolute;
  width:650px;
  height:650px;
  border-radius:50%;
  left:50%;
  top:-450px;
  transform:translateX(-50%);
  background:rgba(16,201,139,.12);
  filter:blur(90px);
}

.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  text-align:center;
  padding:95px 0 100px;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 15px;
  border-radius:999px;
  background:rgba(16,201,139,.07);
  border:1px solid rgba(16,201,139,.18);
  color:#9af3d2;
  font-size:11px;
  font-weight:800;
}

.badge-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(16,201,139,.08);
}

.hero h1{
  margin:30px auto 0;
  max-width:850px;
  font-size:clamp(42px,7vw,78px);
  line-height:1.32;
  letter-spacing:-2px;
  font-weight:900;
}

.hero-line{
  display:block;
  color:#fff;
}

.hero-gradient{
  display:block;
  margin-top:3px;
  padding-bottom:10px;
  color:var(--green2);
}

.hero-description{
  max-width:620px;
  margin:18px auto 0;
  color:var(--muted);
  font-size:14px;
  line-height:2;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:35px;
}

.hero-button{
  min-width:220px;
  height:57px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:14px;
  font-size:12px;
  font-weight:900;
  transition:.3s;
}

.primary-button{
  color:#062018;
  background:linear-gradient(135deg,#69f2c7,var(--green));
  box-shadow:0 15px 40px rgba(16,201,139,.16);
}

.primary-button:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 45px rgba(16,201,139,.25);
}

.secondary-button{
  color:#fff;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
}

.secondary-button:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.06);
  border-color:rgba(16,201,139,.28);
}

.hero-trust{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  margin-top:48px;
}

.trust-item{
  display:flex;
  align-items:center;
  gap:8px;
  color:#819b90;
  font-size:10px;
}

.trust-item>span{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(16,201,139,.06);
  border:1px solid rgba(16,201,139,.10);
}

.trust-divider{
  width:1px;
  height:25px;
  background:var(--line);
}

/* ================= TOOLS ================= */

.tools-section{
  position:relative;
  padding:95px 0;
  background:var(--bg2);
}

.section-heading{
  text-align:center;
  max-width:650px;
  margin:0 auto 45px;
}

.section-kicker{
  color:var(--green2);
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}

.section-heading h2{
  margin-top:8px;
  font-size:32px;
  line-height:1.5;
  font-weight:900;
}

.section-heading p{
  margin-top:7px;
  color:var(--muted);
  font-size:12px;
}

.tools-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.tool-card{
  position:relative;
  min-height:270px;
  padding:19px;
  overflow:hidden;
  border-radius:24px;
  background:linear-gradient(
    145deg,
    rgba(255,255,255,.055),
    rgba(255,255,255,.025)
  );
  border:1px solid var(--line);
  transition:.35s;
}

.tool-card::before{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  right:-100px;
  top:-100px;
  background:rgba(16,201,139,.08);
  filter:blur(10px);
}

.tool-card:hover{
  transform:translateY(-7px);
  border-color:rgba(16,201,139,.25);
  box-shadow:0 25px 70px rgba(0,0,0,.18);
}

.tool-card-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.tool-number{
  color:#668279;
  font-size:10px;
  letter-spacing:2px;
  font-weight:900;
}

.tool-arrow{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#9cefd2;
  background:rgba(16,201,139,.06);
  border:1px solid rgba(16,201,139,.13);
}

.tool-icon{
  position:relative;
  z-index:2;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  margin-top:17px;
  border-radius:19px;
  color:var(--green2);
  background:rgba(16,201,139,.07);
  border:1px solid rgba(16,201,139,.13);
  font-size:19px;
}

.tool-content{
  position:relative;
  z-index:2;
  margin-top:9px;
}

.tool-label{
  color:#6f8b7f;
  font-size:10px;
  font-weight:800;
}

.tool-content h3{
  margin-top:4px;
  font-size:21px;
  line-height:1.45;
  font-weight:900;
}

.tool-content h3 span{
  color:var(--green2);
}

.tool-content p{
  max-width:450px;
  margin-top:6px;
  color:#849d92;
  font-size:11px;
  line-height:1.7;
}

.tool-footer{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  margin-top:13px;
  padding-top:10px;
  border-top:1px solid var(--line);
  color:#617c70;
  font-size:9px;
  font-weight:800;
}

.tool-footer span:last-child{
  color:#69e9bf;
}

/* ================= WHY ================= */

.features-section{
  padding:0 0 100px;
  background:var(--bg2);
}

.features-box{
  padding:43px;
  border-radius:24px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
}

.features-title{
  text-align:center;
}

.features-title small{
  color:var(--green2);
  font-size:10px;
  font-weight:900;
}

.features-title h2{
  margin-top:7px;
  font-size:28px;
  font-weight:900;
}

.features-title h2 span{
  color:var(--green2);
}

.features-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:30px;
}

.feature-item{
  padding:23px;
  border-radius:16px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  transition:.25s;
}

.feature-item:hover{
  transform:translateY(-4px);
  border-color:rgba(16,201,139,.25);
  background:rgba(16,201,139,.045);
}

.feature-item>span{
  color:var(--green);
  font-size:10px;
  font-weight:900;
}

.feature-item strong{
  display:block;
  margin-top:10px;
  font-size:13px;
}

.feature-item p{
  margin-top:5px;
  color:#718a7f;
  font-size:10px;
  line-height:1.8;
}

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

.final-section{
  padding:0 0 100px;
  background:var(--bg2);
}

.final-card{
  position:relative;
  overflow:hidden;
  border-radius:27px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(16,201,139,.15),
      transparent 50%
    ),
    var(--bg);
  border:1px solid rgba(16,201,139,.16);
}

.final-content{
  position:relative;
  z-index:2;
  padding:65px 20px;
  text-align:center;
}

.final-icon{
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  margin:auto;
  border-radius:16px;
  background:rgba(16,201,139,.08);
  border:1px solid rgba(16,201,139,.14);
  color:var(--green2);
}

.final-card h2{
  margin-top:17px;
  font-size:34px;
  font-weight:900;
}

.final-card p{
  margin-top:6px;
  color:#718b80;
  font-size:11px;
}

.final-buttons{
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:25px;
}

.final-buttons a{
  padding:11px 20px;
  border-radius:11px;
  color:#062018;
  background:var(--green2);
  font-size:10px;
  font-weight:900;
}

.final-buttons a:last-child{
  color:#fff;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
}

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

.site-footer{
  padding:50px 0 23px;
  background:#04130e;
  border-top:1px solid var(--line);
}

.footer-main{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:40px;
}

.footer-brand p{
  max-width:330px;
  margin-top:9px;
  color:#637d71;
  font-size:10px;
}

.footer-column{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.footer-column h4{
  margin-bottom:4px;
  color:#fff;
  font-size:11px;
}

.footer-column a{
  color:#647e72;
  font-size:10px;
  transition:.2s;
}

.footer-column a:hover{
  color:var(--green2);
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  margin-top:38px;
  padding-top:17px;
  border-top:1px solid var(--line);
  color:#526b60;
  font-size:9px;
}

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

@media(max-width:850px){

  .nav-links{
    display:none;
  }

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

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

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

}

@media(max-width:600px){

  .container{
    width:calc(100% - 24px);
  }

  .navbar{
    height:68px;
  }

  .hero{
    min-height:auto;
  }

  .hero-content{
    padding:65px 0 60px;
  }

  .hero h1{
    font-size:38px;
    line-height:1.4;
    letter-spacing:-1px;
    padding:7px 4px 18px;
  }

  .hero-gradient{
    margin-top:4px;
    padding-bottom:8px;
  }

  .hero-description{
    font-size:11px;
  }

  .hero-actions{
    flex-direction:column;
    gap:9px;
    margin-top:27px;
  }

  .hero-button{
    width:100%;
    min-width:0;
    height:55px;
  }

  .hero-trust{
    gap:13px;
    margin-top:35px;
  }

  .trust-divider{
    display:none;
  }

  .trust-item{
    flex-direction:column;
    text-align:center;
    gap:4px;
  }

  .tools-section{
    padding:70px 0;
  }

  .section-heading{
    margin-bottom:32px;
  }

  .section-heading h2{
    font-size:21px;
  }

  .tool-card{
    min-height:255px;
    padding:17px;
  }

  .features-box{
    padding:30px 20px;
  }

  .features-title h2{
    font-size:24px;
  }

  .final-card h2{
    font-size:28px;
  }

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

  .final-buttons a{
    width:100%;
  }

  .footer-main{
    grid-template-columns:1fr;
    gap:27px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:5px;
  }

}

@media(max-width:380px){

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

  .tool-content h3{
    font-size:22px;
  }

}

/* ================= TOOL CARDS FIX ================= */

.tools-grid{
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.tool-card{
  min-height:265px;
  height:265px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.tool-card-top{
  flex-shrink:0;
}

.tool-icon{
  width:50px;
  height:50px;
  margin-top:15px;
  border-radius:15px;
  font-size:21px;
  flex-shrink:0;
}

.tool-content{
  margin-top:9px;
}

.tool-label{
  font-size:9px;
}

.tool-content h3{
  margin-top:2px;
  font-size:18px;
  line-height:1.4;
}

.tool-content p{
  margin-top:4px;
  font-size:10px;
  line-height:1.65;
}

.tool-footer{
  margin-top:auto;
  padding-top:10px;
  font-size:9px;
}

@media(max-width:850px){

  .tools-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  .tool-card{
    height:255px;
    min-height:255px;
    padding:16px;
  }

}

@media(max-width:600px){

  .tools-grid{
    grid-template-columns:1fr;
    gap:11px;
  }

  .tool-card{
    height:235px;
    min-height:235px;
    padding:17px;
  }

  .tool-icon{
    width:48px;
    height:48px;
    margin-top:13px;
  }

  .tool-content h3{
    font-size:18px;
  }

}

/* ================= M3DLI HOME V2 ================= */

.m3-search{
  max-width:680px;
  height:56px;
  margin:0 auto 28px;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:15px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
}

.m3-search span{
  font-size:17px;
  opacity:.75;
}

.m3-search input{
  width:100%;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-family:"Cairo",sans-serif;
  font-size:12px;
}

.m3-search input::placeholder{
  color:#637d71;
}

.m3-tools-grid{
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.m3-tool{
  min-height:290px;
  padding:22px;
  border-radius:19px;
}

.m3-tool .tool-icon{
  width:55px;
  height:55px;
  margin-top:22px;
  border-radius:15px;
  font-size:23px;
}

.m3-tool .tool-content{
  margin-top:14px;
}

.m3-tool .tool-content h3{
  font-size:18px;
}

.m3-tool .tool-content p{
  font-size:10px;
  line-height:1.8;
}

.m3-tool .tool-footer{
  margin-top:18px;
  padding-top:13px;
}

.level-group{
  margin-top:27px;
}

.level-heading{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
  color:#dcece6;
  font-size:13px;
}

.level-heading span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(16,201,139,.07);
  border:1px solid rgba(16,201,139,.12);
}

.levels-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:9px;
}

.levels-grid a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:45px;
  padding:8px 10px;
  border-radius:11px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  color:#9ab1a7;
  font-size:10px;
  font-weight:800;
  transition:.25s;
}

.levels-grid a:hover{
  color:#fff;
  background:rgba(16,201,139,.06);
  border-color:rgba(16,201,139,.25);
  transform:translateY(-2px);
}

.language-buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}

.language-button{
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:#9ab1a7;
  padding:9px 17px;
  border-radius:10px;
  font-family:"Cairo",sans-serif;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  transition:.25s;
}

.language-button:hover,
.language-button.active{
  color:#062018;
  background:var(--green2);
  border-color:var(--green2);
}

.amazigh-setting{
  max-width:500px;
  margin:25px auto 0;
  padding:15px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  text-align:right;
  border-radius:14px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
}

.amazigh-setting strong{
  display:block;
  font-size:12px;
}

.amazigh-setting small{
  display:block;
  margin-top:3px;
  color:#647e72;
  font-size:9px;
}

.switch{
  position:relative;
  width:46px;
  height:25px;
  flex-shrink:0;
}

.switch input{
  display:none;
}

.switch span{
  position:absolute;
  inset:0;
  cursor:pointer;
  border-radius:999px;
  background:#18352b;
  border:1px solid rgba(255,255,255,.10);
  transition:.25s;
}

.switch span::before{
  content:"";
  position:absolute;
  width:19px;
  height:19px;
  top:2px;
  right:2px;
  border-radius:50%;
  background:#718a7f;
  transition:.25s;
}

.switch input:checked + span{
  background:rgba(16,201,139,.18);
  border-color:rgba(16,201,139,.35);
}

.switch input:checked + span::before{
  transform:translateX(-20px);
  background:var(--green2);
  box-shadow:0 0 12px rgba(16,201,139,.25);
}


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

@media(max-width:950px){

  .m3-tools-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .levels-grid{
    grid-template-columns:repeat(3,1fr);
  }

}

@media(max-width:600px){

  .m3-search{
    height:52px;
    margin-bottom:22px;
  }

  .m3-tools-grid{
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .m3-tool{
    min-height:250px;
    padding:17px;
    border-radius:16px;
  }

  .m3-tool .tool-icon{
    width:48px;
    height:48px;
    margin-top:18px;
    border-radius:13px;
    font-size:20px;
  }

  .m3-tool .tool-content{
    margin-top:11px;
  }

  .m3-tool .tool-content h3{
    font-size:15px;
  }

  .m3-tool .tool-content p{
    font-size:9px;
    line-height:1.7;
  }

  .m3-tool .tool-footer{
    margin-top:14px;
    padding-top:10px;
    font-size:8px;
  }

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

  .language-buttons{
    gap:6px;
  }

  .language-button{
    flex:1 1 calc(50% - 6px);
  }

  .amazigh-setting{
    padding:13px;
  }

}

@media(max-width:380px){

  .m3-tools-grid{
    grid-template-columns:1fr;
  }

  .m3-tool{
    min-height:220px;
  }

}


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

.platform-hero{
  padding:90px 0 70px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%,rgba(16,201,139,.13),transparent 45%),
    var(--bg);
}

.platform-hero h1{
  margin-top:22px;
  font-size:clamp(32px,5vw,55px);
  font-weight:900;
}

.platform-hero p{
  max-width:620px;
  margin:12px auto 0;
  color:var(--muted);
  font-size:12px;
  line-height:2;
}

.platform-back{
  display:inline-flex;
  margin-top:25px;
  min-width:auto;
  padding:0 25px;
}

.platform-section{
  min-height:400px;
  padding:70px 0 100px;
  background:var(--bg2);
}

.platform-heading{
  text-align:center;
  margin-bottom:35px;
}

.platform-heading > span{
  color:var(--green2);
  font-size:10px;
  font-weight:900;
}

.platform-heading h2{
  margin-top:7px;
  font-size:28px;
  font-weight:900;
}

.platform-heading p{
  margin-top:5px;
  color:#718a7f;
  font-size:10px;
}

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

.platform-card{
  min-height:105px;
  padding:19px;
  display:flex;
  align-items:center;
  gap:13px;
  border-radius:17px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  transition:.25s;
}

.platform-card:hover{
  transform:translateY(-4px);
  border-color:rgba(16,201,139,.25);
  background:rgba(16,201,139,.04);
}

.platform-icon{
  width:48px;
  height:48px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(16,201,139,.07);
  border:1px solid rgba(16,201,139,.12);
  font-size:20px;
}

.platform-card div{
  flex:1;
}

.platform-card strong{
  display:block;
  font-size:12px;
}

.platform-card p{
  margin-top:3px;
  color:#70897e;
  font-size:9px;
  line-height:1.7;
}

.platform-arrow{
  color:var(--green2);
  font-size:15px;
}

.platform-empty{
  max-width:650px;
  margin:auto;
  padding:45px 25px;
  text-align:center;
  border-radius:20px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
}

.platform-empty strong{
  font-size:15px;
}

.platform-empty p{
  margin-top:8px;
  color:#718a7f;
  font-size:10px;
  line-height:1.9;
}

@media(max-width:800px){

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

}

@media(max-width:600px){

  .platform-hero{
    padding:65px 0 55px;
  }

  .platform-hero h1{
    font-size:32px;
  }

  .platform-section{
    padding:55px 0 75px;
  }

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

}

/* ================= LEVEL PAGE ================= */

.amazighia-box{
  max-width:720px;
  margin:25px auto 0;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  border-radius:17px;
  background:rgba(16,201,139,.035);
  border:1px solid rgba(16,201,139,.12);
}

.amazighia-icon{
  width:45px;
  height:45px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(16,201,139,.08);
  color:var(--green2);
  font-size:20px;
}

.amazighia-content{
  flex:1;
}

.amazighia-content strong{
  display:block;
  font-size:12px;
}

.amazighia-content p{
  margin-top:3px;
  color:#718a7f;
  font-size:9px;
}

.switch{
  position:relative;
  width:46px;
  height:25px;
  flex-shrink:0;
}

.switch input{
  opacity:0;
  width:0;
  height:0;
}

.switch span{
  position:absolute;
  inset:0;
  cursor:pointer;
  border-radius:30px;
  background:#16362b;
  border:1px solid rgba(255,255,255,.08);
  transition:.25s;
}

.switch span::before{
  content:"";
  position:absolute;
  width:17px;
  height:17px;
  right:3px;
  top:3px;
  border-radius:50%;
  background:#819b90;
  transition:.25s;
}

.switch input:checked + span{
  background:rgba(16,201,139,.22);
  border-color:rgba(16,201,139,.4);
}

.switch input:checked + span::before{
  transform:translateX(-21px);
  background:var(--green2);
  box-shadow:0 0 12px rgba(16,201,139,.35);
}

@media(max-width:600px){

  .amazighia-box{
    padding:15px;
  }

  .amazighia-content p{
    font-size:8px;
  }

}

/* ================= SUBJECT PAGE ================= */

.subject-actions{
  max-width:850px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.subject-action-card{
  min-height:82px;
  padding:16px;
  display:flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
  transition:.2s ease;
}

.subject-action-card:hover{
  transform:translateY(-2px);
  border-color:rgba(16,201,139,.25);
  background:rgba(16,201,139,.045);
}

.subject-action-icon{
  width:46px;
  height:46px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(16,201,139,.08);
  font-size:20px;
}

.subject-action-card div{
  flex:1;
}

.subject-action-card strong{
  display:block;
  color:#eef7f3;
  font-size:12px;
}

.subject-action-card p{
  margin:4px 0 0;
  color:#718a7f;
  font-size:9px;
  line-height:1.6;
}

.subject-arrow{
  color:var(--green2);
  font-size:15px;
}

.platform-note{
  max-width:850px;
  margin:22px auto 0;
  padding:17px 19px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.018);
}

.platform-note strong{
  font-size:11px;
}

.platform-note p{
  margin:6px 0 0;
  color:#718a7f;
  font-size:9px;
  line-height:1.8;
}

@media(max-width:650px){

  .subject-actions{
    grid-template-columns:1fr;
  }

  .subject-action-card{
    min-height:75px;
  }

}


/* ===== FIXED / STICKY HEADER ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

/* ================= AMAZIGHIA HEADER CONTROL ================= */

.amazighia-header-control{
  display:flex;
  align-items:center;
  gap:8px;
  margin-inline-start:12px;
  flex-shrink:0;
}

.amazighia-header-control > span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:9px;
  background:rgba(16,201,139,.08);
  border:1px solid rgba(16,201,139,.12);
  color:var(--green2);
  font-size:15px;
}

.amazighia-header-control .switch{
  width:40px;
  height:22px;
}

.amazighia-header-control .switch span::before{
  width:16px;
  height:16px;
  top:2px;
  right:2px;
}

.amazighia-header-control .switch input:checked + span::before{
  transform:translateX(-18px);
}

@media(max-width:950px){

  .amazighia-header-control{
    margin-inline-start:8px;
  }

}

@media(max-width:600px){

  .amazighia-header-control{
    margin-inline-start:5px;
    gap:5px;
  }

  .amazighia-header-control > span{
    width:27px;
    height:27px;
    font-size:14px;
  }

  .amazighia-header-control .switch{
    width:36px;
    height:20px;
  }

  .amazighia-header-control .switch span::before{
    width:14px;
    height:14px;
  }

  .amazighia-header-control .switch input:checked + span::before{
    transform:translateX(-16px);
  }

}


/* ===== HEADER AMAZIGHIA — FINAL ===== */

.site-header .navbar{
  display:flex;
  align-items:center;
  gap:16px;
}

.site-header .nav-links{
  flex:1;
}

.site-header .amazighia-header-control{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:0 0 auto;
  margin:0 !important;
  padding:4px 7px;
  border-radius:12px;
  background:rgba(16,201,139,.05);
  border:1px solid rgba(16,201,139,.10);
}

.site-header .amazighia-header-control > span{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:var(--green2);
  font-size:15px;
}

.site-header .amazighia-header-control .switch{
  width:38px;
  height:21px;
}

.site-header .amazighia-header-control .switch span{
  display:block;
}

.site-header .amazighia-header-control .switch span::before{
  width:15px;
  height:15px;
  top:2px;
  right:2px;
}

.site-header .amazighia-header-control .switch input:checked + span::before{
  transform:translateX(-17px);
}

@media(max-width:950px){

  .site-header .navbar{
    gap:10px;
  }

  .site-header .nav-links{
    overflow-x:auto;
    scrollbar-width:none;
  }

  .site-header .nav-links::-webkit-scrollbar{
    display:none;
  }

}

@media(max-width:600px){

  .site-header .navbar{
    gap:6px;
  }

  .site-header .amazighia-header-control{
    padding:3px 5px;
    gap:4px;
    border-radius:10px;
  }

  .site-header .amazighia-header-control > span{
    width:23px;
    height:23px;
    font-size:13px;
  }

  .site-header .amazighia-header-control .switch{
    width:34px;
    height:19px;
  }

  .site-header .amazighia-header-control .switch span::before{
    width:13px;
    height:13px;
  }

  .site-header .amazighia-header-control .switch input:checked + span::before{
    transform:translateX(-15px);
  }

}


/* ===== M3DLI HEADER FINAL LAYOUT ===== */

.site-header .navbar{
  justify-content:flex-start;
  gap:18px;
}

.site-header .nav-links{
  flex:1;
  justify-content:center;
  min-width:0;
}

.site-header .amazighia-header-control{
  margin-inline-start:auto !important;
}

@media(max-width:950px){

  .site-header .navbar{
    gap:10px;
  }

  .site-header .nav-links{
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
    white-space:nowrap;
  }

  .site-header .nav-links::-webkit-scrollbar{
    display:none;
  }

}

@media(max-width:600px){

  .site-header .navbar{
    height:64px;
    gap:7px;
  }

  .site-header .brand{
    flex-shrink:0;
  }

  .site-header .brand-icon{
    width:36px;
    height:36px;
    font-size:17px;
  }

  .site-header .brand-text strong{
    font-size:15px;
  }

  .site-header .brand-text small{
    font-size:8px;
  }

  .site-header .nav-links{
    gap:2px;
  }

  .site-header .nav-links a{
    padding:7px 9px;
    font-size:10px;
  }

  .site-header .amazighia-header-control{
    flex-shrink:0;
  }

}


/* =========================================================
   M3DLI HOME V2
   ========================================================= */

.m3-tools-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:35px;
}

.m3-tool{
  position:relative;
  min-height:300px;
  display:flex;
  flex-direction:column;
  padding:25px;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    linear-gradient(145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015));
  overflow:hidden;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.m3-tool::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  top:-90px;
  left:-70px;
  border-radius:50%;
  background:rgba(79,140,255,.10);
  filter:blur(35px);
  pointer-events:none;
}

.m3-tool:hover{
  transform:translateY(-6px);
  border-color:rgba(79,140,255,.40);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.tool-card-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.tool-number{
  font-size:11px;
  font-weight:900;
  color:var(--green2);
  letter-spacing:2px;
}

.tool-arrow{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  font-size:17px;
  transition:.25s;
}

.m3-tool:hover .tool-arrow{
  transform:translateX(-4px);
  background:rgba(79,140,255,.12);
}

.tool-icon{
  position:relative;
  z-index:1;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  margin-top:28px;
  border-radius:18px;
  background:rgba(79,140,255,.10);
  border:1px solid rgba(79,140,255,.18);
  font-size:30px;
}

.tool-content{
  position:relative;
  z-index:1;
  margin-top:18px;
}

.tool-content h3{
  font-size:22px;
  font-weight:900;
}

.tool-content h3 span{
  color:var(--green2);
}

.tool-content p{
  max-width:470px;
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
}

.tool-footer{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding-top:22px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.tool-footer span:last-child{
  color:var(--green2);
}

.coming-level-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:16px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.025);
  opacity:.88;
}

.coming-level-icon{
  width:56px;
  height:56px;
  flex:0 0 56px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(79,140,255,.09);
  border:1px solid rgba(79,140,255,.16);
  font-size:25px;
}

.coming-label{
  display:inline-flex;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(255,159,67,.10);
  border:1px solid rgba(255,159,67,.20);
  color:var(--orange);
  font-size:9px;
  font-weight:900;
}

.coming-level-card h3{
  margin-top:5px;
  font-size:17px;
  font-weight:900;
}

.coming-level-card p{
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
}

.features-title p{
  max-width:650px;
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
}

@media(max-width:760px){

  .m3-tools-grid{
    grid-template-columns:1fr;
  }

  .m3-tool{
    min-height:270px;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-button{
    width:100%;
  }

  .hero-trust{
    flex-wrap:wrap;
    gap:15px;
    justify-content:center;
  }

  .trust-divider{
    display:none;
  }

  .coming-level-card{
    align-items:flex-start;
  }

}

@media(max-width:430px){

  .m3-tool{
    padding:20px;
    border-radius:20px;
  }

  .tool-content h3{
    font-size:20px;
  }

  .coming-level-card{
    padding:16px;
  }

}


/* =========================================================
   M3DLI HOME — CLEAN ACADEMIC
   ========================================================= */

html{
  background:#F7F9FC;
}

body{
  background:#F7F9FC;
  color:#0B1F3A;
}

/* Header */

.site-header{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #E4E7EC;
  box-shadow:0 1px 8px rgba(16,24,40,.04);
}

.brand-icon{
  background:#155EEF;
  box-shadow:0 6px 18px rgba(21,94,239,.14);
}

.brand-text strong{
  color:#0B1F3A;
}

.brand-text small{
  color:#155EEF;
}

.nav-links a{
  color:#667085;
}

.nav-links a:hover,
.nav-links a.active{
  color:#155EEF;
  background:#EFF4FF;
}

/* Hero */

.hero{
  background:#F7F9FC;
  min-height:620px;
}

.hero::before,
.hero::after{
  display:none;
}

.hero-badge{
  background:#EFF4FF;
  border:1px solid #D6E4FF;
  color:#155EEF;
}

.badge-dot{
  background:#155EEF;
  box-shadow:0 0 0 5px rgba(21,94,239,.08);
}

.hero-line{
  color:#0B1F3A;
}

.hero-gradient{
  color:#155EEF;
}

.hero-description{
  color:#667085;
}

.primary-button{
  background:#155EEF;
  color:#FFFFFF;
  box-shadow:0 8px 20px rgba(21,94,239,.14);
}

.primary-button:hover{
  background:#0F4BC4;
}

.secondary-button{
  background:#FFFFFF;
  color:#0B1F3A;
  border:1px solid #D0D5DD;
  box-shadow:0 2px 8px rgba(16,24,40,.04);
}

.secondary-button:hover{
  color:#155EEF;
  border-color:#B2CCFF;
}

/* Tools */

.tools-section{
  background:#F7F9FC;
}

.section-kicker{
  color:#155EEF;
}

.section-heading h2{
  color:#0B1F3A;
}

.section-heading h2 span{
  color:#155EEF;
}

.section-heading p{
  color:#667085;
}

.m3-search{
  background:#FFFFFF;
  border:1px solid #D0D5DD;
  box-shadow:0 2px 8px rgba(16,24,40,.04);
}

.m3-search input{
  color:#0B1F3A;
}

.m3-search input::placeholder{
  color:#98A2B3;
}

/* Four main cards */

.m3-tools-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.m3-tool{
  position:relative;
  overflow:hidden;
  background:#FFFFFF;
  border:1px solid #EAECF0;
  border-radius:16px;
  box-shadow:0 2px 8px rgba(16,24,40,.035);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.m3-tool:hover{
  transform:translateY(-4px);
  border-color:#B2CCFF;
  box-shadow:0 12px 30px rgba(16,24,40,.07);
}

.tool-number{
  color:#155EEF;
  background:#EFF4FF;
  border-radius:9px;
}

.tool-arrow{
  color:#155EEF;
}

.tool-icon{
  background:#EFF4FF;
  color:#155EEF;
  border-radius:14px;
}

.tool-content h3{
  color:#0B1F3A;
}

.tool-content h3 span{
  color:#155EEF;
}

.tool-content p{
  color:#667085;
}

.tool-footer{
  border-top:1px solid #F0F2F5;
}

.tool-footer span:first-child{
  color:#12B76A;
}

.tool-footer span:last-child{
  color:#155EEF;
}

/* Levels */

.features-section{
  background:#F7F9FC;
}

.features-box{
  background:#FFFFFF;
  border:1px solid #EAECF0;
  border-radius:16px;
  box-shadow:0 2px 8px rgba(16,24,40,.035);
}

.features-title small{
  color:#155EEF;
}

.features-title h2{
  color:#0B1F3A;
}

.features-title h2 span{
  color:#155EEF;
}

.level-heading{
  color:#0B1F3A;
}

.levels-grid a{
  background:#FFFFFF;
  color:#0B1F3A;
  border:1px solid #EAECF0;
  border-radius:12px;
  box-shadow:0 1px 4px rgba(16,24,40,.03);
}

.levels-grid a:hover{
  color:#155EEF;
  border-color:#B2CCFF;
  background:#F9FBFF;
}

/* Final */

.final-section{
  background:#F7F9FC;
}

.final-card{
  background:#FFFFFF;
  border:1px solid #EAECF0;
  border-radius:16px;
  box-shadow:0 2px 8px rgba(16,24,40,.035);
}

.final-content h2{
  color:#0B1F3A;
}

.final-content p{
  color:#667085;
}

/* Mobile */

@media(max-width:768px){

  .nav-links{
    display:none;
  }

  .hero{
    min-height:auto;
  }

  .hero-content{
    padding:60px 0 70px;
  }

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

  .hero-button{
    width:100%;
  }

  .m3-tools-grid{
    grid-template-columns:1fr;
  }

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


/* =========================================================
   M3DLI — PREMIUM ACADEMIC / SOFT LED UI
   UI ONLY — لا يمس الحاسبات أو PDF
   ========================================================= */

/* ---------- GLOBAL BACKGROUND ---------- */

html,
body{
  background:#F4F7FC;
}

body{
  position:relative;
  color:#0B1F3A;
}

/* خلفية أنيقة متعددة الطبقات */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(21,94,239,.075),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 28%,
      rgba(21,94,239,.055),
      transparent 25%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(0,98,51,.035),
      transparent 30%
    );
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.42;
  background-image:
    linear-gradient(
      rgba(21,94,239,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(21,94,239,.025) 1px,
      transparent 1px
    );
  background-size:42px 42px;
  mask-image:linear-gradient(
    to bottom,
    black,
    transparent 82%
  );
}

/* ---------- HEADER ---------- */

.site-header{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(21,94,239,.09);
  box-shadow:
    0 4px 24px rgba(11,31,58,.045);
}

.navbar{
  min-height:74px;
}

.brand{
  transition:transform .22s ease;
}

.brand:hover{
  transform:translateY(-1px);
}

.brand-icon{
  background:#155EEF;
  box-shadow:
    0 6px 20px rgba(21,94,239,.18),
    0 0 0 1px rgba(21,94,239,.08);
}

.nav-links a{
  position:relative;
  color:#667085;
  transition:
    color .2s ease,
    background .2s ease;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:4px;
  height:2px;
  border-radius:10px;
  background:#155EEF;
  transform:scaleX(0);
  transition:transform .2s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after{
  transform:scaleX(1);
}

.nav-links a:hover,
.nav-links a.active{
  color:#155EEF;
  background:#F0F5FF;
}

/* ---------- HERO ---------- */

.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 50% -15%,
      rgba(21,94,239,.11),
      transparent 45%
    ),
    linear-gradient(
      180deg,
      #F7F9FC 0%,
      #F4F7FC 100%
    );
}

.hero::before{
  display:block;
  opacity:.55;
  background-image:
    linear-gradient(
      rgba(21,94,239,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(21,94,239,.035) 1px,
      transparent 1px
    );
  background-size:64px 64px;
  mask-image:linear-gradient(
    to bottom,
    black 0%,
    transparent 75%
  );
}

.hero::after{
  display:block;
  width:520px;
  height:520px;
  top:-390px;
  background:rgba(21,94,239,.09);
  filter:blur(100px);
}

.hero-content{
  position:relative;
}

.hero-badge{
  box-shadow:
    0 4px 18px rgba(21,94,239,.07);
}

.hero h1{
  text-shadow:0 2px 14px rgba(11,31,58,.025);
}

.hero-gradient{
  text-shadow:
    0 5px 24px rgba(21,94,239,.10);
}

.hero-description{
  max-width:650px;
}

/* ---------- BUTTONS ---------- */

.primary-button{
  position:relative;
  overflow:hidden;
  background:#155EEF;
  box-shadow:
    0 8px 22px rgba(21,94,239,.16);
}

.primary-button::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,.22) 50%,
    transparent 80%
  );
  transform:translateX(-120%);
  transition:transform .55s ease;
}

.primary-button:hover::before{
  transform:translateX(120%);
}

.primary-button:hover{
  transform:translateY(-3px);
  box-shadow:
    0 12px 30px rgba(21,94,239,.23),
    0 0 22px rgba(21,94,239,.10);
}

.secondary-button:hover{
  transform:translateY(-2px);
  box-shadow:
    0 8px 22px rgba(21,94,239,.08);
}

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

.section-heading{
  position:relative;
}

.section-kicker{
  letter-spacing:1.5px;
  font-weight:900;
}

.section-heading h2{
  letter-spacing:-.6px;
}

/* ---------- SEARCH ---------- */

.m3-search{
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.m3-search:focus-within{
  border-color:#AFC8FF;
  transform:translateY(-1px);
  box-shadow:
    0 8px 24px rgba(21,94,239,.07),
    0 0 0 4px rgba(21,94,239,.06);
}

.m3-search input{
  outline:none;
}

/* =========================================================
   PREMIUM TOOL CARDS
   ========================================================= */

.m3-tools-grid{
  align-items:stretch;
}

.m3-tool{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:245px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(251,253,255,.98)
    );

  border:1px solid #E4EAF3;
  border-radius:18px;

  box-shadow:
    0 3px 12px rgba(11,31,58,.045);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

/* LED line */
.m3-tool::before{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:2px;
  border-radius:99px;
  background:#155EEF;
  opacity:.18;
  transition:
    opacity .25s ease,
    box-shadow .25s ease;
}

/* glow داخل البطاقة */
.m3-tool::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  top:-110px;
  left:-80px;
  border-radius:50%;
  background:rgba(21,94,239,.06);
  filter:blur(30px);
  z-index:-1;
  transition:
    opacity .25s ease,
    transform .25s ease;
}

.m3-tool:hover{
  transform:translateY(-6px);
  border-color:#B8CDF6;
  box-shadow:
    0 16px 38px rgba(11,31,58,.075),
    0 0 28px rgba(21,94,239,.075);
}

.m3-tool:hover::before{
  opacity:1;
  box-shadow:
    0 0 8px rgba(21,94,239,.28),
    0 0 20px rgba(21,94,239,.13);
}

.m3-tool:hover::after{
  opacity:1;
  transform:scale(1.25);
}

.tool-card-top{
  position:relative;
  z-index:2;
}

.tool-number{
  border:1px solid #DCE7FF;
  color:#155EEF;
  background:#F0F5FF;
  box-shadow:
    0 3px 10px rgba(21,94,239,.06);
}

.tool-arrow{
  transition:
    transform .2s ease,
    color .2s ease;
}

.m3-tool:hover .tool-arrow{
  color:#155EEF;
  transform:translateX(-4px);
}

.tool-icon{
  position:relative;
  border:1px solid #DCE7FF;
  background:#F0F5FF;
  box-shadow:
    0 5px 16px rgba(21,94,239,.07);
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.m3-tool:hover .tool-icon{
  transform:translateY(-3px) scale(1.035);
  box-shadow:
    0 8px 22px rgba(21,94,239,.12),
    0 0 18px rgba(21,94,239,.07);
}

.tool-content h3{
  color:#0B1F3A;
  letter-spacing:-.25px;
}

.tool-content p{
  color:#667085;
}

.tool-footer{
  border-top:1px solid #EEF1F6;
}

/* ---------- LEVELS ---------- */

.features-section{
  position:relative;
}

.features-box{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.94);
  border:1px solid #E4EAF3;
  border-radius:18px;
  box-shadow:
    0 5px 22px rgba(11,31,58,.045);
}

.features-box::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:#155EEF;
  opacity:.7;
}

.level-heading{
  color:#0B1F3A;
}

.levels-grid a{
  position:relative;
  overflow:hidden;
  background:#FFFFFF;
  border:1px solid #E4EAF3;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}

.levels-grid a::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(21,94,239,.035);
  opacity:0;
  transition:opacity .2s ease;
}

.levels-grid a:hover{
  color:#155EEF;
  border-color:#B8CDF6;
  transform:translateY(-3px);
  box-shadow:
    0 8px 20px rgba(21,94,239,.08),
    0 0 16px rgba(21,94,239,.045);
}

.levels-grid a:hover::before{
  opacity:1;
}

/* ---------- FINAL ---------- */

.final-card{
  position:relative;
  overflow:hidden;
  background:#FFFFFF;
  border:1px solid #E4EAF3;
  border-radius:18px;
  box-shadow:
    0 5px 22px rgba(11,31,58,.045);
}

.final-card::before{
  content:"";
  position:absolute;
  top:0;
  left:15%;
  right:15%;
  height:2px;
  background:#155EEF;
  box-shadow:
    0 0 12px rgba(21,94,239,.20);
}

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

.site-footer{
  position:relative;
  overflow:hidden;
  background:#0B1F3A;
}

.site-footer::before{
  content:"";
  position:absolute;
  width:420px;
  height:220px;
  top:-170px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(21,94,239,.15);
  filter:blur(70px);
}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

  body::after{
    background-size:34px 34px;
  }

  .m3-tool{
    min-height:220px;
    border-radius:16px;
  }

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

  .hero::after{
    width:320px;
    height:320px;
  }

  .features-box,
  .final-card{
    border-radius:16px;
  }

}

/* ---------- REDUCE MOTION ---------- */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }

}

/* =========================================================
   M3DLI — STRONG PREMIUM LED LAYER
   ========================================================= */

/* ---------- PREMIUM BACKGROUND ---------- */

html{
  background:#F4F7FC;
}

body{
  background:
    radial-gradient(
      900px 500px at 10% 0%,
      rgba(21,94,239,.10),
      transparent 65%
    ),
    radial-gradient(
      800px 500px at 95% 15%,
      rgba(21,94,239,.075),
      transparent 65%
    ),
    radial-gradient(
      900px 600px at 50% 100%,
      rgba(0,98,51,.035),
      transparent 65%
    ),
    #F4F7FC;
}

/* subtle technology grid */

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background-image:
    linear-gradient(
      rgba(21,94,239,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(21,94,239,.035) 1px,
      transparent 1px
    );

  background-size:55px 55px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.8),
      transparent 85%
    );
}

/* ---------- HEADER ---------- */

.site-header{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);

  border-bottom:1px solid rgba(21,94,239,.12);

  box-shadow:
    0 5px 30px rgba(11,31,58,.06),
    0 1px 0 rgba(255,255,255,.8) inset;
}

.brand-icon{
  background:#155EEF;

  box-shadow:
    0 6px 22px rgba(21,94,239,.28),
    0 0 18px rgba(21,94,239,.16);
}

/* ---------- HERO LIGHT ---------- */

.hero{
  background:
    radial-gradient(
      650px 350px at 50% 0%,
      rgba(21,94,239,.12),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #F8FAFF 0%,
      #F4F7FC 100%
    );
}

.hero::before{
  opacity:.65;

  background-image:
    linear-gradient(
      rgba(21,94,239,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(21,94,239,.035) 1px,
      transparent 1px
    );

  background-size:64px 64px;
}

.hero::after{
  display:block;

  width:650px;
  height:650px;

  top:-500px;

  background:
    radial-gradient(
      circle,
      rgba(21,94,239,.18) 0%,
      rgba(21,94,239,.08) 35%,
      transparent 70%
    );

  filter:blur(45px);
}

/* ---------- PRIMARY BUTTON ---------- */

.primary-button{
  background:#155EEF !important;

  box-shadow:
    0 8px 25px rgba(21,94,239,.25),
    0 0 20px rgba(21,94,239,.10);
}

.primary-button:hover{
  box-shadow:
    0 12px 32px rgba(21,94,239,.32),
    0 0 30px rgba(21,94,239,.20);
}

/* =========================================================
   TOOL CARDS — STRONG LED
   ========================================================= */

.m3-tool{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #FBFDFF 100%
    );

  border:1px solid #DCE5F2;

  border-radius:18px;

  box-shadow:
    0 5px 18px rgba(11,31,58,.055),
    0 1px 2px rgba(11,31,58,.035);

  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    border-color .28s ease;
}

/* luminous top rail */

.m3-tool::before{
  content:"";

  position:absolute;

  top:0;
  left:18px;
  right:18px;

  height:3px;

  border-radius:
    0 0 999px 999px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(21,94,239,.55) 18%,
      #155EEF 50%,
      rgba(21,94,239,.55) 82%,
      transparent 100%
    );

  box-shadow:
    0 0 7px rgba(21,94,239,.55),
    0 0 18px rgba(21,94,239,.28),
    0 0 35px rgba(21,94,239,.14);

  opacity:.75;

  transition:
    opacity .28s ease,
    box-shadow .28s ease;
}

/* large soft internal glow */

.m3-tool::after{
  content:"";

  position:absolute;

  width:280px;
  height:280px;

  top:-180px;
  left:-130px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(21,94,239,.16),
      rgba(21,94,239,.06) 35%,
      transparent 70%
    );

  filter:blur(25px);

  opacity:.48;

  z-index:-1;

  transition:
    opacity .3s ease,
    transform .3s ease;
}

/* hover = obvious premium glow */

.m3-tool:hover{
  transform:translateY(-8px);

  border-color:#9DBBFA;

  box-shadow:
    0 18px 42px rgba(11,31,58,.11),
    0 0 18px rgba(21,94,239,.16),
    0 0 45px rgba(21,94,239,.09);
}

.m3-tool:hover::before{
  opacity:1;

  box-shadow:
    0 0 8px rgba(21,94,239,.75),
    0 0 20px rgba(21,94,239,.50),
    0 0 42px rgba(21,94,239,.25);
}

.m3-tool:hover::after{
  opacity:1;
  transform:scale(1.45);
}

/* ---------- CARD ICON ---------- */

.tool-icon{
  background:#EEF4FF !important;

  border:1px solid #D2E1FF;

  color:#155EEF;

  box-shadow:
    0 7px 20px rgba(21,94,239,.10),
    0 0 15px rgba(21,94,239,.06);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.m3-tool:hover .tool-icon{
  transform:
    translateY(-4px)
    scale(1.06);

  background:#E8F0FF !important;

  box-shadow:
    0 10px 25px rgba(21,94,239,.18),
    0 0 18px rgba(21,94,239,.18),
    0 0 35px rgba(21,94,239,.08);
}

/* ---------- CARD NUMBER ---------- */

.tool-number{
  background:#EEF4FF;

  border:1px solid #D6E4FF;

  color:#155EEF;

  box-shadow:
    0 3px 12px rgba(21,94,239,.08);
}

/* ---------- CARD ARROW ---------- */

.tool-arrow{
  color:#155EEF;

  transition:
    transform .25s ease,
    text-shadow .25s ease;
}

.m3-tool:hover .tool-arrow{
  transform:translateX(-6px);

  text-shadow:
    0 0 8px rgba(21,94,239,.35);
}

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

.tool-footer{
  border-top:1px solid #E9EEF6;
}

.tool-footer span:last-child{
  color:#155EEF;

  text-shadow:
    0 0 10px rgba(21,94,239,.14);
}

/* =========================================================
   LEVEL CARDS
   ========================================================= */

.levels-grid a{
  background:#FFFFFF;

  border:1px solid #DCE5F2;

  box-shadow:
    0 4px 14px rgba(11,31,58,.045);

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;
}

.levels-grid a:hover{
  transform:translateY(-5px);

  border-color:#9DBBFA;

  box-shadow:
    0 12px 26px rgba(11,31,58,.08),
    0 0 20px rgba(21,94,239,.12);
}

/* =========================================================
   FEATURES BOX
   ========================================================= */

.features-box{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(249,251,255,.98)
    );

  border:1px solid #DCE5F2;

  box-shadow:
    0 8px 28px rgba(11,31,58,.06),
    0 0 30px rgba(21,94,239,.035);
}

.features-box::before{
  height:3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #155EEF,
      transparent
    );

  box-shadow:
    0 0 12px rgba(21,94,239,.30),
    0 0 28px rgba(21,94,239,.12);
}

/* =========================================================
   SEARCH
   ========================================================= */

.m3-search{
  background:#FFFFFF;

  border:1px solid #D8E2F0;

  box-shadow:
    0 5px 18px rgba(11,31,58,.045);
}

.m3-search:focus-within{
  border-color:#8FB1F8;

  box-shadow:
    0 8px 28px rgba(21,94,239,.10),
    0 0 0 4px rgba(21,94,239,.07),
    0 0 22px rgba(21,94,239,.07);
}

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

.final-card{
  background:#FFFFFF;

  border:1px solid #DCE5F2;

  box-shadow:
    0 8px 28px rgba(11,31,58,.06),
    0 0 30px rgba(21,94,239,.035);
}

.final-card::before{
  height:3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #155EEF,
      transparent
    );

  box-shadow:
    0 0 10px rgba(21,94,239,.45),
    0 0 25px rgba(21,94,239,.20);
}

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

.site-footer{
  background:#0B1F3A;

  box-shadow:
    0 -10px 35px rgba(11,31,58,.10);
}

.site-footer::before{
  background:
    radial-gradient(
      circle,
      rgba(21,94,239,.25),
      transparent 70%
    );

  filter:blur(55px);
}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

  .m3-tool{
    border-radius:16px;
  }

  .m3-tool:hover{
    transform:translateY(-4px);

    box-shadow:
      0 12px 28px rgba(11,31,58,.09),
      0 0 24px rgba(21,94,239,.12);
  }

  .m3-tool::before{
    left:14px;
    right:14px;
  }

  .hero::after{
    width:360px;
    height:360px;
    filter:blur(35px);
  }

}

/* =========================================================
   END PREMIUM LED
   ========================================================= */

/* =========================================================
   M3DLI — DARK LED CARDS
   ========================================================= */

.m3-tool{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(21,94,239,.18),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #102B50 0%,
      #0B1F3A 55%,
      #07172D 100%
    ) !important;

  border:1px solid rgba(75,137,255,.55) !important;

  color:#FFFFFF;

  box-shadow:
    0 12px 30px rgba(11,31,58,.20),
    0 0 15px rgba(21,94,239,.22),
    0 0 35px rgba(21,94,239,.10);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

/* LED FRAME */

.m3-tool::before{
  content:"";

  position:absolute;
  inset:0;

  padding:2px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #155EEF,
      #5D9BFF,
      #155EEF,
      #0B1F3A,
      #155EEF
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  opacity:.95;

  filter:
    drop-shadow(0 0 5px rgba(21,94,239,.8))
    drop-shadow(0 0 15px rgba(21,94,239,.45))
    drop-shadow(0 0 30px rgba(21,94,239,.20));

  pointer-events:none;
}

/* INTERNAL LIGHT */

.m3-tool::after{
  content:"";

  position:absolute;

  width:300px;
  height:300px;

  top:-170px;
  left:-130px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(21,94,239,.30),
      rgba(21,94,239,.10) 35%,
      transparent 70%
    );

  filter:blur(30px);

  opacity:.7;

  pointer-events:none;

  z-index:-1;
}

/* HOVER */

.m3-tool:hover{
  transform:translateY(-8px) scale(1.012);

  border-color:#5D9BFF !important;

  box-shadow:
    0 20px 45px rgba(11,31,58,.30),
    0 0 20px rgba(21,94,239,.45),
    0 0 45px rgba(21,94,239,.30),
    0 0 80px rgba(21,94,239,.14);
}

.m3-tool:hover::before{
  filter:
    drop-shadow(0 0 7px rgba(21,94,239,1))
    drop-shadow(0 0 20px rgba(21,94,239,.7))
    drop-shadow(0 0 40px rgba(21,94,239,.4));
}

/* NUMBER */

.m3-tool .tool-number{
  background:rgba(21,94,239,.14) !important;

  border:1px solid rgba(93,155,255,.40);

  color:#8DB7FF;

  box-shadow:
    0 0 15px rgba(21,94,239,.12);
}

/* ARROW */

.m3-tool .tool-arrow{
  color:#72A6FF;

  text-shadow:
    0 0 10px rgba(21,94,239,.55);
}

/* ICON */

.m3-tool .tool-icon{
  background:
    linear-gradient(
      145deg,
      #173C72,
      #0F2A50
    ) !important;

  border:1px solid rgba(93,155,255,.45);

  color:#70A5FF;

  box-shadow:
    0 8px 20px rgba(0,0,0,.22),
    0 0 15px rgba(21,94,239,.25),
    inset 0 0 15px rgba(21,94,239,.08);
}

.m3-tool:hover .tool-icon{
  background:
    linear-gradient(
      145deg,
      #1C4C8D,
      #123663
    ) !important;

  color:#9BC1FF;

  box-shadow:
    0 10px 25px rgba(0,0,0,.25),
    0 0 20px rgba(21,94,239,.45),
    0 0 35px rgba(21,94,239,.18);
}

/* TITLE */

.m3-tool .tool-content h3{
  color:#FFFFFF !important;

  text-shadow:
    0 1px 8px rgba(0,0,0,.20);
}

.m3-tool .tool-content h3 span{
  color:#72A6FF !important;

  text-shadow:
    0 0 12px rgba(21,94,239,.35);
}

/* DESCRIPTION */

.m3-tool .tool-content p{
  color:#B8C7DD !important;
}

/* FOOTER */

.m3-tool .tool-footer{
  border-top:1px solid rgba(255,255,255,.09);
}

.m3-tool .tool-footer span:first-child{
  color:#32D583 !important;
}

.m3-tool .tool-footer span:last-child{
  color:#72A6FF !important;

  text-shadow:
    0 0 10px rgba(21,94,239,.45);
}

/* MOBILE */

@media(max-width:768px){

  .m3-tool{
    border-radius:16px;
  }

  .m3-tool:hover{
    transform:translateY(-5px);
  }

}


/* =========================================================
   M3DLI — PREMIUM DARK ENVIRONMENT
   ========================================================= */

/* الصفحة الرئيسية */

body{
  background:
    radial-gradient(
      900px 600px at 50% -10%,
      rgba(21,94,239,.22),
      transparent 65%
    ),
    radial-gradient(
      700px 500px at 0% 35%,
      rgba(21,94,239,.10),
      transparent 70%
    ),
    radial-gradient(
      700px 500px at 100% 65%,
      rgba(21,94,239,.09),
      transparent 70%
    ),
    #050B16 !important;

  color:#FFFFFF;
}

/* شبكة تقنية خفيفة */

body::after{
  content:"";

  position:fixed;
  inset:0;

  pointer-events:none;
  z-index:0;

  background-image:
    linear-gradient(
      rgba(75,137,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(75,137,255,.035) 1px,
      transparent 1px
    );

  background-size:60px 60px;

  mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      transparent 75%
    );
}

/* كل المحتوى فوق الخلفية */

.site-header,
main,
.site-footer{
  position:relative;
  z-index:1;
}

/* ---------- HEADER ---------- */

.site-header{
  background:rgba(5,11,22,.78) !important;

  border-bottom:
    1px solid rgba(93,155,255,.16);

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

  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

.nav-links a{
  color:#94A8C4;
}

.nav-links a:hover,
.nav-links a.active{
  color:#FFFFFF;

  background:rgba(21,94,239,.12);

  box-shadow:
    0 0 15px rgba(21,94,239,.10);
}

.brand-text strong{
  color:#FFFFFF !important;
}

/* ---------- HERO ---------- */

.hero{
  background:
    radial-gradient(
      600px 300px at 50% 0%,
      rgba(21,94,239,.18),
      transparent 70%
    ),
    transparent !important;
}

.hero::before{
  opacity:.5;

  background-image:
    linear-gradient(
      rgba(75,137,255,.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(75,137,255,.04) 1px,
      transparent 1px
    );
}

.hero-line{
  color:#FFFFFF !important;

  text-shadow:
    0 2px 20px rgba(0,0,0,.25);
}

.hero-gradient{
  color:#69A0FF !important;

  text-shadow:
    0 0 20px rgba(21,94,239,.35),
    0 0 45px rgba(21,94,239,.15);
}

.hero-description{
  color:#9DAFC8 !important;
}

.hero-badge{
  background:rgba(21,94,239,.10);

  border:
    1px solid rgba(93,155,255,.28);

  color:#8DB7FF;

  box-shadow:
    0 0 20px rgba(21,94,239,.08);
}

/* ---------- TRUST ---------- */

.trust-item strong{
  color:#FFFFFF !important;
}

.trust-item small{
  color:#8194AE !important;
}

.trust-divider{
  background:rgba(255,255,255,.10);
}

/* ---------- SECTIONS ---------- */

.tools-section,
.features-section,
.final-section{
  background:transparent !important;
}

.section-heading h2{
  color:#FFFFFF !important;
}

.section-heading p{
  color:#8FA1BA !important;
}

.section-kicker{
  color:#5F98FF !important;

  text-shadow:
    0 0 15px rgba(21,94,239,.30);
}

/* ---------- SEARCH ---------- */

.m3-search{
  background:rgba(13,27,48,.78) !important;

  border:
    1px solid rgba(93,155,255,.18);

  box-shadow:
    0 10px 30px rgba(0,0,0,.18),
    inset 0 0 25px rgba(21,94,239,.025);
}

.m3-search input{
  color:#FFFFFF !important;
}

.m3-search input::placeholder{
  color:#71849F;
}

/* ---------- LEVEL BOX ---------- */

.features-box{
  background:
    linear-gradient(
      145deg,
      rgba(13,29,51,.94),
      rgba(7,18,34,.96)
    ) !important;

  border:
    1px solid rgba(93,155,255,.18);

  box-shadow:
    0 18px 50px rgba(0,0,0,.22),
    0 0 35px rgba(21,94,239,.05);
}

.features-title h2{
  color:#FFFFFF !important;
}

.level-heading{
  color:#FFFFFF !important;
}

.levels-grid a{
  background:
    rgba(255,255,255,.035) !important;

  color:#DCE8FA !important;

  border:
    1px solid rgba(93,155,255,.16);

  box-shadow:
    0 5px 18px rgba(0,0,0,.15);
}

.levels-grid a:hover{
  color:#FFFFFF !important;

  background:
    rgba(21,94,239,.12) !important;

  border-color:
    rgba(93,155,255,.55);

  box-shadow:
    0 10px 28px rgba(0,0,0,.25),
    0 0 25px rgba(21,94,239,.20);
}

/* ---------- FINAL ---------- */

.final-card{
  background:
    linear-gradient(
      145deg,
      rgba(13,29,51,.96),
      rgba(7,18,34,.96)
    ) !important;

  border:
    1px solid rgba(93,155,255,.18);

  box-shadow:
    0 18px 50px rgba(0,0,0,.25),
    0 0 35px rgba(21,94,239,.06);
}

.final-content h2{
  color:#FFFFFF !important;
}

.final-content p{
  color:#8FA1BA !important;
}

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

.site-footer{
  background:#030811 !important;

  border-top:
    1px solid rgba(93,155,255,.12);
}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

  body{
    background:
      radial-gradient(
        500px 400px at 50% -5%,
        rgba(21,94,239,.18),
        transparent 70%
      ),
      #050B16 !important;
  }

}


/* =========================================================
   M3DLI — FULL GRID + MEDIUM DARK CARDS
   ========================================================= */

/* ---------- FULL SITE BACKGROUND ---------- */

body{
  background:
    radial-gradient(
      900px 550px at 50% -5%,
      rgba(21,94,239,.20),
      transparent 68%
    ),
    radial-gradient(
      700px 500px at 0% 45%,
      rgba(21,94,239,.08),
      transparent 72%
    ),
    radial-gradient(
      700px 500px at 100% 65%,
      rgba(21,94,239,.07),
      transparent 72%
    ),
    #07111F !important;

  background-attachment:fixed !important;
}

/* الشبكة تغطي الشاشة كاملة */

body::after{
  content:"";

  position:fixed;
  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;

  z-index:0;

  background-image:
    linear-gradient(
      rgba(93,155,255,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(93,155,255,.055) 1px,
      transparent 1px
    );

  background-size:60px 60px;

  opacity:.75;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.95),
      rgba(0,0,0,.75)
    );
}

/* ---------- HERO SAME ENVIRONMENT ---------- */

.hero{
  background:
    radial-gradient(
      650px 350px at 50% 0%,
      rgba(21,94,239,.13),
      transparent 70%
    ) !important;
}

/* ---------- MEDIUM DARK CARDS ---------- */

.m3-tool{
  background:
    radial-gradient(
      400px 250px at 85% 0%,
      rgba(21,94,239,.15),
      transparent 65%
    ),
    linear-gradient(
      145deg,
      #17345A 0%,
      #132D4D 48%,
      #102640 100%
    ) !important;

  border-color:
    rgba(93,155,255,.55) !important;

  box-shadow:
    0 12px 30px rgba(0,0,0,.22),
    0 0 16px rgba(21,94,239,.20),
    0 0 35px rgba(21,94,239,.09);
}

/* البطاقة تصبح أفتح عند المرور */

.m3-tool:hover{
  background:
    radial-gradient(
      420px 280px at 85% 0%,
      rgba(21,94,239,.24),
      transparent 65%
    ),
    linear-gradient(
      145deg,
      #1C3F6B 0%,
      #17365C 48%,
      #132D4D 100%
    ) !important;

  box-shadow:
    0 20px 45px rgba(0,0,0,.28),
    0 0 22px rgba(21,94,239,.40),
    0 0 50px rgba(21,94,239,.20);
}

/* ---------- CARD TEXT ---------- */

.m3-tool .tool-content h3{
  color:#FFFFFF !important;
}

.m3-tool .tool-content p{
  color:#C2D0E3 !important;
}

/* ---------- CARD ICON ---------- */

.m3-tool .tool-icon{
  background:
    linear-gradient(
      145deg,
      #214C7D,
      #173A62
    ) !important;

  border-color:
    rgba(111,165,255,.50);

  box-shadow:
    0 8px 22px rgba(0,0,0,.20),
    0 0 18px rgba(21,94,239,.18);
}

/* ---------- LEVELS ---------- */

.features-box,
.final-card{
  background:
    radial-gradient(
      500px 300px at 50% 0%,
      rgba(21,94,239,.10),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      #142D4C,
      #102640
    ) !important;

  border-color:
    rgba(93,155,255,.25);

  box-shadow:
    0 18px 50px rgba(0,0,0,.24),
    0 0 30px rgba(21,94,239,.06);
}

.levels-grid a{
  background:
    rgba(255,255,255,.055) !important;

  border-color:
    rgba(93,155,255,.20);

  color:#E5EEF9 !important;
}

.levels-grid a:hover{
  background:
    rgba(21,94,239,.16) !important;

  border-color:
    rgba(93,155,255,.60);

  box-shadow:
    0 10px 25px rgba(0,0,0,.22),
    0 0 22px rgba(21,94,239,.20);
}

/* ---------- SEARCH ---------- */

.m3-search{
  background:
    rgba(17,38,65,.88) !important;

  border-color:
    rgba(93,155,255,.25);

  box-shadow:
    0 10px 30px rgba(0,0,0,.18),
    0 0 20px rgba(21,94,239,.04);
}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

  body::after{
    background-size:42px 42px;
    opacity:.65;
  }

  .m3-tool{
    background:
      radial-gradient(
        300px 220px at 85% 0%,
        rgba(21,94,239,.14),
        transparent 65%
      ),
      linear-gradient(
        145deg,
        #17345A,
        #132D4D
      ) !important;
  }

}


/* =========================================================
   M3DLI — PREMIUM FOOTER
   ========================================================= */

.site-footer{
  position:relative;
  overflow:hidden;

  margin-top:70px;

  background:
    radial-gradient(
      650px 280px at 50% 0%,
      rgba(21,94,239,.15),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #0D213A 0%,
      #09192C 55%,
      #06111F 100%
    ) !important;

  border-top:
    1px solid rgba(93,155,255,.25);

  box-shadow:
    0 -15px 45px rgba(0,0,0,.20);
}

/* شبكة داخل الـFooter */

.site-footer::after{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(93,155,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(93,155,255,.035) 1px,
      transparent 1px
    );

  background-size:55px 55px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.9),
      transparent 95%
    );
}

/* توهج علوي */

.site-footer::before{
  content:"";

  position:absolute;

  width:520px;
  height:180px;

  top:-130px;
  left:50%;

  transform:translateX(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      rgba(21,94,239,.32),
      transparent 70%
    );

  filter:blur(35px);

  pointer-events:none;
}

/* المحتوى فوق التأثيرات */

.site-footer .container{
  position:relative;
  z-index:2;
}

/* ---------- MAIN FOOTER ---------- */

.footer-main{
  padding:70px 0 48px;

  display:grid;

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

  gap:70px;

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

/* ---------- BRAND ---------- */

.footer-brand{
  max-width:360px;
}

.footer-brand-link{
  display:inline-flex;
}

.footer-brand .brand-icon{
  background:#155EEF;

  box-shadow:
    0 0 18px rgba(21,94,239,.30),
    0 8px 25px rgba(0,0,0,.25);
}

.footer-brand .brand-text strong{
  color:#FFFFFF !important;
}

.footer-brand .brand-text small{
  color:#70A5FF !important;
}

.footer-brand p{
  margin-top:20px;

  color:#8EA3BE !important;

  font-size:13px;

  line-height:2;

  max-width:320px;
}

/* ---------- COLUMNS ---------- */

.footer-column{
  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:10px;
}

.footer-column h4{
  margin-bottom:12px;

  color:#FFFFFF;

  font-size:14px;

  font-weight:900;

  position:relative;

  padding-bottom:9px;
}

/* خط LED تحت العنوان */

.footer-column h4::after{
  content:"";

  position:absolute;

  right:0;
  bottom:0;

  width:28px;
  height:2px;

  border-radius:5px;

  background:#155EEF;

  box-shadow:
    0 0 8px rgba(21,94,239,.75),
    0 0 16px rgba(21,94,239,.35);
}

.footer-column a{
  color:#8EA3BE !important;

  font-size:12px;

  font-weight:600;

  padding:4px 0;

  transition:
    color .2s ease,
    transform .2s ease,
    text-shadow .2s ease;
}

.footer-column a:hover{
  color:#FFFFFF !important;

  transform:translateX(-4px);

  text-shadow:
    0 0 12px rgba(93,155,255,.55);
}

/* ---------- BOTTOM ---------- */

.footer-bottom{
  min-height:72px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  color:#6F849F;

  font-size:11px;

  font-weight:600;
}

.footer-bottom span:last-child{
  color:#8EA3BE;
}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

  .site-footer{
    margin-top:50px;
  }

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

    gap:38px;

    padding:50px 0 35px;
  }

  .footer-brand{
    max-width:none;
  }

  .footer-column{
    gap:8px;
  }

  .footer-bottom{
    min-height:85px;

    flex-direction:column;

    justify-content:center;

    text-align:center;

    padding:15px 0;
  }

}


/* =========================================================
   M3DLI — HEADER BASMALA
   ========================================================= */

.navbar{
  position:relative;
}

/* البسملة في المساحة الوسطى */

.header-basmala{
  position:absolute;

  left:50%;
  top:50%;

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

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

  pointer-events:none;

  white-space:nowrap;

  color:#DCE8FA;

  font-family:"Cairo",sans-serif;

  font-size:14px;
  font-weight:700;

  letter-spacing:.15px;

  text-shadow:
    0 0 10px rgba(93,155,255,.18),
    0 1px 12px rgba(0,0,0,.35);
}

/* لمعة صغيرة جدًا */

.header-basmala::before,
.header-basmala::after{
  content:"";

  width:24px;
  height:1px;

  margin:0 12px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(93,155,255,.55)
    );

  box-shadow:
    0 0 7px rgba(21,94,239,.30);
}

.header-basmala::after{
  background:
    linear-gradient(
      90deg,
      rgba(93,155,255,.55),
      transparent
    );
}

/* ---------- AMAZIGH HEADER ---------- */

.amazighia-header-control{
  display:flex;

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

  gap:8px;

  min-width:72px;
  height:40px;

  padding:0 10px;

  border-radius:12px;

  background:
    rgba(21,94,239,.07);

  border:
    1px solid rgba(93,155,255,.20);

  box-shadow:
    0 0 15px rgba(21,94,239,.05);

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.amazighia-header-control > span{
  color:#70A5FF;

  font-size:18px;

  line-height:1;

  text-shadow:
    0 0 10px rgba(21,94,239,.35);
}

.amazighia-header-control:hover{
  background:
    rgba(21,94,239,.12);

  border-color:
    rgba(93,155,255,.40);

  box-shadow:
    0 0 18px rgba(21,94,239,.12);
}

/* Switch */

.amazighia-header-control .switch{
  position:relative;

  width:36px;
  height:20px;

  flex-shrink:0;
}

.amazighia-header-control .switch input{
  opacity:0;

  width:0;
  height:0;
}

.amazighia-header-control .switch span{
  position:absolute;

  inset:0;

  cursor:pointer;

  border-radius:999px;

  background:#243B59;

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

  transition:.25s;
}

.amazighia-header-control .switch span::before{
  content:"";

  position:absolute;

  width:14px;
  height:14px;

  left:2px;
  top:2px;

  border-radius:50%;

  background:#98A9BE;

  transition:.25s;

  box-shadow:
    0 2px 5px rgba(0,0,0,.30);
}

.amazighia-header-control .switch input:checked + span{
  background:#155EEF;

  border-color:#5D9BFF;

  box-shadow:
    0 0 12px rgba(21,94,239,.45);
}

.amazighia-header-control .switch input:checked + span::before{
  transform:translateX(16px);

  background:#FFFFFF;

  box-shadow:
    0 0 8px rgba(255,255,255,.65);
}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

  .header-basmala{
    font-size:10px;
  }

  .header-basmala::before,
  .header-basmala::after{
    display:none;
  }

  .amazighia-header-control{
    min-width:58px;

    height:36px;

    padding:0 7px;

    gap:5px;
  }

  .amazighia-header-control > span{
    font-size:15px;
  }

  .amazighia-header-control .switch{
    width:32px;
    height:18px;
  }

  .amazighia-header-control .switch span::before{
    width:12px;
    height:12px;
  }

  .amazighia-header-control .switch input:checked + span::before{
    transform:translateX(14px);
  }

}


/* =========================================================
   M3DLI LOGO — OFFICIAL MARK
   ========================================================= */

.m3dli-logo-brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.m3dli-logo-box{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  overflow:hidden;
  background:#0B1F3A;
  border:1px solid rgba(21,94,239,.55);
  box-shadow:
    0 0 0 1px rgba(21,94,239,.08),
    0 0 18px rgba(21,94,239,.20),
    0 6px 18px rgba(11,31,58,.14);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.m3dli-logo-box img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.m3dli-logo-brand:hover .m3dli-logo-box{
  transform:translateY(-2px);
  border-color:#155EEF;
  box-shadow:
    0 0 0 1px rgba(21,94,239,.12),
    0 0 26px rgba(21,94,239,.34),
    0 8px 22px rgba(11,31,58,.16);
}

@media(max-width:768px){
  .m3dli-logo-box{
    width:46px;
    height:46px;
    border-radius:12px;
  }
}

/* =========================================================
   M3DLI HEADER LOGO
   ========================================================= */

.m3dli-header-logo{
  width:150px;
  height:auto;
  display:block;
  object-fit:contain;
  filter:
    drop-shadow(0 4px 12px rgba(21,94,239,.18));
  transition:
    transform .2s ease,
    filter .2s ease;
}

.m3dli-header-logo:hover{
  transform:translateY(-1px);
  filter:
    drop-shadow(0 6px 18px rgba(21,94,239,.30));
}

@media(max-width:768px){

  .m3dli-header-logo{
    width:125px;
  }

}

/* تحسين ظهور Logo M3dli في Header */
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:12px;
  background:#ffffff;
}

.m3dli-header-logo{
  width:150px;
  height:auto;
  display:block;
  object-fit:contain;
}

@media(max-width:768px){
  .brand{
    padding:5px 8px;
  }

  .m3dli-header-logo{
    width:125px;
  }
}


/* تصغير Logo M3dli */
.m3dli-header-logo{
  width:110px;
}

@media(max-width:768px){
  .m3dli-header-logo{
    width:95px;
  }
}


/* =========================================================
   AMAZIGHIA — COMPACT HEADER
   ========================================================= */

.amazighia-header-control{
  gap:6px;
  padding:4px 7px;
  border-radius:9px;
  box-shadow:none;
}

.amazighia-info{
  gap:5px;
}

.amazighia-symbol{
  width:22px;
  height:22px;
  border-radius:6px;
  font-size:14px;
}

.amazighia-text strong{
  font-size:9px;
}

.amazighia-text small{
  font-size:7px;
  margin-top:1px;
}

.amazighia-header-control .switch{
  transform:scale(.72);
  transform-origin:center;
  margin-left:-3px;
}

@media(max-width:768px){
  .amazighia-header-control{
    gap:4px;
    padding:3px 5px;
    border-radius:8px;
  }

  .amazighia-symbol{
    width:20px;
    height:20px;
    font-size:12px;
  }

  .amazighia-text strong{
    font-size:8px;
  }

  .amazighia-text small{
    font-size:6.5px;
  }

  .amazighia-header-control .switch{
    transform:scale(.62);
    margin-left:-5px;
  }
}


/* =========================================================
   FIX — AMAZIGHIA BOX ALIGNMENT
   ========================================================= */

.amazighia-header-control{
  box-sizing:border-box;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  vertical-align:middle;
  height:34px;
  min-height:34px;
  width:auto;
  max-width:100%;
  overflow:hidden;
  gap:5px;
  padding:3px 6px !important;
}

.amazighia-info{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px;
  height:100%;
  min-width:0;
}

.amazighia-symbol{
  flex:0 0 20px;
  width:20px !important;
  height:20px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1;
}

.amazighia-text{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:right;
  line-height:1.05;
  height:auto;
  margin:0 !important;
}

.amazighia-text strong,
.amazighia-text small{
  margin:0 !important;
  padding:0 !important;
  line-height:1.05;
}

.amazighia-header-control .switch{
  flex:0 0 auto;
  width:auto;
  height:auto;
  margin:0 !important;
  transform:scale(.62);
  transform-origin:center;
}

@media(max-width:768px){

  .amazighia-header-control{
    height:31px;
    min-height:31px;
    padding:2px 5px !important;
    gap:3px;
  }

  .amazighia-symbol{
    flex-basis:18px;
    width:18px !important;
    height:18px !important;
    font-size:11px !important;
  }

  .amazighia-text strong{
    font-size:8px !important;
  }

  .amazighia-text small{
    font-size:6px !important;
  }

  .amazighia-header-control .switch{
    transform:scale(.55);
  }
}


/* =========================================================
   M3DLI — AMAZIGHIA CONTROL IN CALCULATORS
   ========================================================= */

.calculator-amazighia-control{
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 16px;
  padding:9px 11px;
  background:#fff;
  border:1px solid rgba(21,94,239,.12);
  border-radius:12px;
  box-shadow:0 3px 12px rgba(15,23,42,.05);
}

.calculator-amazighia-info{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.calculator-amazighia-symbol{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(21,94,239,.09);
  color:#155eef;
  font-size:15px;
  font-weight:700;
}

.calculator-amazighia-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  text-align:right;
  line-height:1.2;
}

.calculator-amazighia-text strong{
  font-size:11px;
  color:#172033;
}

.calculator-amazighia-text small{
  margin-top:2px;
  font-size:8px;
  color:#7b8494;
  line-height:1.35;
}

.calculator-amazighia-switch{
  flex:0 0 auto;
  margin:0 !important;
}

@media(max-width:768px){
  .calculator-amazighia-control{
    padding:8px 9px;
    margin-bottom:13px;
    border-radius:10px;
  }

  .calculator-amazighia-symbol{
    width:25px;
    height:25px;
    flex-basis:25px;
    font-size:14px;
  }

  .calculator-amazighia-text strong{
    font-size:10px;
  }

  .calculator-amazighia-text small{
    font-size:7px;
  }
}


/* =========================================================
   M3DLI — UNIFIED INTERNAL PAGES
   يحافظ على الحاسبات وPDF والمحتوى
   ========================================================= */

body{
  background:var(--bg);
  color:var(--white);
}

/* ---------- Internal page background ---------- */

main{
  position:relative;
}

.bem-page,
.exams-page,
.page-container,
.content-page,
.lesson-page,
.subject-page{
  color:var(--white);
}

/* ---------- Shared page headings ---------- */

.bem-hero h1,
.exams-header h1,
.page-title,
.content-title{
  color:#fff;
  font-weight:900;
}

.bem-hero p,
.exams-header p,
.page-description{
  color:var(--muted);
}

/* ---------- Badges ---------- */

.badge,
.hero-badge{
  background:rgba(16,201,139,.07);
  border:1px solid rgba(16,201,139,.16);
  color:#9af3d2;
}

/* ---------- Internal cards ---------- */

.bem-nav a,
.year-button,
.subject-card,
.filter-box,
.notice,
.content-card,
.lesson-card,
.subject-card{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  color:#fff;
  transition:.25s ease;
}

.bem-nav a:hover,
.year-button:hover,
.subject-card:hover,
.content-card:hover,
.lesson-card:hover{
  transform:translateY(-3px);
  border-color:rgba(16,201,139,.25);
  box-shadow:0 18px 45px rgba(0,0,0,.16);
}

/* ---------- BEM navigation ---------- */

.bem-nav a{
  border-radius:15px;
  font-weight:800;
}

.bem-nav a:hover{
  background:rgba(16,201,139,.06);
}

/* ---------- Years ---------- */

.year-button{
  border-radius:15px;
  font-weight:800;
}

.year-button:hover{
  color:#9af3d2;
}

/* ---------- Subject cards ---------- */

.subject-card{
  border-radius:18px;
}

/* ---------- Exams ---------- */

.exams-page{
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(16,201,139,.12),
      transparent 42%
    ),
    var(--bg);
}

.exams-header h1 span{
  color:var(--green2);
}

.notice{
  color:#b7cbc3;
}

/* ---------- Inputs / selects ---------- */

input,
select,
textarea{
  font-family:"Cairo",sans-serif;
}

input:not([type="checkbox"]),
select,
textarea{
  background:rgba(255,255,255,.035);
  color:#fff;
  border:1px solid var(--line);
  border-radius:12px;
}

input:not([type="checkbox"]):focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:rgba(16,201,139,.45);
  box-shadow:0 0 0 3px rgba(16,201,139,.07);
}

/* ---------- Links / buttons ---------- */

.bem-page a,
.exams-page a{
  transition:.25s ease;
}

.bem-page button,
.exams-page button{
  font-family:"Cairo",sans-serif;
}

/* ---------- PDF area ---------- */

.pdf-container,
.pdf-viewer,
.pdf-box{
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-radius:20px;
}

/* ---------- Tables ---------- */

table{
  border-color:var(--line);
}

th{
  background:rgba(16,201,139,.07);
  color:#9af3d2;
}

td{
  border-color:var(--line);
}

/* ---------- Footer consistency ---------- */

.site-footer{
  background:#04130e;
}

/* ---------- Mobile ---------- */

@media(max-width:600px){

  .bem-page,
  .exams-page{
    padding-left:12px;
    padding-right:12px;
  }

  .bem-nav{
    grid-template-columns:1fr;
  }

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

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

}


/* =========================================================
   M3DLI HOME — FINAL REPAIR
   إصلاح الصفحة الرئيسية فقط
   لا يمس الحاسبات ولا صفحات PDF
   ========================================================= */

body{
  background:#F4F7FC !important;
  color:#0B1F3A !important;
}

/* HERO */
.hero{
  background:#F4F7FC !important;
  min-height:auto !important;
}

.hero-content{
  position:relative;
  z-index:2;
}

.hero-actions{
  display:flex !important;
}

.hero-button{
  display:inline-flex !important;
}

/* TOOLS SECTION */
.tools-section{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#F4F7FC !important;
  padding:70px 0 !important;
}

.tools-section .container{
  display:block !important;
}

/* عنوان الأدوات */
.section-heading{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

.section-kicker{
  display:inline-block !important;
  color:#155EEF !important;
}

.section-heading h2{
  display:block !important;
  color:#0B1F3A !important;
}

.section-heading h2 span{
  color:#155EEF !important;
}

.section-heading p{
  display:block !important;
  color:#667085 !important;
}

/* SEARCH */
.m3-search{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#fff !important;
}

/* GRID */
.tools-grid.m3-tools-grid,
.m3-tools-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px !important;
  width:100% !important;
  margin-top:35px !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* TOOL CARDS */
a.tool-card.m3-tool,
.m3-tool{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  flex-direction:column !important;
  min-height:245px !important;
  padding:25px !important;
  box-sizing:border-box !important;

  background:#FFFFFF !important;
  color:#0B1F3A !important;

  border:1px solid #E4EAF3 !important;
  border-radius:18px !important;

  text-decoration:none !important;

  box-shadow:0 4px 16px rgba(11,31,58,.045) !important;

  overflow:hidden !important;
  isolation:isolate !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease !important;
}

a.tool-card.m3-tool:hover,
.m3-tool:hover{
  transform:translateY(-5px) !important;
  border-color:#B8CDF6 !important;
  box-shadow:
    0 14px 35px rgba(11,31,58,.08),
    0 0 20px rgba(21,94,239,.06) !important;
}

/* TOP */
.m3-tool .tool-card-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  position:relative !important;
  z-index:3 !important;
}

.m3-tool .tool-number{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:6px 10px !important;

  color:#155EEF !important;
  background:#EFF4FF !important;

  border:1px solid #D6E4FF !important;
  border-radius:9px !important;

  font-size:11px !important;
  font-weight:900 !important;
}

.m3-tool .tool-arrow{
  display:grid !important;
  place-items:center !important;

  width:38px !important;
  height:38px !important;

  color:#155EEF !important;
  background:#F7F9FC !important;

  border:1px solid #E4EAF3 !important;
  border-radius:12px !important;

  font-size:17px !important;
}

/* ICON */
.m3-tool .tool-icon{
  display:grid !important;
  place-items:center !important;

  width:64px !important;
  height:64px !important;

  margin-top:25px !important;

  color:#155EEF !important;
  background:#EFF4FF !important;

  border:1px solid #D6E4FF !important;
  border-radius:16px !important;

  font-size:30px !important;

  position:relative !important;
  z-index:2 !important;
}

/* CONTENT */
.m3-tool .tool-content{
  display:block !important;
  position:relative !important;
  z-index:2 !important;
  margin-top:18px !important;
}

.m3-tool .tool-content h3{
  display:block !important;

  margin:0 !important;

  color:#0B1F3A !important;
  font-size:22px !important;
  font-weight:900 !important;
  line-height:1.5 !important;
}

.m3-tool .tool-content h3 span{
  color:#155EEF !important;
}

.m3-tool .tool-content p{
  display:block !important;

  margin:8px 0 0 !important;

  color:#667085 !important;
  font-size:13px !important;
  line-height:1.9 !important;
}

/* FOOTER INSIDE CARD */
.m3-tool .tool-footer{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  width:100% !important;

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

  color:#667085 !important;
  font-size:11px !important;
  font-weight:800 !important;

  border-top:1px solid #EEF1F6 !important;
}

.m3-tool .tool-footer span{
  display:inline-block !important;
}

.m3-tool .tool-footer span:first-child{
  color:#12B76A !important;
}

.m3-tool .tool-footer span:last-child{
  color:#155EEF !important;
}

/* LEVELS */
.features-section{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#F4F7FC !important;
}

.features-box{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#FFFFFF !important;
}

/* LEVEL LINKS */
.levels-grid{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
}

.levels-grid a{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;

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

  min-height:48px !important;

  background:#FFFFFF !important;
  color:#0B1F3A !important;

  text-decoration:none !important;
}

/* FINAL SECTION */
.final-section{
  display:block !important;
  background:#F4F7FC !important;
}

.final-card{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#FFFFFF !important;
}

/* MOBILE */
@media(max-width:768px){

  .tools-section{
    padding:55px 0 !important;
  }

  .tools-grid.m3-tools-grid,
  .m3-tools-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin-top:28px !important;
  }

  a.tool-card.m3-tool,
  .m3-tool{
    min-height:255px !important;
    padding:21px !important;
  }

  .m3-tool .tool-content h3{
    font-size:20px !important;
  }

  .m3-tool .tool-content p{
    font-size:12px !important;
  }

  .levels-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

}

@media(max-width:430px){

  .m3-tool .tool-icon{
    width:58px !important;
    height:58px !important;
    font-size:27px !important;
  }

  .m3-tool .tool-content h3{
    font-size:19px !important;
  }

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

}


/* =========================================================
   M3DLI HOME — BACKGROUND RESTORE
   ========================================================= */

html,
body{
  background:#F7F9FC !important;
}

/* الخلفية الناعمة الأصلية */
body{
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(21,94,239,.075),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 28%,
      rgba(21,94,239,.055),
      transparent 25%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(0,98,51,.035),
      transparent 30%
    );
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.42;

  background-image:
    linear-gradient(
      rgba(21,94,239,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(21,94,239,.025) 1px,
      transparent 1px
    );

  background-size:42px 42px;
}

/* نخلي أقسام الصفحة الرئيسية شفافة باش الخلفية تبان */
.hero,
.tools-section,
.features-section,
.final-section{
  background:transparent !important;
}

/* البطاقات تبقى بيضاء */
.m3-tool,
.features-box,
.final-card{
  background:#FFFFFF !important;
}


/* =========================================================
   M3DLI HOME — REAL BACKGROUND FIX
   ========================================================= */

html{
  background:#F4F7FC !important;
}

body{
  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(21,94,239,.10),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 25%,
      rgba(21,94,239,.075),
      transparent 26%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(0,98,51,.045),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #F8FAFD 0%,
      #F4F7FC 48%,
      #F7F9FC 100%
    ) !important;

  background-attachment:fixed !important;
  color:#0B1F3A !important;
}

/* شبكة خفيفة فوق الخلفية */
body::after{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:.35 !important;

  background-image:
    linear-gradient(
      rgba(21,94,239,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(21,94,239,.022) 1px,
      transparent 1px
    ) !important;

  background-size:42px 42px !important;
}

/* كل محتوى الموقع فوق الخلفية */
.site-header,
main,
.site-footer{
  position:relative;
  z-index:1;
}

/* أقسام الصفحة الرئيسية شفافة */
.hero,
.tools-section,
.features-section,
.final-section{
  background:transparent !important;
}

/* البطاقات تبقى واضحة */
.m3-tool,
.features-box,
.final-card{
  background:#FFFFFF !important;
}


/* =========================================================
   M3DLI HOME — RESTORE ORIGINAL GRID / NETWORK BACKGROUND
   ========================================================= */

/* الخلفية الرئيسية */
html,
body {
  background: #06111f !important;
  color: #eef4ff !important;
}

/* الشبكة + الإضاءة */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(21, 94, 239, .20),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 22%,
      rgba(21, 94, 239, .13),
      transparent 25%
    ),
    radial-gradient(
      circle at 50% 95%,
      rgba(0, 98, 51, .10),
      transparent 32%
    );
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(82, 145, 255, .055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(82, 145, 255, .055) 1px,
      transparent 1px
    );

  background-size: 42px 42px;

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,.95),
    rgba(0,0,0,.55)
  );
}

/* Header */
.site-header {
  background: rgba(6, 17, 31, .82) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header .brand-text strong,
.brand-text strong {
  color: #ffffff !important;
}

.site-header .brand-text small,
.brand-text small {
  color: #6ea8ff !important;
}

.nav-links a {
  color: #aab8cc !important;
}

.nav-links a:hover,
.nav-links a.active {
  color: #ffffff !important;
  background: rgba(79,140,255,.10) !important;
}

/* Hero */
.hero {
  position: relative;
  background: transparent !important;
  min-height: 620px;
  overflow: hidden;
}

.hero::before {
  display: block !important;
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  top: -220px;
  right: -160px;
  border-radius: 50%;
  background: rgba(21,94,239,.12);
  filter: blur(100px);
  pointer-events: none;
}

.hero::after {
  display: block !important;
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  bottom: -220px;
  left: -150px;
  border-radius: 50%;
  background: rgba(21,94,239,.08);
  filter: blur(100px);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-badge {
  background: rgba(79,140,255,.08) !important;
  border: 1px solid rgba(79,140,255,.20) !important;
  color: #78aaff !important;
}

.badge-dot {
  background: #4f8cff !important;
  box-shadow: 0 0 0 5px rgba(79,140,255,.10) !important;
}

.hero-line {
  color: #ffffff !important;
}

.hero-gradient {
  color: #4f8cff !important;
}

.hero-description {
  color: #aab8cc !important;
}

/* الأزرار */
.primary-button {
  background: #155eef !important;
  color: #fff !important;
  box-shadow:
    0 10px 28px rgba(21,94,239,.25) !important;
}

.secondary-button {
  background: rgba(255,255,255,.045) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

/* الثقة */
.hero-trust {
  color: #aab8cc !important;
}

/* Tools */
.tools-section {
  position: relative;
  background: transparent !important;
}

.section-kicker {
  color: #4f8cff !important;
}

.section-heading h2 {
  color: #ffffff !important;
}

.section-heading h2 span {
  color: #4f8cff !important;
}

.section-heading p {
  color: #9eafc5 !important;
}

/* Search */
.m3-search {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,.16) !important;
}

.m3-search input {
  color: #ffffff !important;
}

.m3-search input::placeholder {
  color: #718198 !important;
}

/* Tool cards */
.m3-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 20px !important;
}

.m3-tool,
a.tool-card.m3-tool {
  display: flex !important;
  flex-direction: column !important;
  min-height: 285px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.025)
    ) !important;

  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 20px !important;

  box-shadow:
    0 15px 45px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04) !important;

  color: #ffffff !important;
}

.m3-tool:hover {
  border-color: rgba(79,140,255,.42) !important;
  box-shadow:
    0 20px 55px rgba(0,0,0,.28),
    0 0 30px rgba(79,140,255,.08) !important;
}

.m3-tool .tool-number {
  color: #70a2ff !important;
  background: rgba(79,140,255,.10) !important;
  border: 1px solid rgba(79,140,255,.18) !important;
}

.m3-tool .tool-arrow {
  color: #70a2ff !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}

.m3-tool .tool-icon {
  color: #70a2ff !important;
  background: rgba(79,140,255,.10) !important;
  border: 1px solid rgba(79,140,255,.18) !important;
}

.m3-tool .tool-content h3 {
  color: #ffffff !important;
}

.m3-tool .tool-content p {
  color: #9eafc5 !important;
}

.m3-tool .tool-footer {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: #8190a5 !important;
}

.m3-tool .tool-footer span:last-child {
  color: #70a2ff !important;
}

/* Levels */
.features-section {
  background: transparent !important;
}

.features-box {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    ) !important;

  border: 1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 15px 45px rgba(0,0,0,.18) !important;
}

.features-title small {
  color: #4f8cff !important;
}

.features-title h2 {
  color: #ffffff !important;
}

.features-title h2 span {
  color: #4f8cff !important;
}

.level-heading {
  color: #ffffff !important;
}

.levels-grid a {
  background: rgba(255,255,255,.035) !important;
  color: #dbe7f7 !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}

.levels-grid a:hover {
  background: rgba(79,140,255,.08) !important;
  color: #ffffff !important;
  border-color: rgba(79,140,255,.30) !important;
}

/* Final */
.final-section {
  background: transparent !important;
}

.final-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    ) !important;

  border: 1px solid rgba(255,255,255,.10) !important;
}

.final-content h2 {
  color: #ffffff !important;
}

.final-content p {
  color: #9eafc5 !important;
}

/* Footer */
.site-footer {
  background: #030a13 !important;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Mobile */
@media(max-width:768px) {
  .m3-tools-grid,
  .tools-grid.m3-tools-grid {
    grid-template-columns: 1fr !important;
  }

  .hero {
    min-height: auto !important;
  }

  .hero-content {
    padding: 55px 0 65px !important;
  }
}

/* =========================================================
   M3DLI HOME — GRID + GLOW + PREMIUM DARK BACKGROUND
   ========================================================= */

html,
body {
  background: #06111f !important;
  color: #eef4ff !important;
}

/* الشبكة الرئيسية */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(21, 94, 239, .22) 0,
      rgba(21, 94, 239, .10) 18%,
      transparent 38%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(79, 140, 255, .16) 0,
      rgba(79, 140, 255, .06) 20%,
      transparent 38%
    ),
    radial-gradient(
      circle at 50% 85%,
      rgba(21, 94, 239, .10),
      transparent 42%
    ),
    #06111f !important;
}

/* Grid */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(79, 140, 255, .065) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 140, 255, .065) 1px,
      transparent 1px
    );

  background-size: 42px 42px;

  mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      rgba(0,0,0,.85) 45%,
      transparent 100%
    );

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      rgba(0,0,0,.85) 45%,
      transparent 100%
    );
}

/* توهج إضافي للصفحة */
main {
  position: relative;
}

main::before {
  content: "";
  position: absolute;
  top: 80px;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(21, 94, 239, .055);
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
}

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

.hero {
  position: relative !important;
  background: transparent !important;
  overflow: hidden !important;
}

.hero::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  width: 520px !important;
  height: 520px !important;
  top: -240px !important;
  right: -160px !important;
  border-radius: 50% !important;
  background: rgba(21, 94, 239, .20) !important;
  filter: blur(105px) !important;
  pointer-events: none !important;
}

.hero::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  width: 430px !important;
  height: 430px !important;
  bottom: -230px !important;
  left: -150px !important;
  border-radius: 50% !important;
  background: rgba(79, 140, 255, .12) !important;
  filter: blur(100px) !important;
  pointer-events: none !important;
}

.hero-content {
  position: relative !important;
  z-index: 2 !important;
}

.hero-line {
  color: #ffffff !important;
  text-shadow: 0 0 35px rgba(255,255,255,.06);
}

.hero-gradient {
  color: #4f8cff !important;
  text-shadow:
    0 0 18px rgba(79,140,255,.35),
    0 0 45px rgba(79,140,255,.15);
}

/* =========================================================
   SECTION GLOW
   ========================================================= */

.tools-section,
.features-section,
.final-section {
  background: transparent !important;
  position: relative;
}

/* =========================================================
   TOOL CARDS
   ========================================================= */

.m3-tools-grid {
  position: relative;
  z-index: 2;
}

.m3-tool,
a.tool-card.m3-tool {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025) 55%,
      rgba(21,94,239,.025)
    ) !important;

  border: 1px solid rgba(255,255,255,.105) !important;

  box-shadow:
    0 18px 50px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.055) !important;

  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease !important;
}

/* خط مضيء أعلى كل بطاقة */
.m3-tool::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 12% !important;
  right: 12% !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #4f8cff !important;
  opacity: .30 !important;
  box-shadow:
    0 0 10px rgba(79,140,255,.35),
    0 0 25px rgba(79,140,255,.15) !important;
}

/* التوهج الداخلي */
.m3-tool::after {
  content: "" !important;
  position: absolute !important;
  width: 230px !important;
  height: 230px !important;
  top: -140px !important;
  left: -100px !important;
  border-radius: 50% !important;
  background: rgba(79,140,255,.085) !important;
  filter: blur(45px) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  opacity: 1 !important;
}

.m3-tool:hover {
  transform: translateY(-8px) !important;

  border-color: rgba(79,140,255,.42) !important;

  box-shadow:
    0 25px 65px rgba(0,0,0,.34),
    0 0 35px rgba(79,140,255,.11),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.m3-tool:hover::before {
  opacity: 1 !important;
  box-shadow:
    0 0 10px rgba(79,140,255,.55),
    0 0 30px rgba(79,140,255,.28) !important;
}

.m3-tool .tool-number {
  color: #72a5ff !important;
  background: rgba(79,140,255,.11) !important;
  border: 1px solid rgba(79,140,255,.20) !important;
}

.m3-tool .tool-arrow {
  color: #72a5ff !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.m3-tool .tool-icon {
  color: #72a5ff !important;
  background: rgba(79,140,255,.11) !important;
  border: 1px solid rgba(79,140,255,.20) !important;

  box-shadow:
    0 8px 25px rgba(79,140,255,.09),
    0 0 20px rgba(79,140,255,.05) !important;
}

.m3-tool:hover .tool-icon {
  box-shadow:
    0 10px 28px rgba(79,140,255,.16),
    0 0 25px rgba(79,140,255,.10) !important;
}

.m3-tool .tool-content h3 {
  color: #ffffff !important;
}

.m3-tool .tool-content p {
  color: #9eafc5 !important;
}

.m3-tool .tool-footer {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: #8190a5 !important;
}

.m3-tool .tool-footer span:last-child {
  color: #72a5ff !important;
}

/* =========================================================
   LEVELS / FINAL CARDS
   ========================================================= */

.features-box,
.final-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.025)
    ) !important;

  border: 1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 20px 55px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04) !important;

  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.features-title h2,
.final-content h2,
.level-heading {
  color: #ffffff !important;
}

.features-title small {
  color: #4f8cff !important;
}

.features-title h2 span {
  color: #4f8cff !important;
}

.levels-grid a {
  background: rgba(255,255,255,.035) !important;
  color: #dbe7f7 !important;
  border: 1px solid rgba(255,255,255,.09) !important;

  box-shadow:
    0 5px 18px rgba(0,0,0,.10) !important;
}

.levels-grid a:hover {
  background: rgba(79,140,255,.08) !important;
  color: #ffffff !important;
  border-color: rgba(79,140,255,.34) !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    0 0 18px rgba(79,140,255,.08) !important;
}

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

.site-header {
  background: rgba(6,17,31,.78) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  box-shadow:
    0 8px 35px rgba(0,0,0,.22) !important;
}

.site-header .nav-links a {
  color: #aab8cc !important;
}

.site-header .nav-links a:hover,
.site-header .nav-links a.active {
  color: #ffffff !important;
  background: rgba(79,140,255,.10) !important;
}

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

@media(max-width:768px) {

  body::after {
    background-size: 34px 34px;
  }

  main::before {
    width: 500px;
    height: 500px;
  }

  .m3-tools-grid,
  .tools-grid.m3-tools-grid {
    grid-template-columns: 1fr !important;
  }

  .m3-tool,
  a.tool-card.m3-tool {
    min-height: 255px !important;
  }
}


/* =========================================================
   FINAL BACKGROUND FIX — VISIBLE GRID + GLOW
   ========================================================= */

html {
  background: #06111f !important;
}

body {
  position: relative !important;
  background: #06111f !important;
  color: #eef4ff !important;
  isolation: isolate !important;
}

/* طبقة الشبكة */
body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;

  z-index: -1 !important;
  pointer-events: none !important;

  opacity: 1 !important;

  background-image:
    linear-gradient(
      rgba(79,140,255,.085) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.085) 1px,
      transparent 1px
    ) !important;

  background-size: 42px 42px !important;

  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* طبقة الإضاءة */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;

  z-index: -2 !important;
  pointer-events: none !important;

  opacity: 1 !important;

  background:
    radial-gradient(
      circle at 10% 5%,
      rgba(21,94,239,.28),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 18%,
      rgba(79,140,255,.20),
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 75%,
      rgba(21,94,239,.13),
      transparent 38%
    ),
    #06111f !important;
}

/* كل أقسام الصفحة الرئيسية شفافة حتى تبان الشبكة */
main,
.hero,
.tools-section,
.features-section,
.final-section {
  background: transparent !important;
}

/* توهج إضافي خلف الـ Hero */
.hero {
  position: relative !important;
  overflow: hidden !important;
}

.hero::before {
  display: block !important;
  content: "" !important;

  position: absolute !important;
  width: 600px !important;
  height: 600px !important;

  top: -300px !important;
  right: -180px !important;

  border-radius: 50% !important;

  background: rgba(21,94,239,.20) !important;
  filter: blur(110px) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

.hero::after {
  display: block !important;
  content: "" !important;

  position: absolute !important;
  width: 500px !important;
  height: 500px !important;

  bottom: -300px !important;
  left: -180px !important;

  border-radius: 50% !important;

  background: rgba(79,140,255,.14) !important;
  filter: blur(110px) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

.hero-content {
  position: relative !important;
  z-index: 2 !important;
}

/* توهج خلف الأدوات */
.tools-section::before {
  content: "" !important;
  position: absolute !important;

  width: 650px !important;
  height: 350px !important;

  top: 120px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  border-radius: 50% !important;

  background: rgba(21,94,239,.07) !important;
  filter: blur(90px) !important;

  pointer-events: none !important;
}

/* البطاقات فوق الخلفية */
.m3-tools-grid,
.m3-tool,
.features-box,
.final-card {
  position: relative !important;
  z-index: 2 !important;
}

/* لمعان البطاقة */
.m3-tool::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(79,140,255,.75),
    transparent
  ) !important;

  opacity: .45 !important;

  box-shadow:
    0 0 12px rgba(79,140,255,.35),
    0 0 28px rgba(79,140,255,.15) !important;
}

.m3-tool:hover::before {
  opacity: 1 !important;
}

/* توهج الأيقونات */
.m3-tool .tool-icon {
  box-shadow:
    0 0 18px rgba(79,140,255,.08),
    0 8px 25px rgba(0,0,0,.20) !important;
}

.m3-tool:hover .tool-icon {
  box-shadow:
    0 0 28px rgba(79,140,255,.18),
    0 10px 30px rgba(0,0,0,.25) !important;
}

/* العناوين فوق كل شيء */
.section-heading,
.features-title,
.final-content {
  position: relative;
  z-index: 3;
}

@media(max-width:768px) {
  body::after {
    background-size: 34px 34px !important;
    background-image:
      linear-gradient(
        rgba(79,140,255,.075) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(79,140,255,.075) 1px,
        transparent 1px
      ) !important;
  }
}


/* =========================================================
   M3DLI HOME — FINAL GRID + GLOW + CARD CONTENT FIX
   لا يحذف ولا يغير أي أداة أو حاسبة
   ========================================================= */

/* ---------- BACKGROUND ---------- */

html{
  min-height:100%;
  background:#06111f !important;
}

body{
  position:relative !important;
  min-height:100vh;
  background:#06111f !important;
  color:#f5f9ff;
  isolation:isolate;
}

/* الإضاءة الخلفية */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(21,94,239,.22) 0,
      rgba(21,94,239,.09) 20%,
      transparent 42%
    ),
    radial-gradient(
      circle at 88% 15%,
      rgba(79,140,255,.16) 0,
      rgba(79,140,255,.07) 20%,
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 85%,
      rgba(21,94,239,.10),
      transparent 44%
    ),
    #06111f !important;
}

/* الشبكة */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(79,140,255,.075) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.075) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  /* الشبكة أقوى في الوسط وتختفي تدريجيا نحو الأطراف */
  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      rgba(0,0,0,.92) 45%,
      rgba(0,0,0,.35) 75%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      rgba(0,0,0,.92) 45%,
      rgba(0,0,0,.35) 75%,
      transparent 100%
    );
}

/* ---------- SECTIONS ---------- */

.hero,
.tools-section,
.features-section,
.final-section{
  position:relative;
  background:transparent !important;
}

/* نخلي المحتوى فوق الشبكة */
.hero > *,
.tools-section > *,
.features-section > *,
.final-section > *{
  position:relative;
  z-index:2;
}

/* ---------- HERO ---------- */

.hero{
  min-height:620px;
}

.hero::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  top:-180px;
  right:-160px;
  border-radius:50%;
  background:rgba(21,94,239,.12);
  filter:blur(100px);
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  bottom:-220px;
  left:-130px;
  border-radius:50%;
  background:rgba(79,140,255,.08);
  filter:blur(90px);
  pointer-events:none;
}

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

.tools-section{
  padding-top:80px !important;
  padding-bottom:80px !important;
}

.section-kicker{
  color:#4f8cff !important;
}

.section-heading h2{
  color:#ffffff !important;
}

.section-heading h2 span{
  color:#4f8cff !important;
}

.section-heading p{
  color:#9fb0c7 !important;
}

/* ---------- SEARCH ---------- */

.m3-search{
  background:rgba(9,24,43,.78) !important;
  border:1px solid rgba(79,140,255,.20) !important;
  box-shadow:
    0 8px 30px rgba(0,0,0,.18),
    0 0 25px rgba(21,94,239,.04) !important;
  backdrop-filter:blur(12px);
}

/* ---------- FOUR TOOL CARDS ---------- */

.tools-grid.m3-tools-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:22px !important;
  align-items:stretch !important;
  margin-top:35px !important;
}

.m3-tool{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;

  /* مهم: المحتوى كامل داخل البطاقة */
  min-height:0 !important;
  height:auto !important;
  box-sizing:border-box !important;

  padding:25px !important;

  overflow:hidden !important;
  isolation:isolate !important;

  background:
    linear-gradient(
      145deg,
      rgba(13,31,54,.94),
      rgba(7,19,34,.96)
    ) !important;

  border:1px solid rgba(79,140,255,.18) !important;
  border-radius:22px !important;

  box-shadow:
    0 12px 35px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035) !important;

  color:#fff !important;

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease !important;
}

/* خط مضيء أعلى البطاقة */
.m3-tool::before{
  content:"";
  position:absolute;
  top:0;
  left:28px;
  right:28px;
  height:2px;
  border-radius:99px;

  background:linear-gradient(
    90deg,
    transparent,
    #4f8cff,
    #8bb5ff,
    #4f8cff,
    transparent
  );

  opacity:.55;

  box-shadow:
    0 0 10px rgba(79,140,255,.35),
    0 0 25px rgba(79,140,255,.12);

  z-index:1;
}

/* توهج داخل البطاقة */
.m3-tool::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  top:-120px;
  left:-90px;
  border-radius:50%;

  background:rgba(21,94,239,.12);
  filter:blur(45px);

  pointer-events:none;
  z-index:0;
}

.m3-tool:hover{
  transform:translateY(-7px) !important;

  border-color:rgba(79,140,255,.48) !important;

  box-shadow:
    0 20px 50px rgba(0,0,0,.34),
    0 0 30px rgba(21,94,239,.12) !important;
}

/* ---------- CARD TOP ---------- */

.m3-tool .tool-card-top{
  position:relative !important;
  z-index:3 !important;

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

  width:100% !important;
  flex:0 0 auto !important;
}

.m3-tool .tool-number{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:6px 10px !important;

  color:#75a7ff !important;
  background:rgba(79,140,255,.09) !important;
  border:1px solid rgba(79,140,255,.22) !important;

  border-radius:9px !important;

  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:1px;
}

/* ---------- ARROW ---------- */

.m3-tool .tool-arrow{
  position:relative !important;
  z-index:3 !important;

  width:38px !important;
  height:38px !important;

  display:grid !important;
  place-items:center !important;

  color:#75a7ff !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(79,140,255,.18) !important;

  border-radius:12px !important;

  font-size:17px !important;

  transition:.25s ease !important;
}

.m3-tool:hover .tool-arrow{
  transform:translateX(-4px);
  background:rgba(79,140,255,.10) !important;
  border-color:rgba(79,140,255,.35) !important;
}

/* ---------- ICON ---------- */

.m3-tool .tool-icon{
  position:relative !important;
  z-index:3 !important;

  width:64px !important;
  height:64px !important;

  display:grid !important;
  place-items:center !important;

  margin-top:25px !important;
  flex:0 0 auto !important;

  background:rgba(79,140,255,.085) !important;
  border:1px solid rgba(79,140,255,.20) !important;
  border-radius:17px !important;

  font-size:30px !important;

  box-shadow:
    0 8px 22px rgba(21,94,239,.08) !important;

  transition:.25s ease !important;
}

.m3-tool:hover .tool-icon{
  transform:translateY(-3px) scale(1.04);
  box-shadow:
    0 10px 28px rgba(21,94,239,.16),
    0 0 22px rgba(79,140,255,.08) !important;
}

/* ---------- CONTENT FIX ---------- */

/*
   هذا هو الإصلاح الأساسي:
   لا نستعمل margin-top:auto في المحتوى.
   النص يبقى مباشرة تحت الأيقونة.
*/

.m3-tool .tool-content{
  position:relative !important;
  z-index:3 !important;

  display:block !important;

  margin-top:18px !important;

  flex:0 0 auto !important;
}

.m3-tool .tool-content h3{
  display:block !important;

  margin:0 !important;

  color:#ffffff !important;

  font-size:22px !important;
  font-weight:900 !important;
  line-height:1.5 !important;
}

.m3-tool .tool-content h3 span{
  color:#4f8cff !important;
}

.m3-tool .tool-content p{
  display:block !important;

  margin:8px 0 0 !important;

  color:#9fb0c7 !important;

  font-size:13px !important;
  line-height:1.9 !important;

  max-width:100% !important;
}

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

.m3-tool .tool-footer{
  position:relative !important;
  z-index:3 !important;

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

  width:100% !important;

  /*
    ما نخليش footer يدفع المحتوى.
    فقط مسافة عادية بعد النص.
  */
  margin-top:20px !important;
  padding-top:16px !important;

  flex:0 0 auto !important;

  border-top:1px solid rgba(255,255,255,.07) !important;

  color:#8295ae !important;

  font-size:11px !important;
  font-weight:800 !important;
}

.m3-tool .tool-footer span:first-child{
  color:#36d399 !important;
}

.m3-tool .tool-footer span:last-child{
  color:#75a7ff !important;
}

/* ---------- LEVELS ---------- */

.features-section{
  padding-top:30px !important;
  padding-bottom:80px !important;
}

.features-box{
  background:rgba(8,23,41,.82) !important;
  border:1px solid rgba(79,140,255,.16) !important;
  box-shadow:
    0 15px 45px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter:blur(12px);
}

.features-title h2{
  color:#fff !important;
}

.features-title h2 span{
  color:#4f8cff !important;
}

.features-title small{
  color:#4f8cff !important;
}

.level-heading{
  color:#e8f0fa !important;
}

.levels-grid a{
  background:rgba(255,255,255,.025) !important;
  color:#dce8f7 !important;
  border-color:rgba(79,140,255,.14) !important;
}

.levels-grid a:hover{
  background:rgba(79,140,255,.08) !important;
  color:#75a7ff !important;
  border-color:rgba(79,140,255,.38) !important;
}

/* ---------- FINAL ---------- */

.final-section{
  padding-top:20px !important;
  padding-bottom:70px !important;
}

.final-card{
  background:rgba(8,23,41,.86) !important;
  border-color:rgba(79,140,255,.16) !important;
  box-shadow:
    0 15px 45px rgba(0,0,0,.22) !important;
}

.final-content h2{
  color:#fff !important;
}

.final-content p{
  color:#9fb0c7 !important;
}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

  .tools-grid.m3-tools-grid,
  .m3-tools-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .m3-tool{
    min-height:0 !important;
    padding:21px !important;
  }

  .m3-tool .tool-content h3{
    font-size:20px !important;
  }

  .m3-tool .tool-content p{
    font-size:12px !important;
  }

  body::after{
    background-size:34px 34px;
  }
}

@media(max-width:430px){

  .m3-tool .tool-icon{
    width:58px !important;
    height:58px !important;
    font-size:27px !important;
  }

  .m3-tool .tool-content h3{
    font-size:19px !important;
  }
}

/* =========================================================
   END FINAL HOME FIX
   ========================================================= */

/* =========================================================
   GRID POSITION — CENTERED & BALANCED
   ========================================================= */

body::after{
  content:"" !important;
  position:fixed !important;

  /* نضمن أنها تغطي الشاشة كاملة ومتمركزة */
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;

  width:100vw !important;
  height:100vh !important;

  z-index:-1 !important;
  pointer-events:none !important;

  background-image:
    linear-gradient(
      to bottom,
      rgba(79,140,255,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      to right,
      rgba(79,140,255,.055) 1px,
      transparent 1px
    ) !important;

  /*
     نفس المسافة أفقيا وعموديا
     ونقطة البداية ثابتة في أعلى يسار الشاشة
  */
  background-size:42px 42px !important;
  background-position:0 0 !important;
  background-repeat:repeat !important;

  /*
     التوهج يكون في الوسط، وليس الشبكة نفسها هي التي تتحرك
  */
  -webkit-mask-image:
    radial-gradient(
      ellipse 80% 75% at 50% 45%,
      #000 0%,
      rgba(0,0,0,.95) 48%,
      rgba(0,0,0,.55) 72%,
      transparent 100%
    ) !important;

  mask-image:
    radial-gradient(
      ellipse 80% 75% at 50% 45%,
      #000 0%,
      rgba(0,0,0,.95) 48%,
      rgba(0,0,0,.55) 72%,
      transparent 100%
    ) !important;
}

/* توهج مركزي مستقل */
body{
  background:#06111f !important;
}

body::before{
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(21,94,239,.075) 0,
      transparent 45%
    ),
    radial-gradient(
      circle at 12% 12%,
      rgba(21,94,239,.16) 0,
      transparent 32%
    ),
    radial-gradient(
      circle at 88% 16%,
      rgba(79,140,255,.12) 0,
      transparent 30%
    ),
    #06111f !important;
}

/* منع أي section من تغطية الشبكة */
.hero,
.tools-section,
.features-section,
.final-section{
  background:transparent !important;
}

/* على الهاتف تبقى الشبكة متوازنة */
@media(max-width:768px){
  body::after{
    background-size:34px 34px !important;
    background-position:0 0 !important;
  }
}


/* =========================================================
   FINAL GRID OVERRIDE
   الشبكة مباشرة على BODY — بدون pseudo-element
   ========================================================= */

html{
  width:100% !important;
  min-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:#06111f !important;
}

body{
  width:100% !important;
  min-width:100% !important;
  margin:0 !important;
  padding:0 !important;

  background-color:#06111f !important;

  /* الشبكة */
  background-image:
    linear-gradient(
      rgba(79,140,255,.065) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.065) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 50% 35%,
      rgba(21,94,239,.12),
      transparent 48%
    ) !important;

  /* الشبكة تبدأ من نفس النقطة */
  background-size:
    42px 42px,
    42px 42px,
    100% 100% !important;

  background-position:
    0 0,
    0 0,
    center center !important;

  background-repeat:
    repeat,
    repeat,
    no-repeat !important;

  background-attachment:
    fixed,
    fixed,
    fixed !important;
}

/* إلغاء الشبكة القديمة نهائياً */
body::after{
  display:none !important;
  content:none !important;
  background:none !important;
  mask-image:none !important;
  -webkit-mask-image:none !important;
}

/* نخلي الإضاءة الجانبية فقط */
body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;

  z-index:-1 !important;
  pointer-events:none !important;

  background:
    radial-gradient(
      circle at 10% 8%,
      rgba(21,94,239,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 12%,
      rgba(79,140,255,.12),
      transparent 28%
    ),
    radial-gradient(
      circle at 50% 90%,
      rgba(21,94,239,.08),
      transparent 35%
    ) !important;

  background-repeat:no-repeat !important;
}

/* جميع أقسام الصفحة شفافة حتى تظهر الشبكة */
.hero,
.tools-section,
.features-section,
.final-section,
main{
  background:transparent !important;
}

/* منع أي عنصر من عمل عرض أكبر من الشاشة */
main,
section,
.site-header,
.site-footer{
  max-width:100% !important;
}

/* الهاتف */
@media(max-width:768px){

  body{
    background-size:
      34px 34px,
      34px 34px,
      100% 100% !important;

    background-position:
      0 0,
      0 0,
      center center !important;
  }
}


/* =========================================================
   M3DLI — FINAL RESPONSIVE FOUNDATION
   الخلفية + الشبكة + منع السحب الجانبي
   ========================================================= */

/* ---------- VIEWPORT ---------- */

html{
  width:100%;
  max-width:100%;
  min-height:100%;
  margin:0;
  padding:0;
  overflow-x:hidden !important;
  background:#06111f !important;
}

body{
  width:100%;
  max-width:100%;
  min-height:100vh;
  margin:0;
  padding:0;
  overflow-x:hidden !important;

  background-color:#06111f !important;

  /* نفس الشبكة في كل الأجهزة */
  background-image:
    linear-gradient(
      rgba(79,140,255,.065) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.065) 1px,
      transparent 1px
    ) !important;

  background-size:42px 42px !important;
  background-position:0 0 !important;
  background-repeat:repeat !important;
  background-attachment:fixed !important;
}

/* نلغي طبقات الشبكة القديمة */
body::after{
  display:none !important;
  content:none !important;
}

body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;

  z-index:-1 !important;
  pointer-events:none !important;

  background:
    radial-gradient(
      circle at 15% 8%,
      rgba(21,94,239,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 12%,
      rgba(79,140,255,.11),
      transparent 28%
    ),
    radial-gradient(
      circle at 50% 85%,
      rgba(21,94,239,.07),
      transparent 35%
    ) !important;

  background-repeat:no-repeat !important;
}

/* ---------- NO HORIZONTAL OVERFLOW ---------- */

*,
*::before,
*::after{
  box-sizing:border-box;
}

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

.container{
  width:min(1180px, calc(100% - 40px)) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ---------- SECTIONS ---------- */

main,
.hero,
.tools-section,
.features-section,
.final-section{
  width:100% !important;
  max-width:100% !important;
  background:transparent !important;
}

/* ---------- HEADER ---------- */

.site-header{
  width:100% !important;
  max-width:100% !important;
}

/* ---------- HERO ---------- */

.hero{
  overflow:hidden !important;
}

.hero-content{
  width:100%;
  max-width:1180px;
}

/* ---------- TOOLS ---------- */

.tools-section{
  overflow:hidden !important;
}

.tools-grid.m3-tools-grid{
  width:100% !important;
  max-width:100% !important;

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

  gap:22px !important;
}

.m3-tool{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  overflow:hidden !important;
}

/* النص ما يخرجش من البطاقة */
.m3-tool .tool-content,
.m3-tool .tool-content p,
.m3-tool .tool-content h3{
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

/* ---------- SEARCH ---------- */

.m3-search{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

.m3-search input{
  min-width:0 !important;
  max-width:100% !important;
}

/* ---------- LEVELS ---------- */

.features-section{
  overflow:hidden !important;
}

.features-box{
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
}

.levels-grid{
  width:100% !important;
  max-width:100% !important;
}

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

.site-footer{
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
}

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

@media (max-width:900px){

  .container{
    width:min(100% - 32px, 760px) !important;
  }

  .tools-grid.m3-tools-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px !important;
  }

}

/* =========================================================
   PHONE
   ========================================================= */

@media (max-width:768px){

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

  body{
    background-size:34px 34px !important;
    background-position:0 0 !important;
    background-attachment:scroll !important;
  }

  .container{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Header */
  .site-header{
    width:100% !important;
    overflow:hidden !important;
  }

  .site-header .navbar{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* Hero */
  .hero{
    width:100% !important;
    min-height:auto !important;
    overflow:hidden !important;
  }

  .hero-content{
    width:100% !important;
    padding-top:55px !important;
    padding-bottom:60px !important;
  }

  .hero h1{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }

  .hero-description{
    max-width:100% !important;
  }

  .hero-actions{
    width:100% !important;
  }

  .hero-button{
    max-width:100% !important;
  }

  /* Tools */
  .tools-section{
    width:100% !important;
    padding-top:55px !important;
    padding-bottom:55px !important;
    overflow:hidden !important;
  }

  .tools-grid.m3-tools-grid,
  .m3-tools-grid{
    grid-template-columns:1fr !important;
    width:100% !important;
    gap:16px !important;
    margin-top:26px !important;
  }

  .m3-tool{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:20px !important;
    border-radius:20px !important;
  }

  .m3-tool .tool-content p{
    font-size:12px !important;
    line-height:1.9 !important;
  }

  /* Levels */
  .features-section{
    width:100% !important;
    padding-top:20px !important;
    padding-bottom:55px !important;
  }

  .features-box{
    width:100% !important;
    padding:20px !important;
  }

  .levels-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  .levels-grid a{
    min-width:0 !important;
    width:100% !important;
    overflow:hidden !important;
    white-space:normal !important;
    text-align:center !important;
  }

  /* Final */
  .final-section{
    width:100% !important;
    padding-bottom:50px !important;
    overflow:hidden !important;
  }

  .final-card{
    width:100% !important;
    min-width:0 !important;
  }
}

/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width:430px){

  .container{
    width:calc(100% - 24px) !important;
  }

  .hero-content{
    padding-top:45px !important;
    padding-bottom:50px !important;
  }

  .m3-tool{
    padding:18px !important;
    border-radius:18px !important;
  }

  .m3-tool .tool-icon{
    width:58px !important;
    height:58px !important;
    font-size:27px !important;
  }

  .m3-tool .tool-content h3{
    font-size:19px !important;
  }

  .m3-tool .tool-footer{
    font-size:10px !important;
    gap:8px !important;
  }

  .features-box{
    padding:16px !important;
  }

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

/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width:360px){

  .container{
    width:calc(100% - 20px) !important;
  }

  .m3-tool{
    padding:16px !important;
  }

  .m3-tool .tool-footer{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .levels-grid{
    gap:7px !important;
  }
}


/* =========================================================
   M3DLI FINAL GLOBAL FIX
   GRID + RESPONSIVE + TOOL CARDS + GLOBAL LOGO
   ========================================================= */

/* ---------- GLOBAL ---------- */

html {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: #06111f !important;
  overflow-x: hidden !important;
}

body {
  width: 100%;
  min-width: 0 !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background: #06111f !important;
  color: #eef5ff !important;
  overflow-x: hidden !important;
  position: relative;
}

/* ---------- PROFESSIONAL FULL-SCREEN BACKGROUND ---------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  z-index: -20;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 15% 12%,
      rgba(21, 94, 239, .18) 0%,
      rgba(21, 94, 239, .08) 20%,
      transparent 42%
    ),
    radial-gradient(
      circle at 88% 20%,
      rgba(79, 140, 255, .13) 0%,
      rgba(79, 140, 255, .05) 22%,
      transparent 43%
    ),
    radial-gradient(
      circle at 50% 88%,
      rgba(21, 94, 239, .08) 0%,
      transparent 45%
    ),
    #06111f;

  transform: none !important;
}

/* ---------- GRID: CENTERED, FIXED, EVEN ---------- */

body::after {
  content: "";
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;

  z-index: -19;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(79, 140, 255, .045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 140, 255, .045) 1px,
      transparent 1px
    );

  background-size: 42px 42px;
  background-position: center center;

  opacity: .9;

  mask-image:
    radial-gradient(
      ellipse 100% 100% at center,
      #000 0%,
      rgba(0,0,0,.92) 50%,
      transparent 100%
    );

  -webkit-mask-image:
    radial-gradient(
      ellipse 100% 100% at center,
      #000 0%,
      rgba(0,0,0,.92) 50%,
      transparent 100%
    );

  transform: none !important;
}

/* ---------- KEEP EVERYTHING INSIDE VIEWPORT ---------- */

.site-header,
main,
.site-footer,
section,
.container {
  max-width: 100%;
}

.container {
  width: min(1180px, calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- HEADER LOGO ---------- */

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  text-decoration: none !important;
}

.site-header .m3dli-header-logo {
  display: block !important;

  width: 52px !important;
  height: 52px !important;

  max-width: 52px !important;
  max-height: 52px !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}

/* ---------- UNIVERSAL HEADER LOGO ---------- */

/*
   الصفحات القديمة عندها brand-icon + brand-text.
   نخليها بنفس هوية اللوقو الحقيقي بدون ما نكسر الـ navbar.
*/

.site-header .brand-icon {
  flex: 0 0 auto !important;
}

.site-header .brand-text {
  min-width: 0 !important;
}

/* ---------- HERO ---------- */

.hero,
.tools-section,
.features-section,
.final-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------- TOOLS GRID ---------- */

.tools-grid.m3-tools-grid,
.m3-tools-grid {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;

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

  gap: 20px !important;

  align-items: stretch !important;

  box-sizing: border-box !important;
}

/* ---------- TOOL CARD ---------- */

a.tool-card.m3-tool,
.m3-tool {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  padding: 24px !important;

  border-radius: 20px !important;

  text-decoration: none !important;

  position: relative !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    ) !important;

  border: 1px solid rgba(79,140,255,.18) !important;

  box-shadow:
    0 12px 35px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.035) !important;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease !important;
}

/* ---------- CARD CONTENT MUST STAY INSIDE ---------- */

.m3-tool .tool-card-top,
.m3-tool .tool-icon,
.m3-tool .tool-content,
.m3-tool .tool-footer {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.m3-tool .tool-card-top {
  width: 100% !important;

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

  flex: 0 0 auto !important;
}

.m3-tool .tool-icon {
  flex: 0 0 auto !important;
}

.m3-tool .tool-content {
  width: 100% !important;

  flex: 0 0 auto !important;

  margin-top: 18px !important;

  overflow: visible !important;
}

.m3-tool .tool-content h3 {
  width: 100% !important;

  margin: 0 !important;

  overflow-wrap: anywhere !important;
  word-break: normal !important;

  line-height: 1.5 !important;
}

.m3-tool .tool-content p {
  width: 100% !important;

  margin: 8px 0 0 !important;

  overflow-wrap: anywhere !important;
  word-break: normal !important;

  white-space: normal !important;

  line-height: 1.9 !important;
}

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

.m3-tool .tool-footer {
  width: 100% !important;

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

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

  gap: 10px !important;

  flex-wrap: wrap !important;

  overflow: visible !important;
}

.m3-tool .tool-footer span {
  min-width: 0 !important;
  max-width: 100% !important;

  overflow-wrap: anywhere !important;
}

/* ---------- CARD GLOW ---------- */

.m3-tool::before {
  content: "" !important;

  position: absolute !important;

  top: 0 !important;
  left: 20px !important;
  right: 20px !important;

  height: 2px !important;

  border-radius: 999px !important;

  background: #4f8cff !important;

  opacity: .35 !important;

  box-shadow:
    0 0 10px rgba(79,140,255,.22) !important;

  pointer-events: none !important;
}

.m3-tool::after {
  content: "" !important;

  position: absolute !important;

  width: 220px !important;
  height: 220px !important;

  top: -120px !important;
  left: -90px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(79,140,255,.12),
      transparent 70%
    ) !important;

  filter: blur(20px) !important;

  pointer-events: none !important;
}

.m3-tool:hover {
  transform: translateY(-5px) !important;

  border-color: rgba(79,140,255,.42) !important;

  box-shadow:
    0 18px 45px rgba(0,0,0,.25),
    0 0 28px rgba(79,140,255,.08) !important;
}

/* ---------- LEVELS ---------- */

.features-box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.levels-grid {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;

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

  gap: 10px !important;

  box-sizing: border-box !important;
}

.levels-grid a {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  overflow-wrap: anywhere !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 768px) {

  .container {
    width: calc(100% - 24px) !important;
  }

  .site-header .m3dli-header-logo {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }

  .tools-grid.m3-tools-grid,
  .m3-tools-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  a.tool-card.m3-tool,
  .m3-tool {
    width: 100% !important;
    min-height: 0 !important;
    padding: 20px !important;
  }

  .m3-tool .tool-content h3 {
    font-size: 20px !important;
  }

  .m3-tool .tool-content p {
    font-size: 12px !important;
    line-height: 1.85 !important;
  }

  .m3-tool .tool-footer {
    margin-top: 18px !important;
  }

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

/* ---------- SMALL PHONES ---------- */

@media (max-width: 430px) {

  .container {
    width: calc(100% - 20px) !important;
  }

  .site-header .m3dli-header-logo {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }

  .m3-tool {
    padding: 18px !important;
    border-radius: 17px !important;
  }

  .m3-tool .tool-icon {
    width: 58px !important;
    height: 58px !important;
    font-size: 27px !important;
  }

  .m3-tool .tool-content h3 {
    font-size: 19px !important;
  }

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

/* ---------- PREVENT HORIZONTAL SHIFT ---------- */

.site-header,
.site-header .navbar,
main,
.hero,
.tools-section,
.features-section,
.final-section,
.site-footer {
  overflow-x: clip !important;
}


/* =========================================================
   M3DLI — GLOBAL LOGO SYSTEM
   نفس اللوقو في الهيدر بكل الصفحات
   ========================================================= */

.site-header .brand{
  display:flex !important;
  align-items:center !important;
  flex-shrink:0 !important;
  text-decoration:none !important;
}

.site-header .m3dli-header-logo{
  display:block !important;
  width:auto !important;
  height:48px !important;
  max-width:180px !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
}

@media(max-width:768px){

  .site-header .m3dli-header-logo{
    height:42px !important;
    max-width:155px !important;
  }

}

@media(max-width:430px){

  .site-header .m3dli-header-logo{
    height:38px !important;
    max-width:140px !important;
  }

}

/* =========================================================
   M3DLI — FINAL GLOBAL HEADER / LOGO
   آخر قاعدة = المرجع النهائي لكل الصفحات
   ========================================================= */

.site-header{
  width:100% !important;
  position:relative !important;
  z-index:1000 !important;
}

.site-header .navbar{
  width:100% !important;
  min-height:72px !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
}

.site-header .brand{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  text-decoration:none !important;
}

.site-header .m3dli-header-logo{
  display:block !important;
  width:auto !important;
  height:48px !important;
  max-width:180px !important;
  min-width:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
}

/* لا نستعمل الهوية القديمة */
.site-header .brand .brand-icon,
.site-header .brand .brand-text{
  display:none !important;
}

/* الهاتف */
@media(max-width:768px){

  .site-header .navbar{
    min-height:64px !important;
    gap:10px !important;
  }

  .site-header .m3dli-header-logo{
    height:42px !important;
    max-width:155px !important;
  }

}

/* الهاتف الصغير */
@media(max-width:430px){

  .site-header .navbar{
    min-height:60px !important;
    gap:7px !important;
  }

  .site-header .m3dli-header-logo{
    height:38px !important;
    max-width:140px !important;
  }

}


/* =========================================================
   M3DLI — FINAL UNIFIED HEADER LOGO
   ========================================================= */

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .m3dli-header-logo {
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-icon,
.site-header .brand-text {
  display: none !important;
}

@media (max-width: 768px) {

  .site-header .brand {
    flex-shrink: 0 !important;
  }

  .site-header .m3dli-header-logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }

}

@media (max-width: 430px) {

  .site-header .m3dli-header-logo {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }

}

/* =========================================================
   M3DLI — GLOBAL HEADER LOGO FINAL FIX
   Applies to every real page
   ========================================================= */

.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  line-height: 0 !important;
}

.site-header .brand .m3dli-header-logo,
.site-header a.brand > .m3dli-header-logo {
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.site-header .brand .brand-icon,
.site-header .brand .brand-text {
  display: none !important;
}

@media (max-width: 768px) {
  .site-header .brand .m3dli-header-logo,
  .site-header a.brand > .m3dli-header-logo {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
}

/* =========================================================
   M3DLI — GLOBAL HEADER LOGO
   ========================================================= */

.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  line-height: 0 !important;
}

.site-header .brand .m3dli-header-logo,
.m3dli-header-logo {
  display: block !important;
  width: auto !important;
  height: 58px !important;
  max-width: 190px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* الهاتف */
@media (max-width: 768px) {
  .site-header .brand .m3dli-header-logo,
  .m3dli-header-logo {
    height: 48px !important;
    max-width: 155px !important;
  }
}

/* الهواتف الصغيرة */
@media (max-width: 430px) {
  .site-header .brand .m3dli-header-logo,
  .m3dli-header-logo {
    height: 43px !important;
    max-width: 140px !important;
  }
}

/* =========================================================
   M3DLI — FINAL HEADER LOGO FRAME
   نفس الإطار والتموضع في جميع الصفحات
   ========================================================= */

.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  min-height: 64px !important;
  padding: 5px 10px !important;
  border-radius: 14px !important;
  line-height: normal !important;
  overflow: hidden !important;
}

/* إطار اللوقو */
.site-header .brand::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 8px 25px rgba(0,0,0,.18),
    0 0 25px rgba(79,140,255,.12) !important;
  z-index: 0 !important;
}

/* الصورة فوق الإطار */
.site-header .brand .m3dli-header-logo,
.site-header .brand img.m3dli-header-logo {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;

  width: auto !important;
  height: 54px !important;
  max-width: 185px !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* نخفي أي نص قديم داخل الـbrand */
.site-header .brand .brand-icon,
.site-header .brand .brand-text {
  display: none !important;
}

/* الهاتف */
@media (max-width: 768px) {

  .site-header .brand {
    min-height: 56px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
  }

  .site-header .brand .m3dli-header-logo,
  .site-header .brand img.m3dli-header-logo {
    height: 46px !important;
    max-width: 155px !important;
  }
}

/* الهاتف الصغير */
@media (max-width: 430px) {

  .site-header .brand {
    min-height: 52px !important;
    padding: 3px 7px !important;
  }

  .site-header .brand .m3dli-header-logo,
  .site-header .brand img.m3dli-header-logo {
    height: 42px !important;
    max-width: 140px !important;
  }
}


/* =========================================================
   M3DLI GLOBAL DESIGN — PHASE 1
   BACKGROUND + GRID
   لا نحذف أو نعدل أي تصميم سابق
   ========================================================= */

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

body {
  position: relative;
  background-color: #07111f !important;
}

/* الخلفية والشبكة الموحدة */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(92, 150, 210, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 150, 210, 0.055) 1px, transparent 1px);

  background-size: 42px 42px;
  background-position: center center;
}

/* توهج خفيف فوق الشبكة */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(45, 130, 210, 0.10),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(30, 100, 180, 0.06),
      transparent 38%
    );

  opacity: 1;
}

/* المحتوى يبقى فوق الخلفية */
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* منع أي عنصر من دفع الصفحة أفقيًا */
.container,
.navbar,
main,
section,
.tools-grid,
.platform-grid,
.cards-grid {
  max-width: 100%;
  box-sizing: border-box;
}

/* الهاتف */
@media (max-width: 768px) {
  body::before {
    background-size: 34px 34px;
  }
}

/* الهواتف الصغيرة */
@media (max-width: 430px) {
  body::before {
    background-size: 30px 30px;
  }
}


/* =========================================================
   M3DLI GRID FIX — يظهر فوق خلفية الصفحة
   ========================================================= */

html {
  background: #07111f !important;
}

body {
  background: transparent !important;
  isolation: isolate;
}

body::before {
  z-index: 0 !important;
  background-image:
    linear-gradient(rgba(92, 150, 210, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 150, 210, 0.055) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  background-position: center center !important;
}

body::after {
  z-index: 0 !important;
}

.site-header,
main,
.site-footer {
  position: relative !important;
  z-index: 1 !important;
}

/* العناصر الداخلية تبقى فوق الشبكة */
.container,
.navbar,
section,
article,
.card,
.tool-card,
.platform-card,
.subject-card,
.pdf-card,
.page,
.box {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  body::before {
    background-size: 34px 34px !important;
  }
}

@media (max-width: 430px) {
  body::before {
    background-size: 30px 30px !important;
  }
}


/* =========================================================
   M3DLI — FINAL GLOBAL GRID BACKGROUND
   الشبكة جزء من خلفية الموقع مباشرة
   ========================================================= */

html,
body {
  background-color: #07111f !important;
}

body {
  background-image:
    radial-gradient(
      circle at 50% 0%,
      rgba(45, 130, 210, 0.10),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(30, 100, 180, 0.06),
      transparent 38%
    ),
    linear-gradient(
      rgba(92, 150, 210, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(92, 150, 210, 0.055) 1px,
      transparent 1px
    ) !important;

  background-size:
    auto,
    auto,
    42px 42px,
    42px 42px !important;

  background-position:
    center top,
    right bottom,
    center center,
    center center !important;

  background-attachment:
    fixed,
    fixed,
    fixed,
    fixed !important;
}

/* نلغي طبقات الشبكة القديمة حتى لا تتعارض */
body::before,
body::after {
  display: none !important;
}

@media (max-width: 768px) {
  body {
    background-size:
      auto,
      auto,
      34px 34px,
      34px 34px !important;
  }
}

@media (max-width: 430px) {
  body {
    background-size:
      auto,
      auto,
      30px 30px,
      30px 30px !important;
  }
}


/* =========================================================
   M3DLI — GLOBAL CARDS DESIGN
   نفس هوية الصفحة الرئيسية
   لا نحذف أي تصميم سابق
   ========================================================= */

:root {
  --m3dli-bg: #07111f;
  --m3dli-card: rgba(13, 27, 45, 0.88);
  --m3dli-card-hover: rgba(17, 36, 58, 0.96);
  --m3dli-border: rgba(120, 180, 230, 0.16);
  --m3dli-border-hover: rgba(100, 190, 255, 0.38);
  --m3dli-text: #f4f8fc;
  --m3dli-muted: #9eb1c3;
  --m3dli-accent: #39a9ff;
}

/* البطاقات الرئيسية */
.tool-card,
.platform-card,
.summary-card,
.subject-card,
.year-button,
.bem-nav a,
.card,
.cards-grid > *,
.tools-grid > *,
.platform-grid > * {
  background: var(--m3dli-card) !important;
  border: 1px solid var(--m3dli-border) !important;
  border-radius: 20px !important;
  color: var(--m3dli-text);
  box-sizing: border-box;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

/* تأثير المرور */
.tool-card:hover,
.platform-card:hover,
.summary-card:hover,
.subject-card:hover,
.year-button:hover,
.bem-nav a:hover,
.card:hover,
.cards-grid > *:hover,
.tools-grid > *:hover,
.platform-grid > *:hover {
  background: var(--m3dli-card-hover) !important;
  border-color: var(--m3dli-border-hover) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

/* النصوص داخل البطاقات */
.tool-card p,
.platform-card p,
.summary-card p,
.subject-card p,
.card p {
  color: var(--m3dli-muted);
}

/* العناوين */
.tool-card h3,
.platform-card h3,
.summary-card h3,
.subject-card h3,
.card h2,
.card h3 {
  color: var(--m3dli-text);
}

/* الروابط داخل البطاقات */
.tool-card a,
.platform-card a,
.summary-card a,
.subject-card a,
.card a {
  color: inherit;
}

/* أزرار البطاقات */
.summary-btn,
.pdf-btn,
.platform-button,
.hero-button {
  border-radius: 12px !important;
  transition: .2s ease;
}

/* الشبكات */
.tools-grid,
.platform-grid,
.cards-grid,
.summary-grid,
.subject-grid,
.years-grid {
  gap: 16px !important;
}

/* الهاتف */
@media (max-width: 768px) {
  .tools-grid,
  .platform-grid,
  .cards-grid,
  .summary-grid,
  .subject-grid,
  .years-grid {
    gap: 12px !important;
  }

  .tool-card,
  .platform-card,
  .summary-card,
  .subject-card,
  .year-button,
  .bem-nav a {
    border-radius: 17px !important;
  }
}

/* =========================================================
   M3DLI — FINAL BLUE DESIGN
   اللون الرسمي الجديد
   لا نحذف HTML / بطاقات / PDF
   ========================================================= */

:root {
  --m3-blue: #155EEF;
  --m3-blue-dark: #0B1F3A;
  --m3-bg: #F7F9FC;
  --m3-card: #FFFFFF;
  --m3-text: #0B1F3A;
  --m3-muted: #667085;
  --m3-line: #E4E7EC;
}

/* ================= GLOBAL ================= */

html,
body {
  background: var(--m3-bg) !important;
  color: var(--m3-text) !important;
}

body {
  font-family: "Cairo", sans-serif !important;
  overflow-x: hidden !important;
}

/* ================= BLUE BACKGROUND ================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    linear-gradient(
      rgba(21, 94, 239, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(21, 94, 239, 0.035) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 8% 10%,
      rgba(21, 94, 239, 0.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 30%,
      rgba(21, 94, 239, 0.045),
      transparent 26%
    );

  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto;
}

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

.site-header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--m3-line) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.site-header .navbar {
  min-height: 76px;
}

.site-header .nav-links a {
  color: var(--m3-muted) !important;
  transition: 0.25s ease !important;
}

.site-header .nav-links a:hover,
.site-header .nav-links a.active {
  color: var(--m3-blue) !important;
  background: rgba(21, 94, 239, 0.07) !important;
}

/* ================= LOGO ================= */

.site-header .brand {
  text-decoration: none !important;
}

.site-header .m3dli-header-logo {
  display: block !important;
  object-fit: contain !important;
}

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

.hero {
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(21, 94, 239, 0.12),
      transparent 45%
    ),
    linear-gradient(
      180deg,
      #F7F9FC 0%,
      #EEF4FF 58%,
      #F7F9FC 100%
    ) !important;
}

.hero::before {
  opacity: 0.8 !important;

  background-image:
    linear-gradient(
      rgba(21, 94, 239, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(21, 94, 239, 0.055) 1px,
      transparent 1px
    ) !important;

  background-size: 42px 42px !important;
}

.hero::after {
  background: rgba(21, 94, 239, 0.08) !important;
}

/* ================= TEXT ================= */

.hero-line,
.hero h1,
.section-heading h2,
.tool-content h3,
.platform-card h3,
.summary-card h3,
.subject-card h3 {
  color: var(--m3-text) !important;
}

.hero-gradient {
  color: var(--m3-blue) !important;
}

.hero-description,
.section-heading p,
.tool-content p,
.platform-card p,
.summary-card p,
.subject-card p {
  color: var(--m3-muted) !important;
}

/* ================= BADGES ================= */

.hero-badge {
  color: var(--m3-blue) !important;
  background: rgba(21, 94, 239, 0.06) !important;
  border-color: rgba(21, 94, 239, 0.16) !important;
}

.badge-dot {
  background: var(--m3-blue) !important;
  box-shadow: 0 0 0 5px rgba(21, 94, 239, 0.08) !important;
}

/* ================= BUTTONS ================= */

.primary-button {
  color: #FFFFFF !important;
  background: var(--m3-blue) !important;
  box-shadow: 0 12px 30px rgba(21, 94, 239, 0.18) !important;
}

.primary-button:hover {
  background: #0F4ED0 !important;
  box-shadow: 0 18px 40px rgba(21, 94, 239, 0.24) !important;
}

.secondary-button {
  color: var(--m3-blue) !important;
  background: #FFFFFF !important;
  border-color: rgba(21, 94, 239, 0.16) !important;
}

.secondary-button:hover {
  background: rgba(21, 94, 239, 0.045) !important;
  border-color: rgba(21, 94, 239, 0.28) !important;
}

/* =========================================================
   UNIFIED CARDS
   ========================================================= */

.tool-card,
.platform-card,
.summary-card,
.subject-card,
.year-button,
.bem-nav a {
  position: relative !important;
  background: var(--m3-card) !important;
  color: var(--m3-text) !important;
  border: 1px solid var(--m3-line) !important;
  border-radius: 20px !important;
  box-shadow:
    0 8px 30px rgba(11, 31, 58, 0.045) !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease !important;
}

/* نفس شكل البطاقات عند المرور */

.tool-card:hover,
.platform-card:hover,
.summary-card:hover,
.subject-card:hover,
.year-button:hover,
.bem-nav a:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(21, 94, 239, 0.25) !important;
  box-shadow:
    0 18px 45px rgba(11, 31, 58, 0.10) !important;
}

/* ================= TOOL CARDS ================= */

.tool-card::before {
  background: rgba(21, 94, 239, 0.055) !important;
}

.tool-number {
  color: #98A2B3 !important;
}

.tool-arrow {
  color: var(--m3-blue) !important;
  background: rgba(21, 94, 239, 0.055) !important;
  border-color: rgba(21, 94, 239, 0.13) !important;
}

.tool-icon {
  color: var(--m3-blue) !important;
  background: rgba(21, 94, 239, 0.06) !important;
  border-color: rgba(21, 94, 239, 0.14) !important;
}

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

.platform-card strong,
.platform-card h3 {
  color: var(--m3-text) !important;
}

.platform-card:hover {
  border-color: rgba(21, 94, 239, 0.25) !important;
}

/* ================= LINKS ================= */

main a:not(.tool-card):not(.platform-card):not(.summary-card):not(.subject-card):not(.year-button) {
  transition: color 0.2s ease;
}

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

.site-footer {
  background: var(--m3-blue-dark) !important;
  color: #FFFFFF !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.72) !important;
}

.site-footer a:hover {
  color: #FFFFFF !important;
}

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

@media (max-width: 768px) {

  body::before {
    background-size:
      34px 34px,
      34px 34px,
      auto,
      auto;
  }

  .tool-card,
  .platform-card,
  .summary-card,
  .subject-card,
  .year-button,
  .bem-nav a {
    border-radius: 17px !important;
  }
}

@media (max-width: 430px) {

  body::before {
    background-size:
      30px 30px,
      30px 30px,
      auto,
      auto;
  }

  .tool-card,
  .platform-card,
  .summary-card,
  .subject-card,
  .year-button,
  .bem-nav a {
    border-radius: 16px !important;
  }
}



/* =========================================================
   M3DLI — FINAL UNIFIED BLUE DESIGN
   ---------------------------------------------------------
   هذه الطبقة توحّد المظهر فقط.
   لا تحذف HTML
   لا تحذف بطاقات
   لا تحذف PDF
   لا تغيّر محتوى الحاسبات
   ========================================================= */


/* =========================================================
   01 — COLORS
   ========================================================= */

:root {
  --m3-bg: #06111f;
  --m3-bg-2: #071827;
  --m3-card: rgba(11, 29, 49, 0.92);
  --m3-card-2: rgba(14, 35, 59, 0.94);

  --m3-blue: #155EEF;
  --m3-blue-light: #4f8cff;
  --m3-blue-soft: rgba(21, 94, 239, 0.12);

  --m3-text: #FFFFFF;
  --m3-text-soft: #DCE5F2;
  --m3-muted: #9eafc5;

  --m3-border: rgba(79, 140, 255, 0.18);
  --m3-border-soft: rgba(255, 255, 255, 0.08);

  --m3-blue-dark: #06111f;
}


/* =========================================================
   02 — GLOBAL PAGE BACKGROUND
   ========================================================= */

html,
body {
  background: #06111f !important;
  color: #FFFFFF !important;
}

body {
  position: relative !important;
  min-height: 100vh;
  overflow-x: hidden !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(21, 94, 239, 0.13),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(21, 94, 239, 0.07),
      transparent 38%
    ),
    #06111f !important;
}


/* =========================================================
   03 — GLOBAL GRID
   ========================================================= */

body::before {
  content: "" !important;

  position: fixed !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    linear-gradient(
      rgba(79, 140, 255, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 140, 255, 0.055) 1px,
      transparent 1px
    ) !important;

  background-size: 42px 42px !important;
  background-position: center center !important;

  opacity: 1 !important;
}


/* =========================================================
   04 — GLOBAL BLUE LIGHT
   ========================================================= */

body::after {
  content: "" !important;

  position: fixed !important;
  inset: 0 !important;

  z-index: 0 !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(21, 94, 239, 0.15),
      transparent 38%
    ),
    radial-gradient(
      circle at 0% 70%,
      rgba(79, 140, 255, 0.045),
      transparent 32%
    ),
    radial-gradient(
      circle at 100% 90%,
      rgba(21, 94, 239, 0.055),
      transparent 35%
    ) !important;
}


/* =========================================================
   05 — KEEP REAL CONTENT ABOVE BACKGROUND
   ========================================================= */

.site-header,
main,
.site-footer,
header,
section,
footer,
.container,
.navbar {
  position: relative;
  z-index: 1;
}


/* =========================================================
   06 — HEADER
   ========================================================= */

.site-header {
  background: rgba(6, 17, 31, 0.88) !important;

  border-bottom:
    1px solid rgba(79, 140, 255, 0.14) !important;

  box-shadow:
    0 8px 35px rgba(0, 0, 0, 0.18) !important;

  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}


/* =========================================================
   07 — NAVIGATION
   ========================================================= */

.nav-links a {
  color: #9eafc5 !important;
}

.nav-links a:hover,
.nav-links a.active {
  color: #FFFFFF !important;

  background:
    rgba(21, 94, 239, 0.12) !important;
}


/* =========================================================
   08 — LOGO
   ========================================================= */

.site-header .m3dli-header-logo {
  object-fit: contain;
}


/* =========================================================
   09 — HERO / SECTIONS
   ========================================================= */

.hero,
.hero-section,
.tools-section,
.features-section,
.platform-section,
.page,
.lesson-page,
.bem-page {
  background: transparent !important;
}


.hero::before {
  opacity: 0.055 !important;

  background-image:
    linear-gradient(
      rgba(79, 140, 255, 0.65) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 140, 255, 0.65) 1px,
      transparent 1px
    ) !important;

  background-size: 70px 70px !important;
}


/* =========================================================
   10 — ALL MAIN CARDS
   ========================================================= */

.tool-card,
.platform-card,
.summary-card,
.subject-card,
.content-card,
.exam-card,
.average-card,
.final-card,
.branch-card,
.year-button,
.bem-nav a,
.choice-grid > *,
.lesson-section,
.rule-box,
.example-box,
.exercise-box {
  background:
    linear-gradient(
      145deg,
      rgba(14, 35, 59, 0.96),
      rgba(8, 24, 41, 0.96)
    ) !important;

  color: #FFFFFF !important;

  border:
    1px solid rgba(79, 140, 255, 0.18) !important;

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.16) !important;
}


/* =========================================================
   11 — CARD HOVER
   ========================================================= */

.tool-card:hover,
.platform-card:hover,
.summary-card:hover,
.subject-card:hover,
.content-card:hover,
.exam-card:hover,
.average-card:hover,
.final-card:hover,
.branch-card:hover,
.year-button:hover,
.bem-nav a:hover {
  border-color:
    rgba(79, 140, 255, 0.42) !important;

  box-shadow:
    0 25px 70px rgba(21, 94, 239, 0.14) !important;

  transform: translateY(-5px);
}


/* =========================================================
   12 — CARD ROUNDING
   ========================================================= */

.tool-card,
.platform-card,
.summary-card,
.subject-card,
.content-card,
.exam-card,
.average-card,
.final-card,
.branch-card {
  border-radius: 22px !important;
}

.year-button,
.bem-nav a {
  border-radius: 17px !important;
}


/* =========================================================
   13 — CARD INTERNAL BLUE ELEMENTS
   ========================================================= */

.tool-arrow,
.tool-icon,
.platform-card-icon {
  background:
    rgba(21, 94, 239, 0.10) !important;

  border-color:
    rgba(79, 140, 255, 0.20) !important;

  color: #75a7ff !important;
}


/* =========================================================
   14 — NUMBERS / LABELS
   ========================================================= */

.tool-number,
.tool-label {
  color: #718a7f !important;
}


/* =========================================================
   15 — CARD TITLES
   ========================================================= */

.tool-card h3,
.platform-card h3,
.summary-card h3,
.subject-card h3,
.exam-card h3,
.average-card h3,
.final-card h3,
.branch-card h3 {
  color: #FFFFFF !important;
}


/* =========================================================
   16 — CARD TEXT
   ========================================================= */

.tool-card p,
.platform-card p,
.summary-card p,
.subject-card p,
.exam-card p,
.average-card p,
.final-card p,
.branch-card p {
  color: #9eafc5 !important;
}


/* =========================================================
   17 — LINKS
   ========================================================= */

main a {
  color: #75a7ff;
}

main a:hover {
  color: #FFFFFF;
}


/* =========================================================
   18 — BUTTONS
   ========================================================= */

.primary-button,
.hero-button.primary-button,
.avg-button,
.final-buttons button {
  background:
    linear-gradient(
      135deg,
      #4f8cff,
      #155EEF
    ) !important;

  color: #FFFFFF !important;

  border:
    1px solid rgba(255, 255, 255, 0.10) !important;

  box-shadow:
    0 14px 35px rgba(21, 94, 239, 0.22) !important;
}

.primary-button:hover,
.avg-button:hover,
.final-buttons button:hover {
  box-shadow:
    0 20px 45px rgba(21, 94, 239, 0.30) !important;
}


.secondary-button {
  background:
    rgba(255, 255, 255, 0.035) !important;

  color: #FFFFFF !important;

  border:
    1px solid rgba(79, 140, 255, 0.20) !important;
}

.secondary-button:hover {
  background:
    rgba(21, 94, 239, 0.10) !important;

  border-color:
    rgba(79, 140, 255, 0.40) !important;
}


/* =========================================================
   19 — INPUTS / SELECTS
   ========================================================= */

input,
select,
textarea {
  background:
    rgba(8, 24, 41, 0.95) !important;

  color: #FFFFFF !important;

  border:
    1px solid rgba(79, 140, 255, 0.18) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color:
    rgba(79, 140, 255, 0.55) !important;

  outline:
    none !important;

  box-shadow:
    0 0 0 3px rgba(21, 94, 239, 0.10) !important;
}

input::placeholder,
textarea::placeholder {
  color: #71839a !important;
}


/* =========================================================
   20 — WHITE / LIGHT BOXES OVERRIDE
   ========================================================= */

.card,
.box,
.panel,
.info-box,
.result-box,
.form-card,
.calculator-card,
.lesson-card {
  background:
    linear-gradient(
      145deg,
      rgba(14, 35, 59, 0.96),
      rgba(8, 24, 41, 0.96)
    ) !important;

  color: #FFFFFF !important;

  border-color:
    rgba(79, 140, 255, 0.18) !important;
}


/* =========================================================
   21 — COMMON WHITE BACKGROUNDS INSIDE PAGES
   ========================================================= */

main .bg-white,
main .white-card,
main .light-card {
  background:
    rgba(14, 35, 59, 0.96) !important;

  color: #FFFFFF !important;
}


/* =========================================================
   22 — FOOTER
   ========================================================= */

.site-footer {
  background:
    #06111f !important;

  color: #FFFFFF !important;

  border-top:
    1px solid rgba(79, 140, 255, 0.14) !important;
}

.site-footer a {
  color:
    #9eafc5 !important;
}

.site-footer a:hover {
  color:
    #FFFFFF !important;
}


/* =========================================================
   23 — GREEN LEGACY COLORS
   تحويل العناصر القديمة من الأخضر إلى الأزرق
   ========================================================= */

.brand-icon {
  background:
    linear-gradient(
      145deg,
      #4f8cff,
      #155EEF
    ) !important;

  box-shadow:
    0 8px 25px rgba(21, 94, 239, 0.20) !important;
}

.brand-text small {
  color:
    #75a7ff !important;
}

.hero-gradient {
  color:
    #4f8cff !important;
}

.badge-dot {
  background:
    #155EEF !important;

  box-shadow:
    0 0 0 5px rgba(21, 94, 239, 0.10) !important;
}

.hero-badge {
  background:
    rgba(21, 94, 239, 0.08) !important;

  border-color:
    rgba(79, 140, 255, 0.20) !important;

  color:
    #9fc0ff !important;
}


/* =========================================================
   24 — REMOVE LEGACY GREEN CARD GLOWS
   ========================================================= */

.tool-card::before {
  background:
    rgba(21, 94, 239, 0.10) !important;
}


/* =========================================================
   25 — GRIDS
   ========================================================= */

.tools-grid,
.m3-tools-grid,
.platform-grid,
.cards-grid,
.summary-grid,
.summaries-grid,
.subject-grid,
.exams-grid,
.content-grid,
.choice-grid,
.branch-grid,
.years-grid,
.year-grid,
.levels-grid {
  gap: 16px !important;
}


/* =========================================================
   26 — MOBILE
   ========================================================= */

@media (max-width: 768px) {

  body::before {
    background-size: 34px 34px !important;
  }

  .tools-grid,
  .m3-tools-grid,
  .platform-grid,
  .cards-grid,
  .summary-grid,
  .summaries-grid,
  .subject-grid,
  .exams-grid,
  .content-grid,
  .choice-grid,
  .branch-grid,
  .years-grid,
  .year-grid,
  .levels-grid {
    gap: 12px !important;
  }

  .tool-card,
  .platform-card,
  .summary-card,
  .subject-card,
  .content-card,
  .exam-card,
  .average-card,
  .final-card,
  .branch-card {
    border-radius: 18px !important;
  }

  .year-button,
  .bem-nav a {
    border-radius: 16px !important;
  }
}


@media (max-width: 430px) {

  body::before {
    background-size: 30px 30px !important;
  }

  .tool-card,
  .platform-card,
  .summary-card,
  .subject-card,
  .content-card,
  .exam-card,
  .average-card,
  .final-card,
  .branch-card {
    border-radius: 17px !important;
  }
}


/* =========================================================
   END — FINAL UNIFIED BLUE DESIGN
   ========================================================= */


/* =========================================================
   M3DLI — FINAL UNIFIED BLUE DESIGN
   لا نحذف أي تصميم سابق — هذه الطبقة فقط توحّد المظهر
   ========================================================= */

:root {
  --m3-blue-bg: #06111f;
  --m3-blue-bg-2: #071a2e;
  --m3-blue-card: rgba(12, 29, 50, 0.92);
  --m3-blue-card-2: rgba(15, 36, 62, 0.88);
  --m3-blue: #155eef;
  --m3-blue-light: #4f8cff;
  --m3-blue-bright: #72a5ff;
  --m3-blue-dark: #04101d;
  --m3-text: #f4f7fc;
  --m3-muted: #9eafc5;
  --m3-border: rgba(79, 140, 255, 0.18);
  --m3-glow: rgba(21, 94, 239, 0.18);
}

/* ================= GLOBAL BACKGROUND ================= */

html,
body {
  background: #06111f !important;
  color: var(--m3-text) !important;
}

body {
  position: relative !important;
  min-height: 100vh;
  overflow-x: hidden;
}

/* الشبكة الموحدة */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -10 !important;
  pointer-events: none !important;

  background-image:
    linear-gradient(
      rgba(79, 140, 255, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 140, 255, 0.055) 1px,
      transparent 1px
    ) !important;

  background-size: 42px 42px !important;
}

/* الإضاءات */
body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -9 !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(21, 94, 239, 0.20),
      transparent 38%
    ),
    radial-gradient(
      circle at 5% 45%,
      rgba(79, 140, 255, 0.075),
      transparent 28%
    ),
    radial-gradient(
      circle at 95% 80%,
      rgba(21, 94, 239, 0.09),
      transparent 30%
    ) !important;
}

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

.site-header {
  background: rgba(4, 16, 29, 0.90) !important;
  border-bottom: 1px solid rgba(79, 140, 255, 0.14) !important;
  backdrop-filter: blur(20px) !important;
}

.site-header .nav-links a {
  color: #9eafc5 !important;
}

.site-header .nav-links a:hover,
.site-header .nav-links a.active {
  color: #ffffff !important;
  background: rgba(21, 94, 239, 0.12) !important;
}

.site-header .brand-text strong {
  color: #ffffff !important;
}

.site-header .brand-text small {
  color: var(--m3-blue-bright) !important;
}

/* الشعار */
.site-header .m3dli-header-logo {
  object-fit: contain !important;
}

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

.hero {
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(21, 94, 239, 0.20),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #06111f 0%,
      #071a2e 58%,
      #06111f 100%
    ) !important;
}

.hero::before {
  background-image:
    linear-gradient(
      rgba(79, 140, 255, 0.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 140, 255, 0.08) 1px,
      transparent 1px
    ) !important;

  background-size: 42px 42px !important;
  opacity: 1 !important;
}

.hero::after {
  background: rgba(21, 94, 239, 0.15) !important;
}

.hero-gradient {
  color: var(--m3-blue-bright) !important;
}

.hero-description,
.section-heading p {
  color: var(--m3-muted) !important;
}

.hero-badge {
  background: rgba(21, 94, 239, 0.08) !important;
  border-color: rgba(79, 140, 255, 0.20) !important;
  color: #b9d0ff !important;
}

.badge-dot {
  background: var(--m3-blue-light) !important;
  box-shadow: 0 0 0 5px rgba(79, 140, 255, 0.08) !important;
}

/* ================= SECTIONS ================= */

.tools-section,
.features-section,
.platform-section,
main,
section {
  background-color: transparent !important;
}

/* ================= ALL CARDS ================= */

.tool-card,
.platform-card,
.summary-card,
.subject-card,
.content-card,
.exam-card,
.lesson-section,
.average-card,
.final-card,
.branch-card,
.year-button,
.bem-nav a {
  background:
    linear-gradient(
      145deg,
      rgba(15, 36, 62, 0.96),
      rgba(8, 24, 42, 0.96)
    ) !important;

  color: var(--m3-text) !important;

  border: 1px solid var(--m3-border) !important;

  box-shadow:
    0 14px 45px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;

  border-radius: 20px !important;
}

/* نفس الإضاءة الزرقاء لكل البطاقات */
.tool-card::before,
.platform-card::before,
.summary-card::before,
.subject-card::before,
.exam-card::before,
.content-card::before {
  background: rgba(21, 94, 239, 0.10) !important;
}

/* hover موحد */
.tool-card:hover,
.platform-card:hover,
.summary-card:hover,
.subject-card:hover,
.exam-card:hover,
.content-card:hover,
.year-button:hover,
.bem-nav a:hover {
  border-color: rgba(79, 140, 255, 0.35) !important;

  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.30),
    0 0 30px rgba(21, 94, 239, 0.07) !important;
}

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

.tool-card h3,
.platform-card h3,
.summary-card h3,
.subject-card h3,
.exam-card h3,
.content-card h3,
.average-card h3,
.final-card h3,
.branch-card h3 {
  color: #ffffff !important;
}

.tool-card p,
.platform-card p,
.summary-card p,
.subject-card p,
.exam-card p,
.content-card p,
.average-card p,
.final-card p,
.branch-card p {
  color: var(--m3-muted) !important;
}

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

.tool-icon,
.platform-card-icon {
  background: rgba(21, 94, 239, 0.10) !important;
  border-color: rgba(79, 140, 255, 0.18) !important;
}

/* ================= NUMBERS / LABELS ================= */

.tool-number,
.tool-label {
  color: #7892b2 !important;
}

.tool-arrow {
  color: #9fc0ff !important;
  background: rgba(21, 94, 239, 0.09) !important;
  border-color: rgba(79, 140, 255, 0.18) !important;
}

/* ================= BUTTONS ================= */

.primary-button {
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      #4f8cff,
      #155eef
    ) !important;

  box-shadow:
    0 15px 40px rgba(21, 94, 239, 0.22) !important;
}

.primary-button:hover {
  box-shadow:
    0 20px 50px rgba(21, 94, 239, 0.32) !important;
}

.secondary-button {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(79, 140, 255, 0.20) !important;
}

.secondary-button:hover {
  background: rgba(21, 94, 239, 0.08) !important;
  border-color: rgba(79, 140, 255, 0.35) !important;
}

/* ================= LINKS ================= */

main a:not(.tool-card):not(.platform-card):not(.summary-card):not(.subject-card):not(.year-button) {
  color: #9fc0ff;
}

main a:not(.tool-card):not(.platform-card):not(.summary-card):not(.subject-card):not(.year-button):hover {
  color: #ffffff;
}

/* ================= NAVIGATION CARDS ================= */

.bem-nav a {
  color: #dce8ff !important;
}

.bem-nav a:hover {
  background:
    linear-gradient(
      145deg,
      rgba(21, 94, 239, 0.16),
      rgba(15, 36, 62, 0.96)
    ) !important;
}

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

.site-footer {
  background: #04101d !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(79, 140, 255, 0.14) !important;
}

.site-footer a {
  color: #8fa6c3 !important;
}

.site-footer a:hover {
  color: #ffffff !important;
}

/* ================= GRIDS ================= */

.tools-grid,
.platform-grid,
.cards-grid,
.summary-grid,
.summaries-grid,
.subject-grid,
.exams-grid,
.content-grid,
.branch-grid,
.choice-grid,
.years-grid,
.year-grid {
  gap: 16px !important;
}

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

@media (max-width: 768px) {

  body::before {
    background-size: 34px 34px !important;
  }

  .tools-grid,
  .platform-grid,
  .cards-grid,
  .summary-grid,
  .summaries-grid,
  .subject-grid,
  .exams-grid,
  .content-grid,
  .branch-grid,
  .choice-grid,
  .years-grid,
  .year-grid {
    gap: 12px !important;
  }

  .tool-card,
  .platform-card,
  .summary-card,
  .subject-card,
  .exam-card,
  .content-card,
  .year-button,
  .bem-nav a {
    border-radius: 17px !important;
  }
}

@media (max-width: 430px) {

  body::before {
    background-size: 30px 30px !important;
  }

  .tool-card,
  .platform-card,
  .summary-card,
  .subject-card,
  .exam-card,
  .content-card,
  .year-button,
  .bem-nav a {
    border-radius: 16px !important;
  }
}

/* =========================================================
   END — FINAL UNIFIED BLUE DESIGN
   ========================================================= */


/* =========================================================
   M3DLI — MASTER DESIGN
   FINAL UNIFIED BLUE THEME
   لا نحذف أي محتوى — لا HTML — لا PDF — لا حاسبات
   ========================================================= */

/* ---------- GLOBAL ---------- */

html,
body {
  background: #06111f !important;
  color: #dce8ff !important;
}

body {
  position: relative !important;
  overflow-x: hidden !important;
}

/* ---------- GLOBAL GRID + LIGHTS ---------- */

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -10 !important;
  pointer-events: none !important;

  background-image:
    linear-gradient(
      rgba(79, 140, 255, 0.075) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 140, 255, 0.075) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 50% 0%,
      rgba(21, 94, 239, 0.16),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(21, 94, 239, 0.09),
      transparent 38%
    ) !important;

  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto !important;

  background-position:
    center center,
    center center,
    center,
    center !important;
}

/* ---------- REMOVE OLD PAGE BACKGROUNDS ---------- */

.hero,
.tools-section,
.features-section,
.platform-section,
.bem-page,
.page,
.content-page,
.summary-page,
.lesson-page,
.exams-page,
section {
  background-color: transparent !important;
}

/* ---------- HEADER ---------- */

.site-header {
  background: rgba(4, 16, 29, 0.88) !important;
  border-bottom: 1px solid rgba(79, 140, 255, 0.14) !important;
  backdrop-filter: blur(20px) !important;
}

.nav-links a {
  color: #8fa6c3 !important;
}

.nav-links a:hover,
.nav-links a.active {
  color: #ffffff !important;
  background: rgba(21, 94, 239, 0.10) !important;
}

/* ---------- UNIVERSAL CARDS ---------- */

.tool-card,
.platform-card,
.summary-card,
.subject-card,
.exam-card,
.content-card,
.average-card,
.final-card,
.branch-card,
.lesson-section,
.year-button,
.bem-nav a {
  background:
    linear-gradient(
      145deg,
      rgba(15, 36, 62, 0.96),
      rgba(8, 24, 42, 0.96)
    ) !important;

  color: #dce8ff !important;

  border: 1px solid rgba(79, 140, 255, 0.16) !important;

  border-radius: 22px !important;

  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

/* ---------- CARD HOVER ---------- */

.tool-card:hover,
.platform-card:hover,
.summary-card:hover,
.subject-card:hover,
.exam-card:hover,
.content-card:hover,
.average-card:hover,
.final-card:hover,
.branch-card:hover,
.year-button:hover,
.bem-nav a:hover {
  border-color: rgba(79, 140, 255, 0.35) !important;

  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(21, 94, 239, 0.08) !important;

  transform: translateY(-4px);
}

/* ---------- CARD INTERNAL ELEMENTS ---------- */

.tool-icon,
.platform-card-icon {
  background: rgba(21, 94, 239, 0.10) !important;
  border-color: rgba(79, 140, 255, 0.18) !important;
}

.tool-arrow {
  color: #9fc0ff !important;
  background: rgba(21, 94, 239, 0.08) !important;
  border-color: rgba(79, 140, 255, 0.18) !important;
}

.tool-number {
  color: #6f91bd !important;
}

/* ---------- HEADINGS ---------- */

.tool-card h3,
.platform-card h3,
.summary-card h3,
.subject-card h3,
.exam-card h3,
.content-card h3,
.average-card h3,
.final-card h3,
.branch-card h3 {
  color: #ffffff !important;
}

.tool-card p,
.platform-card p,
.summary-card p,
.subject-card p,
.exam-card p,
.content-card p,
.average-card p,
.final-card p,
.branch-card p {
  color: #8fa6c3 !important;
}

/* ---------- BLUE ACCENTS ---------- */

.hero-gradient,
.badge-dot,
.section-heading h2 span {
  color: #4f8cff !important;
}

.hero-badge {
  background: rgba(21, 94, 239, 0.08) !important;
  border-color: rgba(79, 140, 255, 0.20) !important;
  color: #9fc0ff !important;
}

.primary-button {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #4f8cff,
      #155eef
    ) !important;

  box-shadow:
    0 15px 40px rgba(21, 94, 239, 0.22) !important;
}

.secondary-button {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(79, 140, 255, 0.20) !important;
}

/* ---------- GRIDS ---------- */

.tools-grid,
.m3-tools-grid,
.platform-grid,
.cards-grid,
.summary-grid,
.summaries-grid,
.subject-grid,
.exams-grid,
.content-grid,
.branch-grid,
.choice-grid,
.levels-grid,
.years-grid,
.year-grid {
  gap: 16px !important;
}

/* ---------- LINKS ---------- */

main a:not(.tool-card):not(.platform-card):not(.summary-card):not(.subject-card):not(.exam-card):not(.content-card):not(.year-button) {
  color: #9fc0ff;
}

main a:not(.tool-card):not(.platform-card):not(.summary-card):not(.subject-card):not(.exam-card):not(.content-card):not(.year-button):hover {
  color: #ffffff;
}

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

.site-footer {
  background: #04101d !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(79, 140, 255, 0.14) !important;
}

.site-footer a {
  color: #8fa6c3 !important;
}

.site-footer a:hover {
  color: #ffffff !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 768px) {

  body::before {
    background-size:
      34px 34px,
      34px 34px,
      auto,
      auto !important;
  }

  .tools-grid,
  .m3-tools-grid,
  .platform-grid,
  .cards-grid,
  .summary-grid,
  .summaries-grid,
  .subject-grid,
  .exams-grid,
  .content-grid,
  .branch-grid,
  .choice-grid,
  .levels-grid,
  .years-grid,
  .year-grid {
    gap: 12px !important;
  }

  .tool-card,
  .platform-card,
  .summary-card,
  .subject-card,
  .exam-card,
  .content-card,
  .average-card,
  .final-card,
  .branch-card,
  .year-button,
  .bem-nav a {
    border-radius: 17px !important;
  }
}

@media (max-width: 430px) {

  body::before {
    background-size:
      30px 30px,
      30px 30px,
      auto,
      auto !important;
  }

  .tool-card,
  .platform-card,
  .summary-card,
  .subject-card,
  .exam-card,
  .content-card,
  .average-card,
  .final-card,
  .branch-card,
  .year-button,
  .bem-nav a {
    border-radius: 16px !important;
  }
}

/* =========================================================
   END — M3DLI MASTER DESIGN
   ========================================================= */


/* =========================================================
   M3DLI — PAGE BACKGROUND FIX
   توحيد الصفحات التي عندها CSS داخلي قديم
   ========================================================= */

/* ---------- صفحات المحتوى ---------- */

.page {
  background: transparent !important;
  color: #dce8ff !important;
}

/* الصندوق الرئيسي في صفحات Privacy / Terms */
.page .box {
  background:
    linear-gradient(
      145deg,
      rgba(15, 36, 62, 0.96),
      rgba(8, 24, 42, 0.96)
    ) !important;

  color: #dce8ff !important;

  border: 1px solid rgba(79, 140, 255, 0.16) !important;

  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

/* ---------- SUMMARY / SUBJECT ---------- */

.summary-page,
.subject-page,
.summaries-page,
.lesson-page {
  background: transparent !important;
}

/* البطاقات الداخلية */
.summary-page .card,
.subject-page .card,
.summaries-page .card,
.lesson-page .card {
  background:
    linear-gradient(
      145deg,
      rgba(15, 36, 62, 0.96),
      rgba(8, 24, 42, 0.96)
    ) !important;

  border-color: rgba(79, 140, 255, 0.16) !important;
  color: #dce8ff !important;
}

/* ---------- INDEX OLD GREEN GLOW ---------- */

.hero::after {
  background: rgba(21, 94, 239, 0.12) !important;
}

.hero {
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(21, 94, 239, 0.16),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #06111f 0%,
      #071b30 55%,
      #06111f 100%
    ) !important;
}

/* ---------- OLD GREEN ELEMENTS ---------- */

.tool-card::before {
  background: rgba(21, 94, 239, 0.08) !important;
}

.tool-arrow,
.tool-icon,
.trust-item > span {
  background: rgba(21, 94, 239, 0.08) !important;
  border-color: rgba(79, 140, 255, 0.16) !important;
}

.badge-dot {
  background: #4f8cff !important;
  box-shadow: 0 0 0 5px rgba(79, 140, 255, 0.08) !important;
}

/* ---------- INTERNAL SUMMARY BACKGROUNDS ---------- */

.summary-card,
.subject-card {
  background:
    linear-gradient(
      145deg,
      rgba(15, 36, 62, 0.96),
      rgba(8, 24, 42, 0.96)
    ) !important;
}

/* ---------- HEADINGS ---------- */

.page h1,
.page h2,
.page h3,
.box h1,
.box h2,
.box h3 {
  color: #ffffff !important;
}

.page p,
.box p {
  color: #9aaec7 !important;
}

/* =========================================================
   END — PAGE BACKGROUND FIX
   ========================================================= */


/* =========================================================
   M3DLI — FINAL DESIGN LOCK
   نفس الهوية في كامل الموقع
   لا حذف — لا تغيير HTML — لا PDF — لا وظائف
   ========================================================= */

/* ===== GLOBAL BACKGROUND ===== */

html,
body {
  background: #06111f !important;
  color: #dce8ff !important;
}

body {
  position: relative !important;
  overflow-x: hidden !important;
}

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

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -10 !important;
  pointer-events: none !important;

  background-image:
    linear-gradient(
      rgba(79, 140, 255, 0.075) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 140, 255, 0.075) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 50% 0%,
      rgba(21, 94, 239, 0.16),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(21, 94, 239, 0.08),
      transparent 38%
    ) !important;

  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto !important;
}

/* ===== REMOVE OLD SECTION BACKGROUNDS ===== */

main,
section,
.page,
.tools-section,
.features-section,
.platform-section {
  background-color: transparent !important;
}

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

.site-header {
  background: rgba(4, 16, 29, 0.90) !important;
  border-bottom: 1px solid rgba(79, 140, 255, 0.14) !important;
}

/* ===== ALL MAIN CARDS ===== */

.tool-card,
.platform-card,
.summary-card,
.subject-card,
.exam-card,
.content-card,
.average-card,
.final-card,
.branch-card,
.lesson-section,
.year-button,
.bem-nav a {
  background:
    linear-gradient(
      145deg,
      rgba(15, 36, 62, 0.96),
      rgba(8, 24, 42, 0.96)
    ) !important;

  color: #dce8ff !important;

  border: 1px solid rgba(79, 140, 255, 0.16) !important;

  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

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

.tool-card:hover,
.platform-card:hover,
.summary-card:hover,
.subject-card:hover,
.exam-card:hover,
.content-card:hover,
.average-card:hover,
.final-card:hover,
.branch-card:hover,
.year-button:hover,
.bem-nav a:hover {
  border-color: rgba(79, 140, 255, 0.35) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(21, 94, 239, 0.08) !important;
}

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

.tool-card h3,
.platform-card h3,
.summary-card h3,
.subject-card h3,
.exam-card h3,
.content-card h3,
.average-card h3,
.final-card h3,
.branch-card h3 {
  color: #ffffff !important;
}

.tool-card p,
.platform-card p,
.summary-card p,
.subject-card p,
.exam-card p,
.content-card p,
.average-card p,
.final-card p,
.branch-card p {
  color: #8fa6c3 !important;
}

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

.tool-icon,
.platform-card-icon,
.tool-arrow {
  background: rgba(21, 94, 239, 0.08) !important;
  border-color: rgba(79, 140, 255, 0.18) !important;
  color: #9fc0ff !important;
}

/* ===== BUTTONS ===== */

.primary-button {
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      #4f8cff,
      #155eef
    ) !important;
}

.secondary-button {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(79, 140, 255, 0.20) !important;
}

/* ===== OLD GREEN OVERRIDES ===== */

.brand-icon {
  background:
    linear-gradient(
      135deg,
      #4f8cff,
      #155eef
    ) !important;
  box-shadow:
    0 8px 25px rgba(21, 94, 239, 0.18) !important;
}

.brand-text small {
  color: #75a7ff !important;
}

.hero {
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(21, 94, 239, 0.16),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #06111f 0%,
      #071b30 55%,
      #06111f 100%
    ) !important;
}

.hero::after {
  background: rgba(21, 94, 239, 0.12) !important;
}

.hero-badge {
  background: rgba(21, 94, 239, 0.08) !important;
  border-color: rgba(79, 140, 255, 0.20) !important;
  color: #9fc0ff !important;
}

.badge-dot {
  background: #4f8cff !important;
  box-shadow:
    0 0 0 5px rgba(79, 140, 255, 0.08) !important;
}

/* ===== CONTENT BOXES ===== */

.page .box,
.content-box,
.info-box {
  background:
    linear-gradient(
      145deg,
      rgba(15, 36, 62, 0.96),
      rgba(8, 24, 42, 0.96)
    ) !important;

  color: #dce8ff !important;
  border-color: rgba(79, 140, 255, 0.16) !important;
}

/* ===== LINKS ===== */

main a:not(.tool-card):not(.platform-card):not(.summary-card):not(.subject-card):not(.exam-card):not(.content-card):not(.year-button) {
  color: #9fc0ff !important;
}

main a:not(.tool-card):not(.platform-card):not(.summary-card):not(.subject-card):not(.exam-card):not(.content-card):not(.year-button):hover {
  color: #ffffff !important;
}

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

.site-footer {
  background: #04101d !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(79, 140, 255, 0.14) !important;
}

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

.tools-grid,
.m3-tools-grid,
.platform-grid,
.cards-grid,
.summary-grid,
.summaries-grid,
.subject-grid,
.exams-grid,
.content-grid,
.branch-grid,
.choice-grid,
.levels-grid,
.years-grid,
.year-grid {
  gap: 16px !important;
}

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

@media (max-width: 768px) {

  body::before {
    background-size:
      34px 34px,
      34px 34px,
      auto,
      auto !important;
  }

  .tools-grid,
  .m3-tools-grid,
  .platform-grid,
  .cards-grid,
  .summary-grid,
  .summaries-grid,
  .subject-grid,
  .exams-grid,
  .content-grid,
  .branch-grid,
  .choice-grid,
  .levels-grid,
  .years-grid,
  .year-grid {
    gap: 12px !important;
  }

  .tool-card,
  .platform-card,
  .summary-card,
  .subject-card,
  .exam-card,
  .content-card,
  .average-card,
  .final-card,
  .branch-card,
  .year-button,
  .bem-nav a {
    border-radius: 17px !important;
  }
}

/* =========================================================
   END — FINAL DESIGN LOCK
   ========================================================= */


/* =========================================================
   M3DLI — GLOBAL BLUE PAGE LOCK
   توحيد جميع الصفحات مهما كان فيها CSS داخلي
   ========================================================= */

/* ---------- GLOBAL PAGE BACKGROUND ---------- */

html,
body {
  background: #06111f !important;
  color: #ffffff !important;
}

body {
  position: relative !important;
}

/* ---------- GLOBAL BLUE GRID + LIGHTS ---------- */

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -10 !important;
  pointer-events: none !important;

  background-image:
    linear-gradient(
      rgba(79, 140, 255, 0.075) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 140, 255, 0.075) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 8% 12%,
      rgba(21, 94, 239, 0.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 25%,
      rgba(79, 140, 255, 0.12),
      transparent 26%
    );

  background-size:
    38px 38px,
    38px 38px,
    auto,
    auto;

  background-position:
    center,
    center,
    center,
    center;
}

/* ---------- MAIN PAGE WRAPPERS ---------- */

main,
.page,
.calculator-page,
.page-shell,
.content-page {
  background: transparent !important;
}

/* ---------- ALL MAJOR CARDS ---------- */

.tool-card,
.platform-card,
.summary-card,
.subject-card,
.exam-card,
.content-card,
.average-card,
.final-card,
.branch-card,
.lesson-section,
.calculator-box,
.subject,
.year-button,
.bem-nav a {
  background:
    linear-gradient(
      145deg,
      rgba(15, 36, 62, 0.96),
      rgba(8, 24, 42, 0.96)
    ) !important;

  border-color:
    rgba(79, 140, 255, 0.18) !important;

  color: #ffffff !important;

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.18) !important;
}

/* ---------- CARD HOVER ---------- */

.tool-card:hover,
.platform-card:hover,
.summary-card:hover,
.subject-card:hover,
.exam-card:hover,
.content-card:hover,
.average-card:hover,
.final-card:hover,
.branch-card:hover,
.year-button:hover,
.bem-nav a:hover {
  border-color:
    rgba(79, 140, 255, 0.38) !important;

  box-shadow:
    0 18px 50px rgba(21, 94, 239, 0.16) !important;
}

/* ---------- BAC 2027 BRANCH SELECT ---------- */

.branch-select {
  background: #08182a !important;
  color: #ffffff !important;
  border-color: rgba(79, 140, 255, 0.22) !important;
}

/* ---------- BAC BRANCH CARDS ---------- */

.branch-card {
  background:
    linear-gradient(
      145deg,
      rgba(15, 36, 62, 0.96),
      rgba(8, 24, 42, 0.96)
    ) !important;

  color: #ffffff !important;
  border-color: rgba(79, 140, 255, 0.18) !important;
}

.branch-card:hover {
  background:
    linear-gradient(
      145deg,
      rgba(21, 94, 239, 0.14),
      rgba(8, 24, 42, 0.98)
    ) !important;

  border-color: rgba(79, 140, 255, 0.40) !important;
}

.branch-card.selected {
  background:
    linear-gradient(
      145deg,
      rgba(21, 94, 239, 0.20),
      rgba(8, 24, 42, 0.98)
    ) !important;

  border-color: #4f8cff !important;

  box-shadow:
    0 12px 35px rgba(21, 94, 239, 0.20) !important;
}

/* ---------- ICONS ---------- */

.branch-card span,
.tool-icon {
  color: #75a7ff !important;

  background:
    rgba(79, 140, 255, 0.09) !important;

  border-color:
    rgba(79, 140, 255, 0.20) !important;
}

.branch-card.selected span {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #4f8cff,
      #155eef
    ) !important;

  border-color: transparent !important;
}

/* ---------- TEXT ---------- */

.calculator-header p,
.field-label,
.optional {
  color: #9aaec7 !important;
}

.subject-name,
.branch-card strong {
  color: #ffffff !important;
}

.coefficient {
  color: #75a7ff !important;
}

/* ---------- INPUTS ---------- */

.mark {
  background: #06111f !important;
  color: #ffffff !important;
  border-color: rgba(79, 140, 255, 0.20) !important;
}

.mark:focus {
  border-color: #4f8cff !important;
  box-shadow:
    0 0 0 3px rgba(79, 140, 255, 0.10) !important;
}

/* ---------- ALL PRIMARY BUTTONS ---------- */

.calculate-btn,
.primary-button,
.hero-button {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #4f8cff,
      #155eef
    ) !important;

  border-color: transparent !important;

  box-shadow:
    0 12px 35px rgba(21, 94, 239, 0.22) !important;
}

.calculate-btn:hover,
.primary-button:hover,
.hero-button:hover {
  box-shadow:
    0 18px 50px rgba(21, 94, 239, 0.32) !important;
}

/* ---------- BADGES ---------- */

.calculator-badge {
  color: #9fc0ff !important;

  background:
    rgba(79, 140, 255, 0.08) !important;

  border-color:
    rgba(79, 140, 255, 0.20) !important;
}

/* ---------- LINKS ---------- */

main a {
  color: #9fc0ff;
}

main a:hover {
  color: #ffffff;
}

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

.site-footer {
  background: #04101d !important;
  color: #ffffff !important;
  border-top-color: rgba(79, 140, 255, 0.16) !important;
}

.site-footer a {
  color: #8fa6c3 !important;
}

.site-footer a:hover {
  color: #ffffff !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 768px) {

  body::before {
    background-size:
      34px 34px,
      34px 34px,
      auto,
      auto !important;
  }

  .tool-card,
  .platform-card,
  .summary-card,
  .subject-card,
  .exam-card,
  .content-card,
  .average-card,
  .final-card,
  .branch-card,
  .lesson-section,
  .calculator-box,
  .subject,
  .year-button,
  .bem-nav a {
    border-radius: 17px !important;
  }
}

@media (max-width: 430px) {

  body::before {
    background-size:
      30px 30px,
      30px 30px,
      auto,
      auto !important;
  }

  .tool-card,
  .platform-card,
  .summary-card,
  .subject-card,
  .exam-card,
  .content-card,
  .average-card,
  .final-card,
  .branch-card,
  .lesson-section,
  .calculator-box,
  .subject,
  .year-button,
  .bem-nav a {
    border-radius: 16px !important;
  }
}

/* =========================================================
   END — M3DLI GLOBAL BLUE PAGE LOCK
   ========================================================= */


body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  pointer-events: none !important;

  z-index: 0 !important;

  background-image:
    linear-gradient(
      rgba(79, 140, 255, 0.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 140, 255, 0.10) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 12% 15%,
      rgba(21, 94, 239, 0.22),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 25%,
      rgba(79, 140, 255, 0.16),
      transparent 28%
    );

  background-size:
    38px 38px,
    38px 38px,
    auto,
    auto;

  background-position:
    center,
    center,
    center,
    center;

  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat;
}

/* نخلي محتوى الموقع فوق الشبكة */
body > * {
  position: relative;
  z-index: 1;
}

/* الـheader والـfooter يبقاو فوق الشبكة */
.site-header,
.site-footer {
  position: relative !important;
  z-index: 10 !important;
}

/* =========================================================
   BAC 2027 — FORCE BLUE ONLY
   ========================================================= */

.calculator-page {
  background: transparent !important;
}

.branch-select {
  background: #08182a !important;
  color: #ffffff !important;
}

.branch-card {
  background:
    linear-gradient(
      145deg,
      rgba(15, 36, 62, 0.97),
      rgba(8, 24, 42, 0.97)
    ) !important;

  color: #ffffff !important;
  border-color: rgba(79, 140, 255, 0.20) !important;
}

.branch-card:hover {
  background:
    linear-gradient(
      145deg,
      rgba(21, 94, 239, 0.16),
      rgba(8, 24, 42, 0.98)
    ) !important;

  border-color: rgba(79, 140, 255, 0.40) !important;
}

.branch-card.selected {
  background:
    linear-gradient(
      145deg,
      rgba(21, 94, 239, 0.22),
      rgba(8, 24, 42, 0.98)
    ) !important;

  border-color: #4f8cff !important;

  box-shadow:
    0 12px 35px rgba(21, 94, 239, 0.22) !important;
}

.branch-card.selected span {
  background:
    linear-gradient(
      135deg,
      #4f8cff,
      #155eef
    ) !important;

  color: #ffffff !important;
}

.calculate-btn {
  background:
    linear-gradient(
      135deg,
      #4f8cff,
      #155eef
    ) !important;

  color: #ffffff !important;
}

/* =========================================================
   END — VISIBLE BLUE GRID FIX
   ========================================================= */


/* =========================================================
   M3DLI — GRID VISIBILITY + BAC 2027 FINAL
   ========================================================= */

html {
  background: #06111f !important;
}

body {
  background: #06111f !important;
  position: relative !important;
}

/* شبكة الموقع */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  pointer-events: none !important;
  z-index: 0 !important;

  background-color: #06111f !important;

  background-image:
    linear-gradient(
      rgba(79,140,255,.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.12) 1px,
      transparent 1px
    ) !important;

  background-size: 36px 36px !important;
  opacity: 1 !important;
}

/* كل محتوى الموقع فوق الشبكة */
body > * {
  position: relative !important;
  z-index: 1 !important;
}

/* صفحات المحتوى شفافة */
.calculator-page,
.page {
  background: transparent !important;
}

/* صندوق الحاسبة */
.calculator-box {
  background:
    linear-gradient(
      145deg,
      rgba(15,36,62,.97),
      rgba(8,24,42,.97)
    ) !important;

  border-color: rgba(79,140,255,.20) !important;
}

/* بطاقات الشعب */
.branch-card {
  background:
    linear-gradient(
      145deg,
      rgba(15,36,62,.97),
      rgba(8,24,42,.97)
    ) !important;

  border-color: rgba(79,140,255,.20) !important;
  color: #ffffff !important;
}

.branch-card:hover,
.branch-card.selected {
  background:
    linear-gradient(
      145deg,
      rgba(21,94,239,.20),
      rgba(8,24,42,.97)
    ) !important;

  border-color: #4f8cff !important;
}

.branch-card.selected span {
  background:
    linear-gradient(
      135deg,
      #4f8cff,
      #155eef
    ) !important;

  color: #ffffff !important;
}

/* المواد */
.subject {
  background:
    linear-gradient(
      145deg,
      rgba(15,36,62,.97),
      rgba(8,24,42,.97)
    ) !important;

  border-color: rgba(79,140,255,.18) !important;
}

/* الحقول */
.branch-select,
.mark {
  background: #0b1f3a !important;
  color: #ffffff !important;
  border-color: rgba(79,140,255,.20) !important;
}

/* زر الحساب */
.calculate-btn {
  background:
    linear-gradient(
      135deg,
      #4f8cff,
      #155eef
    ) !important;

  color: #ffffff !important;
}

/* =========================================================
   END — GRID VISIBILITY + BAC 2027 FINAL
   ========================================================= */

/* =========================================================
   BAC 2027 — FORCE VISIBLE BLUE GRID
   ========================================================= */

body {
  background: #06111f !important;
}

/* الشبكة فوق أي خلفية داخلية */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;

  pointer-events: none !important;
  z-index: 9990 !important;

  background-color: transparent !important;

  background-image:
    linear-gradient(
      rgba(79,140,255,.18) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.18) 1px,
      transparent 1px
    ) !important;

  background-size: 36px 36px !important;
}

/* المحتوى فوق الشبكة */
body > * {
  position: relative !important;
  z-index: 9991 !important;
}

/* البطاقات الزرقاء إجبارياً */
.branch-card,
.subject,
.year-button {
  background: linear-gradient(
    145deg,
    #0f243e,
    #08182a
  ) !important;

  border-color: rgba(79,140,255,.30) !important;
  color: #ffffff !important;
}

/* الحالة المختارة */
.branch-card.selected {
  background: linear-gradient(
    145deg,
    #155eef,
    #0f243e
  ) !important;

  border-color: #4f8cff !important;
}

.branch-card.selected span {
  background: #4f8cff !important;
  color: #ffffff !important;
}

/* المواد */
.subject {
  background: linear-gradient(
    145deg,
    #0f243e,
    #08182a
  ) !important;
}

/* زر الحساب */
.calculate-btn {
  background: linear-gradient(
    135deg,
    #4f8cff,
    #155eef
  ) !important;

  color: #ffffff !important;
}



body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;

  pointer-events: none !important;
  z-index: 0 !important;

  background-color: #06111f !important;

  background-image:
    linear-gradient(
      rgba(79, 140, 255, 0.14) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 140, 255, 0.14) 1px,
      transparent 1px
    ) !important;

  background-size: 36px 36px !important;
  background-repeat: repeat !important;
}

/* كل محتوى الموقع فوق الشبكة */
body > * {
  position: relative !important;
  z-index: 1 !important;
}

/* الهيدر والفوتر فوق كل شيء */
.site-header,
.site-footer {
  position: relative !important;
  z-index: 10 !important;
}


/* =========================================================
   M3DLI — FORCE VISIBLE GRID ON ALL PAGES
   ========================================================= */

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;

  pointer-events: none !important;
  z-index: 5 !important;

  background-image:
    linear-gradient(
      rgba(79,140,255,.18) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.18) 1px,
      transparent 1px
    ) !important;

  background-size: 36px 36px !important;
  background-repeat: repeat !important;
}

.site-header,
.site-footer {
  position: relative !important;
  z-index: 10 !important;
}


/* =========================================================
   M3DLI — PROFESSIONAL BLUE GRID — ALL PAGES
   ========================================================= */

html {
  background: #06111f !important;
}

body {
  position: relative !important;
  background: transparent !important;
  color: #ffffff;
}

/* الشبكة في الخلفية */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  pointer-events: none !important;

  z-index: -1 !important;

  background-color: #06111f !important;

  background-image:
    linear-gradient(
      rgba(79,140,255,.075) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.075) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 15% 10%,
      rgba(79,140,255,.10),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 20%,
      rgba(21,94,239,.08),
      transparent 30%
    ) !important;

  background-size:
    40px 40px,
    40px 40px,
    auto,
    auto !important;

  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat !important;
}

/* المحتوى فوق الشبكة */
body > * {
  position: relative;
  z-index: 1;
}

/* الهيدر والفوتر أعلى من كل شيء */
.site-header,
.site-footer {
  position: relative !important;
  z-index: 10 !important;
}


/* ===== M3DLI — FINAL VISIBLE PROFESSIONAL GRID ===== */

body {
  position: relative !important;
  background: #06111f !important;
}

/* الشبكة */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;

  pointer-events: none !important;
  z-index: 0 !important;

  background-image:
    linear-gradient(
      rgba(79,140,255,.075) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.075) 1px,
      transparent 1px
    ) !important;

  background-size: 40px 40px !important;
  background-repeat: repeat !important;
}

/* كل محتوى الصفحة فوق الشبكة */
body > * {
  position: relative !important;
  z-index: 1 !important;
}

/* الهيدر والفوتر */
.site-header,
.site-footer {
  position: relative !important;
  z-index: 10 !important;
}



.m3dli-grid-bg {
  display: none !important;
}

/* =========================================================
   M3DLI — GRID THROUGHOUT THE ENTIRE PAGE
   ========================================================= */

html,
body {
  min-height: 100% !important;
  background-color: #06111f !important;

  background-image:
    linear-gradient(
      rgba(79,140,255,.075) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.075) 1px,
      transparent 1px
    ) !important;

  background-size: 40px 40px !important;
  background-attachment: fixed !important;
}

/* نخلي المساحات الرئيسية شفافة */
main,
.calculator-page,
.container {
  background: transparent !important;
}

/* البطاقات تبقى واضحة لكن الشبكة تبان حولها */
.calculator-box {
  background: rgba(8,24,42,.88) !important;
}

.branch-card,
.subject,
.year-button {
  background: rgba(15,36,62,.94) !important;
}

/* إخفاء الطبقة القديمة لأنها لم تعد ضرورية */
.m3dli-grid-bg {
  display: none !important;
}


/* =========================================================
   M3DLI — PROFESSIONAL GLOBAL GRID
   ========================================================= */

html {
  min-height: 100%;
  background: #06111f !important;
}

body {
  min-height: 100vh !important;
  background-color: #06111f !important;
  color: #ffffff !important;

  background-image:
    linear-gradient(
      rgba(79,140,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.045) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 15% 8%,
      rgba(79,140,255,.075),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 18%,
      rgba(21,94,239,.055),
      transparent 30%
    ) !important;

  background-size:
    48px 48px,
    48px 48px,
    100% 100%,
    100% 100% !important;

  background-attachment: fixed !important;
  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat !important;
}

/* لا توجد طبقة تغطي الشبكة */
main,
main > .container,
.calculator-page,
.content-page,
.page-content {
  background: transparent !important;
}

/* البطاقات تبقى واضحة مع لمسة شفافية */
.calculator-box,
.content-card,
.summary-card,
.average-card,
.final-card,
.lesson-section,
.exam-card,
.subject-card,
.tool-card,
.platform-card {
  background-color: rgba(8,24,42,.88) !important;
}

/* بطاقات الحساب */
.branch-card,
.subject,
.year-button {
  background-color: rgba(15,36,62,.92) !important;
}

/* الهيدر والفوتر يبقاو منفصلين وواضحين */
.site-header {
  background: rgba(4,16,29,.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-footer {
  background: rgba(4,16,29,.94) !important;
}

/* الهاتف: شبكة أهدأ */
@media (max-width: 600px) {
  body {
    background-size:
      42px 42px,
      42px 42px,
      100% 100%,
      100% 100% !important;

    background-image:
      linear-gradient(
        rgba(79,140,255,.035) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(79,140,255,.035) 1px,
        transparent 1px
      ),
      radial-gradient(
        circle at 20% 5%,
        rgba(79,140,255,.055),
        transparent 34%
      ),
      radial-gradient(
        circle at 80% 15%,
        rgba(21,94,239,.04),
        transparent 32%
      ) !important;
  }
}

/* =========================================================
   END — PROFESSIONAL GLOBAL GRID
   ========================================================= */


/* =========================================================
   M3DLI — FINAL PROFESSIONAL PAGE BACKGROUND
   ========================================================= */

html {
  background: #06111f !important;
}

body {
  min-height: 100vh !important;
  margin: 0 !important;
  background-color: #06111f !important;

  background-image:
    linear-gradient(
      rgba(79,140,255,0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,0.045) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 20% 10%,
      rgba(79,140,255,0.07),
      transparent 35%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(21,94,239,0.05),
      transparent 32%
    ) !important;

  background-size:
    48px 48px,
    48px 48px,
    100% 100%,
    100% 100% !important;

  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat !important;

  background-attachment: fixed !important;
}

/* نخلي الحاويات الرئيسية شفافة حتى تبان الشبكة */
main,
main.container,
.calculator-page,
.page-content {
  background: transparent !important;
}

/* البطاقات فقط تبقى داكنة */
.calculator-box,
.content-card,
.summary-card,
.average-card,
.final-card,
.lesson-section,
.exam-card,
.subject-card,
.tool-card,
.platform-card {
  background-color: rgba(8,24,42,0.90) !important;
}

/* الهيدر */
.site-header {
  background: rgba(4,16,29,0.94) !important;
}

/* الفوتر */
.site-footer {
  background: rgba(4,16,29,0.96) !important;
}

/* الهاتف */
@media (max-width: 600px) {
  body {
    background-size:
      42px 42px,
      42px 42px,
      100% 100%,
      100% 100% !important;

    background-image:
      linear-gradient(
        rgba(79,140,255,0.035) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(79,140,255,0.035) 1px,
        transparent 1px
      ),
      radial-gradient(
        circle at 20% 10%,
        rgba(79,140,255,0.05),
        transparent 35%
      ),
      radial-gradient(
        circle at 80% 20%,
        rgba(21,94,239,0.035),
        transparent 32%
      ) !important;
  }
}

/* =========================================================
   END — FINAL PROFESSIONAL PAGE BACKGROUND
   ========================================================= */

/* =========================================================
   M3DLI — ABSOLUTE FINAL GRID OVERRIDE
   ========================================================= */

html {
  background: #06111f !important;
}

body {
  position: relative !important;
  min-height: 100vh !important;
  background: #06111f !important;
  overflow-x: hidden !important;
}

/* الشبكة الوحيدة التي نعتمد عليها */
body::before {
  content: "" !important;

  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  height: 100% !important;

  display: block !important;
  pointer-events: none !important;

  z-index: 0 !important;

  background-color: #06111f !important;

  background-image:
    linear-gradient(
      rgba(79,140,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.045) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 18% 12%,
      rgba(79,140,255,.065),
      transparent 32%
    ),
    radial-gradient(
      circle at 82% 20%,
      rgba(21,94,239,.045),
      transparent 30%
    ) !important;

  background-size:
    48px 48px,
    48px 48px,
    100% 100%,
    100% 100% !important;

  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat !important;

  background-position:
    0 0,
    0 0,
    center,
    center !important;

  opacity: 1 !important;
}

/* كل محتوى الموقع فوق الشبكة */
body > * {
  position: relative !important;
  z-index: 1 !important;
}

/* الحاويات الرئيسية شفافة */
main,
main > .container,
main.container,
.calculator-page,
.page-content {
  background: transparent !important;
}

/* البطاقات تبقى داكنة */
.calculator-box,
.content-card,
.summary-card,
.average-card,
.final-card,
.lesson-section,
.exam-card,
.subject-card,
.tool-card,
.platform-card,
.branch-card,
.subject,
.year-button {
  position: relative !important;
  z-index: 2 !important;
}

/* الهيدر والفوتر فوق الشبكة */
.site-header,
.site-footer {
  position: relative !important;
  z-index: 10 !important;
}

/* الهاتف */
@media (max-width: 600px) {
  body::before {
    background-size:
      42px 42px,
      42px 42px,
      100% 100%,
      100% 100% !important;

    background-image:
      linear-gradient(
        rgba(79,140,255,.032) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(79,140,255,.032) 1px,
        transparent 1px
      ),
      radial-gradient(
        circle at 18% 10%,
        rgba(79,140,255,.05),
        transparent 34%
      ),
      radial-gradient(
        circle at 82% 20%,
        rgba(21,94,239,.035),
        transparent 32%
      ) !important;
  }
}

/* =========================================================
   END — ABSOLUTE FINAL GRID OVERRIDE
   ========================================================= */

/* =========================================================
   M3DLI — PROFESSIONAL GRID VISIBILITY FIX
   ========================================================= */

html {
  background: #06111f !important;
}

body {
  background-color: #06111f !important;
  background-image:
    linear-gradient(
      rgba(79,140,255,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.055) 1px,
      transparent 1px
    ) !important;

  background-size: 48px 48px !important;
  background-attachment: fixed !important;
}

/* افتح المساحات الكبيرة حتى تظهر الشبكة */
main,
main.container,
main > .container,
.calculator-page,
.page-content,
.content,
.level-page,
.lesson-page,
.subject-page,
.exams-page,
.tests-page,
.calculators-page {
  background: transparent !important;
}

/* الشبكة فوق خلفية الصفحة وتحت المحتوى */
body::before {
  display: none !important;
}

/* الكروت تبقى واضحة وفوق الشبكة */
.tool-card,
.platform-card,
.summary-card,
.subject-card,
.exam-card,
.content-card,
.average-card,
.final-card,
.calculator-box,
.branch-card,
.subject,
.lesson-section,
.year-button {
  position: relative !important;
  z-index: 2 !important;
}

/* الهيدر */
.site-header {
  position: relative !important;
  z-index: 20 !important;
  background: rgba(4,16,29,.94) !important;
}

/* الفوتر */
.site-footer {
  position: relative !important;
  z-index: 20 !important;
  background: rgba(4,16,29,.96) !important;
}

/* =========================================================
   END — PROFESSIONAL GRID VISIBILITY FIX
   ========================================================= */

/* =========================================================
   M3DLI HOME — 6 CARDS / 2 PER ROW
   ========================================================= */

.tools-grid.m3-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
}

.tools-grid.m3-tools-grid .m3-tool {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .tools-grid.m3-tools-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   M3DLI HOME — TWO CARDS PER ROW
   ========================================================= */

.tools-grid.m3-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.m3-tools-grid .m3-tool {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .tools-grid.m3-tools-grid,
  .m3-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .m3-tool {
    min-height: 230px !important;
    padding: 17px !important;
  }

  .m3-tool .tool-content h3 {
    font-size: 16px !important;
  }

  .m3-tool .tool-content p {
    font-size: 12px !important;
    line-height: 1.7 !important;
  }

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

/* =========================================================
   M3DLI — CLEAN BACKGROUND FINAL FIX
   ========================================================= */

html,
body {
  background-color: #06111f !important;
}

body {
  background-image:
    linear-gradient(
      rgba(79,140,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.045) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 18% 10%,
      rgba(79,140,255,.065),
      transparent 32%
    ),
    radial-gradient(
      circle at 82% 20%,
      rgba(21,94,239,.045),
      transparent 30%
    ) !important;

  background-size:
    48px 48px,
    48px 48px,
    100% 100%,
    100% 100% !important;

  background-position:
    0 0,
    0 0,
    center,
    center !important;

  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat !important;

  /* مهم للأداء في الهاتف */
  background-attachment: scroll !important;
}

/* إلغاء طبقة الشبكة الثابتة الثقيلة */
body::before {
  display: none !important;
}

/* لا نخلي أي حاوية تغطي الخلفية */
main,
main > .container,
main.container,
.page-content,
.calculator-page,
.content,
.level-page,
.lesson-page,
.subject-page,
.exams-page,
.tests-page,
.calculators-page {
  background: transparent !important;
}

/* الكروت فوق الخلفية */
.tool-card,
.platform-card,
.summary-card,
.subject-card,
.exam-card,
.content-card,
.average-card,
.final-card,
.calculator-box,
.branch-card,
.subject,
.lesson-section,
.year-button {
  position: relative !important;
  z-index: 2 !important;
}

/* الهيدر والفوتر */
.site-header,
.site-footer {
  position: relative !important;
  z-index: 20 !important;
}

/* الهاتف */
@media (max-width: 768px) {
  body {
    background-size:
      42px 42px,
      42px 42px,
      100% 100%,
      100% 100% !important;

    background-attachment: scroll !important;
  }
}

/* =========================================================
   END — CLEAN BACKGROUND FINAL FIX
   ========================================================= */

/* =========================================================
   M3DLI — HERO NETWORK BACKGROUND
   ========================================================= */

.hero,
.hero-section,
.home-hero,
.home-section {
  position: relative !important;
  overflow: hidden !important;
}

/* شبكة خفيفة خاصة بالقسم الرئيسي */
.hero::before,
.hero-section::before,
.home-hero::before,
.home-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    linear-gradient(
      rgba(79,140,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.035) 1px,
      transparent 1px
    ) !important;

  background-size: 46px 46px !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
}

/* محتوى الـHero فوق الشبكة */
.hero > *,
.hero-section > *,
.home-hero > *,
.home-section > * {
  position: relative !important;
  z-index: 1 !important;
}

/* الهاتف: شبكة أخف وأصغر */
@media (max-width: 768px) {
  .hero::before,
  .hero-section::before,
  .home-hero::before,
  .home-section::before {
    background-image:
      linear-gradient(
        rgba(79,140,255,.025) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(79,140,255,.025) 1px,
        transparent 1px
      ) !important;

    background-size: 40px 40px !important;
  }
}

/* =========================================================
   END — HERO NETWORK BACKGROUND
   ========================================================= */

/* =========================================================
   M3DLI — HERO NETWORK
   ========================================================= */

.hero {
  position: relative !important;
  overflow: hidden !important;
}

/* شبكة الخلفية للـHero فقط */
.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    linear-gradient(
      rgba(79,140,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.035) 1px,
      transparent 1px
    ) !important;

  background-size: 46px 46px !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
}

/* محتوى الـHero فوق الشبكة */
.hero > *,
.hero .container {
  position: relative !important;
  z-index: 1 !important;
}

/* الهاتف */
@media (max-width: 768px) {
  .hero::before {
    background-image:
      linear-gradient(
        rgba(79,140,255,.025) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(79,140,255,.025) 1px,
        transparent 1px
      ) !important;

    background-size: 40px 40px !important;
  }
}

/* =========================================================
   END — HERO NETWORK
   ========================================================= */

/* =========================================================
   M3DLI — HERO GRID ONLY
   إلغاء الدائرة واستعمال شبكة فقط
   ========================================================= */

.hero {
  position: relative !important;
  overflow: hidden !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  /* الشبكة فقط */
  background:
    linear-gradient(
      rgba(79,140,255,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.055) 1px,
      transparent 1px
    ) !important;

  background-size:
    46px 46px,
    46px 46px !important;

  background-position:
    0 0,
    0 0 !important;

  background-repeat:
    repeat,
    repeat !important;

  opacity: 1 !important;
}

/* محتوى الـHero فوق الشبكة */
.hero .container {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  .hero::before {
    background:
      linear-gradient(
        rgba(79,140,255,.045) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(79,140,255,.045) 1px,
        transparent 1px
      ) !important;

    background-size:
      40px 40px,
      40px 40px !important;
  }
}

/* =========================================================
   END — HERO GRID ONLY
   ========================================================= */

/* =========================================================
   M3DLI — FINAL HERO NETWORK
   شبكة فقط — بدون دوائر
   ========================================================= */

.hero {
  position: relative !important;
  overflow: hidden !important;
  background: #06111f !important;
}

/* الشبكة فقط */
.hero::before {
  display: block !important;
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  width: auto !important;
  height: auto !important;

  border-radius: 0 !important;
  filter: none !important;

  pointer-events: none !important;
  z-index: 0 !important;

  background:
    linear-gradient(
      rgba(79,140,255,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.055) 1px,
      transparent 1px
    ) !important;

  background-size:
    46px 46px,
    46px 46px !important;

  background-position:
    0 0,
    0 0 !important;

  background-repeat:
    repeat,
    repeat !important;

  opacity: 1 !important;
}

/* إلغاء الدائرة الثانية */
.hero::after {
  display: none !important;
  content: none !important;
}

/* محتوى الـHero فوق الشبكة */
.hero-content {
  position: relative !important;
  z-index: 2 !important;
}

/* الهاتف */
@media (max-width: 768px) {
  .hero::before {
    background-size:
      40px 40px,
      40px 40px !important;

    background-image:
      linear-gradient(
        rgba(79,140,255,.045) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(79,140,255,.045) 1px,
        transparent 1px
      ) !important;
  }
}

/* =========================================================
   END — FINAL HERO NETWORK
   ========================================================= */

/* =========================================================
   M3DLI — HERO GRID SAME AS SITE GRID
   ========================================================= */

.hero::before {
  background-image:
    linear-gradient(
      rgba(79,140,255,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,140,255,.055) 1px,
      transparent 1px
    ) !important;

  background-size:
    48px 48px,
    48px 48px !important;

  background-position:
    0 0,
    0 0 !important;

  background-repeat:
    repeat,
    repeat !important;

  opacity: 1 !important;
}

@media (max-width:768px) {
  .hero::before {
    background-image:
      linear-gradient(
        rgba(79,140,255,.055) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(79,140,255,.055) 1px,
        transparent 1px
      ) !important;

    background-size:
      48px 48px,
      48px 48px !important;
  }
}

/* =========================================================
   M3DLI — USE GLOBAL SITE GRID INSIDE HERO
   ========================================================= */

.hero {
  background: transparent !important;
}

/* لا شبكة ولا دائرة خاصة بالـHero */
.hero::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* إلغاء أي دائرة/إضاءة إضافية */
.hero::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* محتوى الـHero يبقى فوق الخلفية */
.hero-content {
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================
   END — GLOBAL GRID THROUGH HERO
   ========================================================= */

/* =========================================================
   M3DLI — PREMIUM INTERACTION
   Scroll + Hover + Press Feedback
   ========================================================= */

html{
  scroll-behavior:smooth;
}

/* كل العناصر القابلة للنقر */
a,
button,
.tool-card,
.platform-card,
.subject-card,
.official-exam-card{
  -webkit-tap-highlight-color:transparent;
}

/* البطاقات */
.tool-card,
.platform-card,
.subject-card,
.official-exam-card{
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
}

/* حركة الماوس */
@media (hover:hover){

  .tool-card:hover,
  .platform-card:hover,
  .subject-card:hover,
  .official-exam-card.available:hover{
    transform:translateY(-5px);
  }

}

/* الضغط */
.tool-card:active,
.platform-card:active,
.subject-card:active,
.official-exam-card:active{
  transform:translateY(1px) scale(.985) !important;
  transition-duration:.08s;
}

/* الروابط والأزرار */
.hero-button,
button,
.nav-links a{
  transition:
    transform .18s ease,
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.hero-button:active,
button:active,
.nav-links a:active{
  transform:scale(.96);
}

/* البطاقات التي تحتوي روابط */
.tool-card:focus-visible,
.platform-card:focus-visible,
.subject-card:focus-visible,
.official-exam-card:focus-visible,
a:focus-visible,
button:focus-visible{
  outline:2px solid rgba(79,140,255,.65);
  outline-offset:3px;
}

/* تأثير بسيط أثناء الضغط على الهاتف */
@media (hover:none){

  .tool-card:active,
  .platform-card:active,
  .subject-card:active,
  .official-exam-card:active{
    box-shadow:
      0 5px 18px rgba(0,0,0,.18),
      inset 0 0 0 1px rgba(79,140,255,.12);
  }

}

/* إلغاء الحركة لمن يفضل تقليل الحركة */
@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }

}


/* ===== M3DLI — HIDE NAVIGATION ===== */
.nav-links{
  display:none !important;
}