:root{
  --dm-bg:#0b1220;
  --dm-card:#0f172a;
  --dm-line: rgba(255,255,255,.10);
  --dm-soft: rgba(255,255,255,.06);
  --dm-text: rgba(255,255,255,.92);
  --dm-muted: rgba(255,255,255,.68);
  --dm-ac1:#22c55e;  /* green */
  --dm-ac2:#60a5fa;  /* blue */
  --dm-ac3:#a78bfa;  /* purple */
  --dm-ac4:#fb7185;  /* rose */
}

.dmWrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 14px;
}





/* ------- Top Rated card (glass) ------- */
.dmTRCard{
  width: 190px;
  border-radius: 22px;
  background: radial-gradient(160px 160px at 20% 12%, rgba(96,165,250,.20), transparent 62%),
              radial-gradient(160px 160px at 85% 22%, rgba(251,113,133,.18), transparent 62%),
              linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88));
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 16px 30px rgba(2,6,23,.10);
  text-decoration:none !important;
  color:#0b1220 !important;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
  overflow:hidden;
}
.dmTRCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(2,6,23,.18);
  border-color: rgba(244,63,94,.22);
}
.dmTRTop{
  padding: 12px 12px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.dmRank{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight:900;
  font-size: 12px;
  color:#0b1220;
  background: rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
}
.dmRank b{
  font-weight: 1000;
}
.dmHot{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight:900;
  font-size: 12px;
  color:#fff;
  background: linear-gradient(135deg, var(--dm-ac3), var(--dm-ac4));
  box-shadow: 0 10px 18px rgba(167,139,250,.22);
}
.dmImgBox{
  margin: 10px 12px 0;
  border-radius: 18px;
  background: rgba(255,255,255,.7);
  border:1px solid rgba(15,23,42,.06);
  height: 165px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.dmImgBox::after{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width:120px;height:120px;
  background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.22), transparent 60%);
  transform: rotate(22deg);
}
.dmImgBox img{
  width:100%;
  height:100%;
  object-fit:contain;
  transform: scale(1);
  transition: transform .28s ease;
}
.dmTRCard:hover .dmImgBox img{ transform: scale(1.07); }

.dmTRBody{
  padding: 12px 12px 14px;
}
.dmName{
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  margin: 0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: 34px;
}
.dmMeta{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#334155;
  font-size: 12px;
  font-weight: 800;
}
.dmStars{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
}
.dmStars i{ color: #f59e0b; }
.dmCount{
  color:#64748b;
  font-weight: 800;
}

/* ------- Category grid (magazine tiles) ------- */
.dmCatSection{
  margin: 26px auto 10px;
}
.dmCatGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width:640px){ .dmCatGrid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1024px){ .dmCatGrid{ grid-template-columns: repeat(4, 1fr); } }

.dmCatTile{
  position:relative;
  border-radius: 26px;
  background: linear-gradient(180deg, #0b1220, #0f172a);
  border: 1px solid rgba(148,163,184,.20);
  overflow:hidden;
  text-decoration:none !important;
  box-shadow: 0 18px 44px rgba(2,6,23,.18);
  transform: translateY(0);
  transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease;
  min-height: 250px;
}
.dmCatTile:hover{
  transform: translateY(-7px);
  box-shadow: 0 26px 70px rgba(2,6,23,.28);
  border-color: rgba(96,165,250,.35);
}
.dmCatGlow{
  position:absolute;
  inset:-60px -60px auto auto;
  width:180px;height:180px;
  background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.35), transparent 60%);
  transform: rotate(10deg);
}
.dmCatGlow2{
  position:absolute;
  inset:auto auto -70px -70px;
  width:220px;height:220px;
  background: radial-gradient(circle at 60% 60%, rgba(251,113,133,.28), transparent 62%);
}
.dmCatRibbon{
  position:absolute;
  top: 14px;
  left: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
  color:#0b1220;
  background: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 24px rgba(2,6,23,.18);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.dmCatRibbon .mini{
  width:10px;height:10px;border-radius:99px;
  background: linear-gradient(135deg, var(--dm-ac1), var(--dm-ac2));
}

.dmCatImg{
  height: 168px;
  margin: 54px 14px 0;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.dmCatImg img{
  width:100%;
  height:100%;
  object-fit:contain;
  transform: scale(1);
  transition: transform .30s ease;
}
.dmCatTile:hover .dmCatImg img{ transform: scale(1.08); }

.dmCatText{
  padding: 14px 16px 16px;
  color: var(--dm-text);
}
.dmCatName{
  margin:0;
  font-weight: 1000;
  font-size: 16px;
  letter-spacing:.2px;
}
.dmCatDesc{
  margin: 7px 0 0;
  color: var(--dm-muted);
  font-size: 12px;
  line-height: 1.35;
}
.dmCatCTA{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dmGo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 1000;
  font-size: 12px;
  color:#fff;
  padding: 10px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(96,165,250,.95), rgba(167,139,250,.95));
  box-shadow: 0 16px 26px rgba(96,165,250,.18);
}
.dmArrow{
  width: 36px;height:36px;border-radius: 999px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
  transition: transform .18s ease, background .18s ease;
}
.dmCatTile:hover .dmArrow{ transform: translateX(2px); background: rgba(255,255,255,.16); }

/* ------- section header ------- */
.dmHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin: 10px 0 14px;
}
.dmHeadTitle{
  color:#0b1220;
  font-weight:900;
  font-size: 26px;
  letter-spacing: .2px;
  margin:0;
}
.dmHeadSub{
  margin:6px 0 0;
  color:#64748b;
  font-size: 13px;
  max-width: 620px;
}
.dmPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  color:#0b1220;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  user-select:none;
}
.dmDot{
  width:10px;height:10px;border-radius:99px;
  background: linear-gradient(135deg, var(--dm-ac2), var(--dm-ac4));
}

