@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@700&family=Hind+Siliguri:wght@400;600&display=swap');

:root{
  --bg:#ffffff;
  --ink:#0f172a;
  --blue:#2563eb;
  --violet:#7c3aed;
  --cyan:#0891b2;
  --shadow:rgba(2,6,23,.12);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}

body{
  display:grid;
  place-items:center;
  background:var(--bg);
  font-family:'Hind Siliguri',system-ui;
}

/* clickable wrapper */
.logo-link{
  text-decoration:none;
  position:relative;
}

/* ===== LOGO STACK ===== */
.logo-stack{
  position:relative;
  padding:clamp(20px,5vw,48px);
}

/* shared text */
.logo-stack span{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'Noto Serif Bengali',serif;
  font-weight:700;
  font-size:clamp(2.2rem,8vw,7rem);
  letter-spacing:clamp(.08em,.8vw,.14em);
  line-height:1.1;
  user-select:none;
}

/* depth layers */
.logo-depth-1{
  color:var(--blue);
  transform:translate(clamp(3px,1vw,6px), clamp(3px,1vw,6px));
  z-index:1;
  opacity:.18;
}

.logo-depth-2{
  color:var(--violet);
  transform:translate(clamp(2px,.6vw,3px), clamp(2px,.6vw,3px));
  z-index:2;
  opacity:.25;
}

.logo-depth-3{
  color:var(--cyan);
  transform:translate(clamp(1px,.3vw,1.5px), clamp(1px,.3vw,1.5px));
  z-index:3;
  opacity:.35;
}

/* main layer */
.logo-main{
  position:relative;
  z-index:4;
  background:linear-gradient(180deg,#0f172a,#334155);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 clamp(4px,1vw,10px) clamp(8px,2vw,18px) var(--shadow);
}

/* underline */
.logo-main::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:clamp(-14px,-2vw,-18px);
  width:clamp(55%,65%,70%);
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--blue), var(--violet), transparent);
  opacity:.55;
}

/* tap comfort */
@media (max-width:480px){
  .logo-stack{ padding:20px 16px }
}