@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#f7f9fc;--surface:#fff;--text:#172033;--muted:#657086;--primary:#315bea;--line:#e8ecf4;--shadow:0 18px 45px rgba(28,42,75,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Vazirmatn,Tahoma,sans-serif;line-height:1.8}a{text-decoration:none;color:inherit}.container{width:min(1120px,calc(100% - 36px));margin:auto}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:10px}.brand-icon{font-size:35px}.brand b{display:block;font-size:17px}.brand small{display:block;color:var(--muted);font-size:11px}.nav nav{display:flex;gap:28px;font-size:14px;color:var(--muted)}.nav nav a:hover{color:var(--primary)}.theme-btn{border:1px solid var(--line);background:var(--surface);border-radius:12px;width:42px;height:42px;font-size:20px;cursor:pointer}
.hero{overflow:hidden;background:linear-gradient(135deg,#eef3ff 0%,#fff 55%,#f2fbff 100%);padding:72px 0 65px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:35px}.eyebrow{display:inline-flex;align-items:center;gap:7px;background:#e9efff;color:#315bea;border-radius:99px;padding:5px 13px;font-size:12px;font-weight:800}.hero h1{font-size:clamp(38px,5vw,63px);line-height:1.25;margin:18px 0 14px;letter-spacing:-1.5px}.hero h1 span{color:var(--primary)}.hero p{max-width:620px;color:var(--muted);font-size:16px}.hero-actions{display:flex;gap:12px;margin:28px 0}.btn{display:inline-block;padding:12px 22px;border-radius:13px;font-weight:800;font-size:14px}.primary{background:var(--primary);color:white;box-shadow:0 10px 25px rgba(49,91,234,.22)}.secondary{background:white;border:1px solid var(--line)}.mini-stats{display:flex;gap:30px;margin-top:25px}.mini-stats strong{display:block;font-size:24px}.mini-stats span{font-size:11px;color:var(--muted)}
.hero-art{min-height:390px;position:relative;display:flex;align-items:flex-end;justify-content:center}.sun{position:absolute;top:15px;right:55px;font-size:62px}.cloud{position:absolute;font-size:48px;opacity:.7}.c1{top:55px;left:20px}.c2{top:115px;right:5px;font-size:38px}.island{
  width:350px;
  height:250px;
  position:relative;
  border-radius:52% 48% 44% 56% / 44% 48% 52% 56%;
  background:
    radial-gradient(circle at 38% 28%,rgba(255,255,255,.32),transparent 22%),
    linear-gradient(145deg,#62d5ee 0 22%,#238fca 23% 32%,#7bca62 33% 56%,#4b9f4f 57% 72%,#6b4931 73% 100%);
  box-shadow:
    inset 0 18px 25px rgba(255,255,255,.22),
    inset 0 -28px 35px rgba(20,70,45,.25),
    0 28px 35px rgba(30,80,120,.18),
    0 45px 70px rgba(30,80,120,.12);
  transform:rotate(-4deg);
  filter:saturate(1.08);
}.sand{
  position:absolute;
  width:220px;
  height:92px;
  background:
    radial-gradient(circle at 35% 30%,#ffe9ae 0 18%,transparent 19%),
    linear-gradient(145deg,#ffe3a1,#d6a95d);
  border-radius:50%;
  left:65px;
  top:88px;
  box-shadow:
    inset 0 7px 12px rgba(255,255,255,.35),
    0 10px 14px rgba(90,65,25,.16);
}.water{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:44px;
  background:
    linear-gradient(180deg,rgba(120,235,255,.55),rgba(20,130,185,.82));
  border-radius:0 0 50% 50%;
  box-shadow:inset 0 8px 12px rgba(255,255,255,.18);
}.palm{position:absolute;z-index:2;left:62px;top:20px;font-size:100px;transform:rotate(5deg)}.book{position:absolute;z-index:3;right:78px;top:115px;font-size:65px;transform:rotate(10deg)}.formula{position:absolute;background:#fff;padding:7px 13px;border-radius:12px;box-shadow:var(--shadow);font-weight:800;color:#315bea}.f1{top:175px;left:0;transform:rotate(-7deg)}.f2{bottom:25px;right:0;transform:rotate(7deg)}
.section{padding:78px 0}.section-head{text-align:center;max-width:680px;margin:0 auto 38px}.section-head h2{font-size:32px;line-height:1.4;margin:13px 0 5px}.section-head p{color:var(--muted);margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:23px;padding:25px;min-height:245px;box-shadow:0 8px 25px rgba(28,42,75,.035);transition:.25s}.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.card-icon{display:flex;align-items:center;justify-content:center;width:57px;height:57px;border-radius:17px;background:#eef3ff;font-size:28px;margin-bottom:14px}.tag{font-size:10px;font-weight:800;color:var(--muted)}
.post-thumb{
  width:100px;
  height:100px;
  object-fit:cover;
  border-radius:18px;
  box-shadow:0 8px 20px rgba(28,42,75,.18);
  margin:8px 12px;
  float:right;
}
.card h3{font-size:20px;margin:3px 0 5px}.card p{font-size:13px;color:var(--muted);margin:0 0 15px}.more{font-size:12px;font-weight:800;color:var(--primary)}.green .card-icon{background:#e9faf1}.orange .card-icon{background:#fff3df}.purple .card-icon{background:#f3edff}.pink .card-icon{background:#ffeaf1}.teal .card-icon{background:#e7fbfb}
.challenge{padding:15px 0 78px}.challenge-box{background:linear-gradient(120deg,#1f3fc0,#4b69ee);color:#fff;border-radius:28px;padding:34px 40px;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:0 20px 45px rgba(49,91,234,.18)}.challenge .eyebrow{background:rgba(255,255,255,.15);color:#fff}.challenge h2{margin:10px 0 3px;font-size:25px}.challenge p{margin:0;opacity:.8;font-size:13px}.answers{display:grid;grid-template-columns:repeat(2,80px);gap:9px;min-width:180px}.answers button{border:0;background:#fff;color:#243a9c;border-radius:12px;padding:10px;font-family:inherit;font-weight:900;cursor:pointer}.answers button:hover{background:#edf1ff}.answers button.correct{background:#9ff0bd;color:#145c32}.answers button.wrong{background:#ffd0d0;color:#8c1d1d}.answers #feedback{grid-column:1/-1;font-size:12px;min-height:25px;text-align:center}
.about-box{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:35px;display:flex;align-items:center;gap:25px}.about-icon{font-size:70px}.about h2{margin:0 0 7px}.about p{color:var(--muted);margin:0}.placeholders{padding-top:0}.section-head.compact{margin-bottom:22px}.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.roadmap div{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;font-size:25px}.roadmap b{display:block;font-size:15px}.roadmap small{display:block;color:var(--muted);font-size:11px;margin-top:4px}footer{background:#11192b;color:#fff;padding:28px 0}.footer{display:flex;justify-content:space-between;gap:20px;font-size:11px;opacity:.85}.footer div span{display:block;color:#aeb8ca}
body.dark{--bg:#0e1421;--surface:#171f30;--text:#f1f4fa;--muted:#aab5c9;--line:#273248}.dark .topbar{background:rgba(14,20,33,.88)}.dark .hero{background:linear-gradient(135deg,#151e38,#101724)}.dark .secondary{background:var(--surface)}.dark .card,.dark .about-box,.dark .roadmap div{box-shadow:none}.dark .card-icon{background:#222d44}.dark .challenge-box{box-shadow:none}

/* ===== Floating island orbits ===== */

.hero-art{
  perspective:1100px;
}

.orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(49,91,234,.18);
  border-radius:50%;
  pointer-events:none;
  transform-style:preserve-3d;
  transform-origin:center;
}

.orbit::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  border:1px dashed rgba(49,91,234,.10);
}

.orbit-outer{
  width:510px;
  height:300px;
  margin-left:-255px;
  margin-top:-150px;
  transform:rotateZ(0deg);
  animation:islandOrbitOuter 20s linear infinite;
}

.orbit-middle{
  width:430px;
  height:260px;
  margin-left:-215px;
  margin-top:-130px;
  transform:rotateZ(25deg);
  animation:islandOrbitMiddle 15s linear infinite reverse;
}

.orbit-inner{
  width:350px;
  height:220px;
  margin-left:-175px;
  margin-top:-110px;
  transform:rotateZ(-25deg);
  animation:islandOrbitInner 11s linear infinite;
}

.orbit-item{
  position:absolute;
  left:50%;
  top:-19px;
  transform:translateX(-50%);
  min-width:120px;
  padding:8px 10px;
  color:#315bea;
  background:transparent;
  border:0;
  box-shadow:none;
  text-shadow:
    0 2px 8px rgba(255,255,255,.95),
    0 4px 14px rgba(30,80,120,.28);
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  text-align:center;
  direction:rtl;
  animation:orbitLabel 20s linear infinite reverse;
}

.orbit-middle .orbit-item{
  animation-duration:15s;
}

.orbit-inner .orbit-item{
  animation-duration:11s;
}

.orbit-item-2{
  top:auto;
  bottom:-19px;
}

.orbit-item-3{
  top:-19px;
}

.orbit-item-4{
  top:auto;
  bottom:-19px;
}

.orbit-item-5{
  top:-19px;
}

.orbit-item-6{
  top:auto;
  bottom:-19px;
}

@keyframes islandOrbitOuter{
  from{transform:rotateZ(0deg)}
  to{transform:rotateZ(360deg)}
}

@keyframes islandOrbitMiddle{
  from{transform:rotateZ(25deg)}
  to{transform:rotateZ(385deg)}
}

@keyframes islandOrbitInner{
  from{transform:rotateZ(-25deg)}
  to{transform:rotateZ(335deg)}
}

@keyframes orbitLabel{
  from{transform:translateX(-50%) rotateZ(0deg)}
  to{transform:translateX(-50%) rotateZ(-360deg)}
}

.orbit-item:hover{
  background:#fff;
  transform:translateX(-50%) scale(1.08);
}

.dark .orbit{
  border-color:rgba(130,160,255,.25);
}

.dark .orbit::before{
  border-color:rgba(130,160,255,.12);
}

.dark .orbit-item{
  background:transparent;
  color:#b9c8ff;
  text-shadow:
    0 2px 8px rgba(0,0,0,.8),
    0 0 14px rgba(80,120,255,.35);
}

@media(max-width:820px){
  .orbit-outer{
    width:420px;
    height:250px;
    margin-left:-210px;
    margin-top:-125px;
  }

  .orbit-middle{
    width:355px;
    height:215px;
    margin-left:-177px;
    margin-top:-107px;
  }

  .orbit-inner{
    width:290px;
    height:185px;
    margin-left:-145px;
    margin-top:-92px;
  }

  .orbit-item{
    min-width:100px;
    padding:6px 8px;
    font-size:11px;
  }
}

@media(max-width:540px){
  .orbit-outer{
    width:350px;
    height:210px;
    margin-left:-175px;
    margin-top:-105px;
  }

  .orbit-middle{
    width:295px;
    height:180px;
    margin-left:-147px;
    margin-top:-90px;
  }

  .orbit-inner{
    width:240px;
    height:150px;
    margin-left:-120px;
    margin-top:-75px;
  }

  .orbit-item{
    min-width:86px;
    padding:5px 6px;
    font-size:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .orbit,
  .orbit-item{
    animation:none!important;
  }
}

@media(max-width:820px){.nav nav{display:none}.hero-grid{grid-template-columns:1fr}.hero{padding-top:45px}.hero-art{min-height:300px}.island{transform:scale(.82) rotate(-4deg)}.cards{grid-template-columns:repeat(2,1fr)}.challenge-box{flex-direction:column;align-items:stretch}.answers{margin:auto}.roadmap{grid-template-columns:1fr}.about-box{flex-direction:column;text-align:center}}
@media(max-width:540px){.container{width:min(100% - 24px,1120px)}.hero h1{font-size:38px}.hero-art{min-height:255px}.island{transform:scale(.68) rotate(-4deg);margin-top:-15px}.cards{grid-template-columns:1fr}.mini-stats{gap:18px}.challenge-box{padding:27px 22px}.challenge h2{font-size:21px}.footer{flex-direction:column}}\n

.block-highlight{
  width:100%;
  box-sizing:border-box;
  border-radius:12px;
  padding:8px 14px;
  margin:8px 0;
}


.formula{
  animation:floatFormula 4s ease-in-out infinite;
}

.f2{
  animation-delay:1.5s;
}

@keyframes floatFormula{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-12px);
  }
}


.learning-earth{
  position:absolute;
  top:50%;
  left:50%;
  width:130px;
  height:130px;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:95px;
  z-index:5;
  filter:drop-shadow(0 15px 25px rgba(0,0,0,.2));
  animation:earthRotate 12s linear infinite;
}

@keyframes earthRotate{
  0%{
    transform:translate(-50%,-50%) perspective(500px) rotateY(0deg);
  }
  100%{
    transform:translate(-50%,-50%) perspective(500px) rotateY(360deg);
  }
}


.post-button{
display:inline-block;
padding:10px 18px;
border-radius:14px;
color:#fff!important;
text-decoration:none!important;
font-weight:700;
margin:6px;
box-shadow:0 8px 18px rgba(0,0,0,.18);
transition:.25s;
}

.post-button:hover{
transform:translateY(-3px);
box-shadow:0 12px 25px rgba(0,0,0,.25);
}

.post-button.blue{background:#2563eb}
.post-button.green{background:#16a34a}
.post-button.orange{background:#ea580c}
.post-button.purple{background:#9333ea}


.dynamic-posts .card:nth-child(6n+1){
background:#fef3c7;
}

.dynamic-posts .card:nth-child(6n+2){
background:#dbeafe;
}

.dynamic-posts .card:nth-child(6n+3){
background:#dcfce7;
}

.dynamic-posts .card:nth-child(6n+4){
background:#fce7f3;
}

.dynamic-posts .card:nth-child(6n+5){
background:#ede9fe;
}

.dynamic-posts .card:nth-child(6n+6){
background:#cffafe;
}


#services .card:nth-child(6n+1){
background:#fff7ed;
}

#services .card:nth-child(6n+2){
background:#ecfdf5;
}

#services .card:nth-child(6n+3){
background:#eff6ff;
}

#services .card:nth-child(6n+4){
background:#fdf2f8;
}

#services .card:nth-child(6n+5){
background:#f5f3ff;
}

#services .card:nth-child(6n+6){
background:#ecfeff;
}

/* =========================
   Notice Board
========================= */

.notice-board{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}

.notice-item{
  padding:12px 18px;
  border-radius:16px;
  background:#fff;
  font-weight:800;
  font-size:15px;
  box-shadow:0 0 22px rgba(59,130,246,.25);
  transition:.25s;
}

.notice-item:nth-child(2n){
  box-shadow:0 0 22px rgba(16,185,129,.25);
}

.notice-item:nth-child(3n){
  box-shadow:0 0 22px rgba(249,115,22,.25);
}

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



/* notice board compact */

.dynamic-posts .posts-container{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dynamic-posts .notice-item.card{
  width:100%;
  min-height:auto;
  padding:10px 18px;
  border-radius:14px;
  display:flex;
  align-items:center;
  background:#fff;
  box-shadow:0 0 18px rgba(59,130,246,.25);
  font-size:15px;
}

.dynamic-posts .notice-item.card:hover{
  transform:translateY(-2px);
}


/* final notice size */

.dynamic-posts .notice-item{
  width:100%;
  padding:10px 16px;
  border-radius:14px;
  min-height:0;
  height:auto;
  display:flex;
  align-items:center;
  background:#fff;
  font-size:15px;
  font-weight:800;
}


/* services + announcement layout */

@media(min-width:900px){

  #services .container{
    position:relative;
  }

  .announcement-layout{
    position:absolute;
    right:20px;
    top:0;
    width:32%;
  }

}

@media(max-width:899px){

  .announcement-layout{
    position:static;
    width:100%;
  }

}


/* Home tools + announcement */

.home-tools-layout{
  display:grid;
  grid-template-columns:1fr 330px;
  gap:25px;
  width:min(1200px,calc(100% - 30px));
  margin:50px auto;
  align-items:start;
}

.home-tools-layout #services{
  grid-column:1;
  margin:0;
}

.home-tools-layout .announcement-layout{
  grid-column:2;
}

@media(max-width:900px){

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

  .home-tools-layout #services,
  .home-tools-layout .announcement-layout{
    grid-column:1;
  }

}



/* fix home grid rtl */

.home-tools-layout{
  direction:ltr;
}

.home-tools-layout #services{
  direction:rtl;
  grid-column:1;
}

.home-tools-layout .announcement-layout{
  direction:rtl;
  grid-column:2;
}


/* announcement grid column */

.home-tools-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:25px;
  align-items:start;
}

.home-tools-layout #services{
  grid-column:1;
}

.home-tools-layout .announcement-layout{
  grid-column:2;
}

@media(max-width:900px){
  .home-tools-layout{
    grid-template-columns:1fr;
  }

  .home-tools-layout #services,
  .home-tools-layout .announcement-layout{
    grid-column:1;
  }
}


.dynamic-posts{
  width:100%;
}

.dynamic-posts .section-head{
  margin-bottom:15px;
}

.home-tools-layout .announcement-layout .dynamic-posts{
  margin:0;
}


/* fix announcement position */

.home-tools-layout{
  position:relative;
}

.home-tools-layout .announcement-layout{
  position:relative;
  top:0;
  margin-top:50px;
}

.home-tools-layout .dynamic-posts{
  margin:0;
}


/* announcement full column width */

.home-tools-layout .announcement-layout,
.home-tools-layout #announcementBox,
.home-tools-layout .dynamic-posts{
  width:100%;
}

.home-tools-layout .notice-board{
  width:100%;
}

.home-tools-layout .notice-item{
  width:100%;
}


/* align announcement with services title */

.home-tools-layout .announcement-layout{
  margin-top:65px;
}


/* align announcement header */

.home-tools-layout .announcement-layout .dynamic-posts{
  padding-top:0;
}

.home-tools-layout .announcement-layout .section-head{
  margin-top:0;
  padding-top:0;
}

.home-tools-layout .announcement-layout .section-head .eyebrow{
  margin-top:0;
}


.notice-title a{
  color:inherit;
  text-decoration:none;
}

.notice-title a:hover{
  text-decoration:underline;
}

.notice-date{
  display:block;
  margin-top:5px;
  opacity:.65;
  font-size:12px;
}


.notice-title{
  display:flex;
  align-items:center;
  gap:8px;
}

.notice-date{
  display:block;
  width:100%;
  margin-top:8px;
  padding-right:28px;
}


/* fix notice style */


.notice-title{
  display:block;
  line-height:1.8;
}

.notice-date{
  display:block;
  width:100%;
  margin-top:6px;
  padding-right:0;
  opacity:.7;
  font-size:12px;
}


.notice-title{
  display:block !important;
  white-space:normal;
}

.notice-title a{
  display:inline;
}

.notice-date{
  display:block;
  margin-top:8px;
}


/* final notice layout fix */

.notice-item{
  display:block !important;
}

.notice-item .notice-title{
  display:block !important;
  width:100% !important;
  flex:none !important;
  white-space:normal !important;
}

.notice-item .notice-date{
  display:block !important;
  width:100% !important;
  margin-top:8px !important;
  clear:both;
}

.notice-item a{
  display:inline !important;
}



/* =========================================================
   Challenge Winners
========================================================= */

.challenge-box{
  position:relative;
}

.challenge-results{
  min-width:220px;
  max-width:260px;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}

.challenge-results-title{
  font-size:16px;
  font-weight:900;
  margin-bottom:12px;
  text-align:center;
}

#challengeWinners{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.winner-row{
  display:grid;
  grid-template-columns:32px 1fr auto;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.96);
  color:#1f2937;
  border-radius:12px;
  padding:8px 10px;
  min-height:38px;
}

.winner-medal{
  font-size:21px;
  text-align:center;
}

.winner-name{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.winner-row small{
  font-size:10px;
  opacity:.65;
  white-space:nowrap;
}

.winner-empty{
  text-align:center;
  font-size:12px;
  opacity:.78;
  padding:8px 2px;
}

.winner-1{
  box-shadow:0 0 16px rgba(250,204,21,.28);
}

.winner-2{
  box-shadow:0 0 16px rgba(148,163,184,.25);
}

.winner-3{
  box-shadow:0 0 16px rgba(180,83,9,.22);
}

@media(max-width:820px){

  .challenge-results{
    width:100%;
    max-width:none;
    box-sizing:border-box;
  }

}