/* ------- horizontal rail ------- */
.dmRail{
  position:relative;
  padding: 10px 6px 8px;
  overflow:hidden;
}
.dmScroller{
  display:flex;
  gap: 14px;
  overflow-x:auto;
  padding: 8px 10px 14px;
  scroll-snap-type: x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
}
.dmScroller::-webkit-scrollbar{display:none;}
.dmScroller{scrollbar-width:none;-ms-overflow-style:none;}
.dmSnap{scroll-snap-align:center; flex-shrink:0;}













.dmLaunchSec{
background:#ffffff;
padding:80px 20px;
border-top:1px solid #e5e7eb;
border-bottom:1px solid #e5e7eb;
font-family:Inter,system-ui,Segoe UI,Arial;
}


.dmLaunchWrap{
max-width:1100px;
margin:auto;
}


/* HEADER */

.dmLaunchHead{
text-align:center;
margin-bottom:50px;
}

.dmLaunchHead h2{
font-size:40px;
font-weight:900;
color:#0f172a;
letter-spacing:-0.3px;
}

.dmLaunchHead p{
margin-top:12px;
font-size:16px;
color:#475569;
max-width:650px;
margin-left:auto;
margin-right:auto;
line-height:1.6;
}


/* GRID */

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


@media(max-width:900px){

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

}

@media(max-width:600px){

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

}


/* CARD */

.dmLaunchCard{

border:1px solid #e5e7eb;
border-radius:18px;
padding:26px;
background:#fff;

transition:.25s ease;
}


.dmLaunchCard:hover{

border-color:#1E2A78;
transform:translateY(-4px);

}


/* ICON */

.dmLaunchCard i{

font-size:22px;
color:#1E2A78;
margin-bottom:14px;

}


/* TITLE */

.dmLaunchCard h3{

font-size:18px;
font-weight:800;
margin-bottom:6px;
color:#0f172a;

}


/* TEXT */

.dmLaunchCard p{

font-size:14px;
color:#475569;
line-height:1.6;

}


/* CTA */

.dmLaunchCTA{

margin-top:40px;
display:flex;
gap:14px;
justify-content:center;
flex-wrap:wrap;

}


/* BUTTONS */

.dmLaunchBtnPrimary{

background:#e11d48;
color:white;
padding:14px 22px;
border-radius:14px;
font-weight:900;
text-decoration:none;

}


.dmLaunchBtnSecondary{

border:1px solid #e5e7eb;
color:#0f172a;
padding:14px 22px;
border-radius:14px;
font-weight:900;
text-decoration:none;

}


.dmLaunchBtnPrimary:hover{

background:#be123c;

}


.dmLaunchBtnSecondary:hover{

border-color:#1E2A78;

}












.dmContent{
padding:40px 15px;
background:#f5f7fb;
font-family:'Poppins',sans-serif;
color:#222;
}

.dmContentWrap{
max-width:1200px;
margin:auto;
}

.dmContentHero{
background:#fff;
padding:35px;
border-radius:22px;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
margin-bottom:30px;
border:1px solid #edf0f7;
}

.dmContentHero h1{
font-size:38px;
line-height:1.3;
font-weight:700;
margin-bottom:22px;
color:#111827;
}

.dmContentHero p{
font-size:16px;
line-height:1.9;
color:#4b5563;
margin-bottom:18px;
}

.dmSection{
background:#fff;
padding:30px;
border-radius:20px;
box-shadow:0 8px 25px rgba(0,0,0,0.05);
margin-bottom:30px;
border:1px solid #edf0f7;
}

.dmSection h2{
font-size:30px;
font-weight:700;
margin-bottom:20px;
color:#111827;
line-height:1.4;
}

.dmSection p{
font-size:16px;
line-height:1.9;
color:#4b5563;
margin-bottom:18px;
}

.dmCardGrid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:22px;
margin-bottom:35px;
}

.dmCard{
background:#fff;
padding:28px;
border-radius:20px;
border:1px solid #edf0f7;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
transition:0.3s ease;
position:relative;
overflow:hidden;
}

.dmCard:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:linear-gradient(90deg,#2563eb,#7c3aed);
}

.dmCard:hover{
transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

.dmCard h3{
font-size:22px;
font-weight:700;
margin-bottom:15px;
color:#111827;
line-height:1.4;
}

.dmCard p{
font-size:15px;
line-height:1.8;
color:#4b5563;
margin:0;
}

.dmTips{
background:#fff;
padding:35px;
border-radius:22px;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
border:1px solid #edf0f7;
}

.dmTips h2{
font-size:30px;
font-weight:700;
margin-bottom:25px;
color:#111827;
line-height:1.4;
}

.dmTips ul{
padding:0;
margin:0;
list-style:none;
display:grid;
gap:18px;
}

.dmTips li{
background:#f8fafc;
padding:20px 22px;
border-radius:16px;
font-size:15px;
line-height:1.8;
color:#374151;
position:relative;
padding-left:58px;
border:1px solid #edf2f7;
}

.dmTips li:before{
content:'✓';
position:absolute;
left:20px;
top:18px;
width:26px;
height:26px;
border-radius:50%;
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:700;
}

@media(max-width:768px){

.dmContent{
padding:20px 10px;
}

.dmContentHero,
.dmSection,
.dmTips{
padding:22px;
border-radius:18px;
}

.dmContentHero h1{
font-size:28px;
}

.dmSection h2,
.dmTips h2{
font-size:24px;
}

.dmCard{
padding:22px;
}

.dmCard h3{
font-size:20px;
}

.dmContentHero p,
.dmSection p,
.dmCard p,
.dmTips li{
font-size:14px;
line-height:1.8;
}

}