.screen.centered{
  position:relative;
  justify-content:flex-start;
  gap:13px;
  padding:26px 22px 24px;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% 5%,rgba(255,255,255,.96) 0 10%,rgba(255,255,255,.28) 32%,transparent 48%),
    radial-gradient(circle at 88% 15%,rgba(199,164,64,.24),transparent 27%),
    radial-gradient(circle at 8% 18%,rgba(11,110,79,.18),transparent 30%),
    linear-gradient(180deg,#e9f4ee 0,#f8f1da 34%,#fff 48%,#fff 100%);
}
.screen.centered::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0 0 auto 0;
  height:322px;
  opacity:.42;
  pointer-events:none;
  background-image:
    linear-gradient(30deg,rgba(11,110,79,.11) 12%,transparent 12.5%,transparent 87%,rgba(11,110,79,.11) 87.5%,rgba(11,110,79,.11)),
    linear-gradient(150deg,rgba(11,110,79,.11) 12%,transparent 12.5%,transparent 87%,rgba(11,110,79,.11) 87.5%,rgba(11,110,79,.11)),
    linear-gradient(30deg,rgba(199,164,64,.10) 12%,transparent 12.5%,transparent 87%,rgba(199,164,64,.10) 87.5%,rgba(199,164,64,.10)),
    linear-gradient(150deg,rgba(199,164,64,.10) 12%,transparent 12.5%,transparent 87%,rgba(199,164,64,.10) 87.5%,rgba(199,164,64,.10));
  background-size:34px 60px;
  background-position:0 0,0 0,17px 30px,17px 30px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0 70%,transparent 100%);
}
.screen.centered::after{
  content:"";
  position:absolute;
  z-index:0;
  top:20px;
  left:50%;
  width:316px;
  height:244px;
  transform:translateX(-50%);
  border:1.5px solid rgba(199,164,64,.28);
  border-radius:158px 158px 34px 34px;
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.14),0 22px 54px rgba(6,72,50,.05);
  pointer-events:none;
}
.screen.centered>*{position:relative;z-index:1}
.screen.centered .brand-mark{
  width:106px;
  height:106px;
  margin:8px auto 0;
  border-radius:30px;
  filter:drop-shadow(0 15px 18px rgba(6,72,50,.16));
  background-color:rgba(255,255,255,.56)!important;
  background-size:88%!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.65),0 10px 30px rgba(6,72,50,.07);
}
.screen.centered .title-brand{
  width:100%;
  text-align:center;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-.7px;
  color:var(--green-dark);
  font-weight:850;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.screen.centered .title-brand::before{
  content:"TGPU LEARNING HUB";
  display:block;
  margin-bottom:7px;
  color:var(--gold);
  font-size:9px;
  font-weight:800;
  letter-spacing:2.2px;
}
.screen.centered .hero-title{
  margin-top:4px;
  font-size:25px;
  color:var(--green-dark);
  letter-spacing:-.35px;
}
.screen.centered .hero-copy{
  max-width:330px;
  margin:0 auto;
  padding:0 6px;
  color:#53675f;
  font-size:14px;
}
.screen.centered .pills.center{
  gap:7px;
}
.screen.centered .pill{
  padding:7px 12px;
  background:rgba(234,244,239,.92);
  box-shadow:inset 0 0 0 1px rgba(11,110,79,.05);
}
.screen.centered .pill.gold{
  background:rgba(247,240,218,.96);
  color:#7a5f13;
}
.screen.centered .hero-arabic{
  position:relative;
  height:142px;
  margin-top:3px;
  overflow:hidden;
  border:1px solid rgba(11,110,79,.08);
  background:
    radial-gradient(circle at 82% 18%,rgba(199,164,64,.25),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.9),rgba(234,244,239,.96));
  box-shadow:0 12px 32px rgba(6,72,50,.07);
}
.screen.centered .hero-arabic::before,
.screen.centered .hero-arabic::after{
  content:"✦";
  position:absolute;
  color:rgba(199,164,64,.5);
  font-size:17px;
}
.screen.centered .hero-arabic::before{top:16px;left:20px}
.screen.centered .hero-arabic::after{right:22px;bottom:18px;font-size:11px}
.screen.centered .arabic-display{
  color:var(--green-dark);
  font-size:51px;
  text-shadow:0 2px 0 rgba(255,255,255,.7);
}
.screen.centered .hero-arabic small{
  color:#60756c;
}
.screen.centered .btn{
  min-height:54px;
  border-radius:17px;
  box-shadow:0 10px 24px rgba(11,110,79,.18);
}
.screen.centered .btn+.pills.center{
  margin-top:-2px;
}
@media (max-height:760px){
  .screen.centered{gap:10px;padding-top:18px}
  .screen.centered::after{top:12px;height:215px}
  .screen.centered .brand-mark{width:82px;height:82px;margin-top:2px}
  .screen.centered .title-brand{font-size:27px}
  .screen.centered .hero-title{font-size:22px}
  .screen.centered .hero-copy{font-size:13px}
  .screen.centered .hero-arabic{height:116px}
  .screen.centered .arabic-display{font-size:43px}
}
@media (prefers-reduced-motion:reduce){
  .screen.centered .brand-mark{filter:none}
}